解密 ofd.js，让文档预览不再成问题

2023-10-29 17:43:19

OFD.js 预览：告别难题，开启流畅体验

OFD.js 预览的幕后原理

OFD.js 是一款开源 JavaScript 库，可用于在浏览器中预览和处理 OFD（Open Fixed Document）文档。OFD 是一种基于 XML 的电子文档格式，广泛应用于电子政务、数字出版等领域。

OFD.js 内部采用 asm.js 模块来处理 OFD 文档的解析和渲染。asm.js 是一种基于 JavaScript 的低级语言，可以编译为高效的 WebAssembly 代码，从而大幅提升性能。

预览难题的根源

网上流传的 ofd.js 预览教程之所以会出现问题，主要原因在于 asm 模块的初始化。在使用 ofd.js 进行预览时，必须先调用函数 onWebassemblyRuntimeInitialized 对 asm 模块进行初始化，否则会导致预览失败或出现异常。

两种行之有效的解决方案

方式一：直接调用 openOFDBaseViewer

这种方法无需初始化 asm 模块，直接调用 openOFDBaseViewer 方法即可进行预览。

// HTML 中引入 ofd.js 库
<script src="path/to/ofd.js"></script>

// 调用 openOFDBaseViewer 进行预览
OFD.openOFDBaseViewer({
  containerId: 'viewer-container',
  url: 'path/to/ofd-document.ofd'
});

方式二：利用 asm 模块初始化

这种方法需要先初始化 asm 模块，然后再调用 openOFDBaseViewer 方法。

// 导入 ofd.js 库
import OFD from 'path/to/ofd.js';

// 初始化 asm 模块
OFD.ASMModule().then(() => {
  // 调用 openOFDBaseViewer 进行预览
  OFD.openOFDBaseViewer({
    containerId: 'viewer-container',
    url: 'path/to/ofd-document.ofd'
  });
});