ofd-viewer

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

说明：非 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)
  }
})

License

Apache-2.0