lm-vue-ofd（Vue 组件）

简介

开箱即用的 Vue 3 OFD 预览组件，基于内部 OFD 解析与渲染能力封装，适用于在 Vue 应用中快速集成 OFD 预览能力。

• 简单易用: 一个组件完成加载、渲染
• 多源输入: 支持 URL、File、ArrayBuffer
• 可配置: 显示工具栏、加载态、明暗主题
• 事件回调: 渲染完成、错误上报

安装

npm i lm-vue-ofd
# 或
pnpm add lm-vue-ofd

快速开始

全局注册

import { createApp } from 'vue'
import App from './App.vue'

import VueOfd from 'lm-vue-ofd'
import 'lm-vue-ofd/dist/style.css'

createApp(App)
  .use(VueOfd)
  .mount('#app')

局部注册（按需使用）

<script setup lang="ts">
import { BzlOfdPreview } from 'lm-vue-ofd'
import 'lm-vue-ofd/dist/style.css'
</script>

<template>
  <BzlOfdPreview :src="src" :options="{ showToolbar: true, showLoading: true }" />
  <!-- src 可为 URL / File / ArrayBuffer -->
  <!-- 事件：@rendered、@error -->
</template>

用法示例

<script setup lang="ts">
import { ref } from 'vue'
import { BzlOfdPreview } from 'lm-vue-ofd'

const src = ref<string | File | ArrayBuffer>('https://example.com/demo.ofd')

function handleRendered(payload) {
  console.log('渲染完成：', payload)
}

function handleError(err) {
  console.error('渲染失败：', err)
}
</script>

<template>
  <BzlOfdPreview
    :src="src"
    :options="{ showToolbar: true, showLoading: true, theme: 'light' }"
    @rendered="handleRendered"
    @error="handleError"
  />
  <!-- 也可传入 File / ArrayBuffer：
       <BzlOfdPreview :src="fileOrArrayBuffer" />
  -->
  
</template>

📚 API文档

使用方式

import { BzlOfdPreview } from 'lm-vue-ofd'

Props

• src: string | File | ArrayBuffer（可选）
  • OFD 数据源，支持 URL、浏览器 File、ArrayBuffer
• options: { showLoading?: boolean showToolbar?: boolean theme?: 'light' | 'dark' }（可选）
  • showLoading：是否显示加载动画（默认显示）
  • showToolbar：是否显示工具栏（默认显示）
  • theme：主题色（默认 light）

Events

• rendered: (payload: { pages: number }) => void
• error: (error: unknown) => void

注意事项

• 如使用远程 URL 加载 OFD，请确保服务端允许跨域（CORS）并返回二进制响应（Content-Type: application/octet-stream 或 application/ofd）。

版本与兼容性

• 需要 Vue 版本 >= 3.2.0
• 现代浏览器环境，Node 构建工具需支持 ESM