lm-js-ofd（JS 方式）

简介

纯 JS 的 OFD 解析与渲染工具库，适用于任意前端框架或原生页面。

• 解析: 将 OFD 二进制（URL/File/ArrayBuffer）解析为结构化对象
• 渲染: 将页面内容转换为可挂载的 DOM 节点
• 缩放: 支持按容器宽度自适应或按固定缩放比例渲染
• 工具方法: 预览器/下载/销毁实例等

安装

npm i lm-js-ofd

快速开始

📦 安装

npm install lm-js-ofd
# 或
pnpm install lm-js-ofd

🎯 基础使用

import jsPreviewOfd from 'lm-js-ofd'

const container = document.getElementById('content')!
const previewer = jsPreviewOfd.init(container, {
  className: 'ofd-container',
  cleanBeforeRender: true,
  renderMode: 'width', // 'width' | 'scale'
})

previewer.preview('xxx.ofd')
  .then(({ pages }) => console.log('渲染完成', pages))
  .catch(err => console.error('渲染失败', err))

previewer.save('发票.ofd')   // 下载
previewer.destroy()          // 销毁

🎯 第二种使用方式

这种方式可以拿到渲染好的dom，后续用户自己操作。

import { parseOfdDocument, renderOfd, setPageScale } from 'lm-js-ofd'

parseOfdDocument({
  ofd: 'xxx.ofd',
  success(res) {
    const ofdDoc = Array.isArray(res) ? res[0] : res
    const width = document.getElementById('content')!.clientWidth
    const pages = renderOfd(width, ofdDoc)
    const root = document.getElementById('content')!
    root.innerHTML = ''
    pages.forEach(p => root.appendChild(p))
  },
  fail(err) { console.error(err) },
})

API 文档

默认导出：jsPreviewOfd

• init(container: HTMLElement, options?: JsPreviewOptions): JsPreviewInstance

JsPreviewOptions

• className?: string
• cleanBeforeRender?: boolean
• renderMode?: 'width' | 'scale'

JsPreviewInstance

• container: HTMLElement
• preview(ofd: string | File | ArrayBuffer): Promise<{ pages: number; divs: HTMLDivElement[] }>
• save(fileName?: string): void
• destroy(): void

具名导出

• parseOfdDocument(...)
• renderOfd(width: number, ofdDoc: any): HTMLDivElement[]
• renderOfdByScale(ofdDoc: any): HTMLDivElement[]
• setPageScale(scale: number): void
• getPageScale(): number

组件方案

• 如果你需要开箱即用的 Vue 组件工具栏，请使用 lm-vue-ofd 并引入其样式：

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