ofd-viewer

纯前端 OFD 阅读/渲染组件库，基于 svg + canvas 渲染，无需后端服务，浏览器端完成 OFD 文件的解压、解析、渲染与电子签章验签。

安装

npm install ofd-viewer

环境要求

• Vue 3
• Element Plus（需全局注册）

// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

使用组件

<template>
  <OfdViewer :file-url="url" :show-toolbar="true" />
</template>

<script setup>
import { ref } from 'vue'
import OfdViewer from 'ofd-viewer'

const url = ref('/path/to/file.ofd')
</script>

或全局注册：

import { createApp } from 'vue'
import OfdViewer from 'ofd-viewer'
import 'ofd-viewer/lib/ofd-viewer.css'

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

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | fileUrl | String | '' | OFD 文件地址，传入后自动加载渲染 | | embedded | Boolean | false | 是否嵌入模式。false 时铺满父容器，true 时高度由 height 控制 | | height | String | '100%' | embedded 模式下的容器高度（如 600px / 80vh） | | showToolbar | Boolean | false | 是否显示工具栏（打开本地 OFD / 打开链接 / 翻页 / 缩放 / 下载） | | showHeader | Boolean | true | 是否显示整个头部区域（false 时工具栏整体隐藏，内容区占满容器） | | fitWidthRatio | Number | 0.75 | 按容器宽度自适应渲染时，页面宽度占容器宽度的比例（如 0.9 表示占 90%） |

说明：非 embedded 模式组件高度为父容器 100%，请确保父容器有确定高度；或使用 embedded 模式并指定 height。fitWidthRatio 控制首次渲染及窗口缩放时页面的显示大小，之后仍可通过工具栏放大/缩小。

功能特性

• OFD 标准 XML 解析（ofd:Page / ofd:Layer / ofd:PageBlock 嵌套结构）
• 矢量路径渲染：支持 M / L / B / Q / C 路径命令
• 文本渲染：支持 TextObject（DeltaX/DeltaY 逐字定位）
• 图片渲染：普通 PNG/JPEG 及 JBIG2/GBIG2 压缩图片（内置解码器）
• 电子签章：SES 签章解析、摘要校验（SM3/SHA1/MD5）、验签结果展示
• 模板页（TemplatePage）、批注（Annotation）渲染
• 缩放、翻页、下载

底层 API

除组件外，也导出底层解析/渲染工具函数。

import { parseOfdDocument, renderOfd } from 'ofd-viewer'

parseOfdDocument({
  ofd: ofdFile,            // File | ArrayBuffer | 文件URL
  success(res) {
    const ofdObj = res[0]
    const divs = renderOfd(screenWidth, ofdObj) // screenWidth: 渲染宽度(px)
    for (const div of divs) {
      document.getElementById('content').appendChild(div)
    }
  },
  fail(error) {
    console.error(error)
  }
})

| API | 说明 | | --- | --- | | parseOfdDocument | 解析 OFD 文件 | | renderOfd(screenWidth, ofd) | 按屏幕宽度自适应渲染所有页 | | renderOfdByScale(ofd) | 按当前缩放比例渲染所有页 | | setPageScale(scale) | 设置全局缩放比例 | | getPageScale() | 获取当前缩放比例 |

License

Apache-2.0