《山月也》的ofd.js 踩坑之旅（持续更新…）

---

前言

在最近的项目中，前端开发任务涉及到了OFD文件的在线预览以及电子印章的图像展示与信息提取。在调研了多个开源OFD预览库后，我们发现ofd.js库相对稳定且功能较为全面，尽管如此，它在实际应用中仍存在一些不足之处和待解决的bug。为此，我决定记录下使用ofd.js的过程中的种种挑战与解决方案，以下便是我使用ofd.js的"踩坑"实录。

一、ofd.js是什么？

OFD.js是一个开源的JavaScript库，用于在网页中实现OFD（Open Financial Document）文件的预览、浏览和基本操作。OFD是一种面向电子发票、电子文档等金融文件的开放标准格式，旨在提供一种安全、可靠、高效的电子文档存储和交换解决方案。

OFD.js的主要特点包括：

1. 跨平台性：可以在不同的操作系统和设备上运行，只要有支持JavaScript的浏览器。
2. 功能丰富：支持OFD文件的打开、浏览、缩放、翻页、搜索等基本功能。
3. 易于集成：可以方便地嵌入到各种Web应用中，与现有的前端技术栈兼容。
4. 开源免费：开发者可以自由使用和修改OFD.js，以适应自己的项目需求。

二、下载ofd.js开源代码

gitee: gitee.com/Donal/ofd.j...

github: github.com/DLTech21/of...

三、本地运行项目

安装依赖

npm install

执行脚本命令

npm run serve

四、印章图片全是灰色 - - - 解决

下方图片中的css样式注释即可：

五、ofd:Template not found! - - - 解决

WPS查看正常：

ofd.js渲染文档空白，并抛出异常（ofd:Template not found!）

源码通过下方代码获取被渲染ofd文件的template:

 const template = page[pageId]['json']['ofd:Template'];

断点发现，json中只有ofd:Content, 没有 ofd:Template 字段：

因此我改造了如下代码：

// 添加renderLayerFromContent方法
const renderLayerFromContent= function (content, pageDiv, fontResObj, drawParamResObj, multiMediaResObj) {
    let array = [];
    const layers = content['ofd:Layer'];
    array = array.concat(layers);
    for (let layer of array) {
        if (layer) {
            renderLayer(pageDiv, fontResObj, drawParamResObj, multiMediaResObj, layer, false);
        }
    }
}

// renderPage函数中添加对ofd:Content的获取以及对其进行渲染
const content = page[pageId]['json']['ofd:Content'];
if (content) {
    renderLayerFromContent(content, pageDiv, fontResObj, drawParamResObj, multiMediaResObj);
}

断点发现，renderLayer函数形参的layer参数存在ofd:PageBlock N层次的嵌套

// renderLayer函数的代码块末尾添加如下代码，使用递归来解除多层嵌套
 if (Array.isArray(layer)) {
      for(let i = 0; i < layer.length; i++) {
          renderLayer(pageDiv, fontResObj, drawParamResObj, multiMediaResObj, layer[i], isStampAnnot)
      }
  } else if (layer['ofd:PageBlock']) {
      renderLayer(pageDiv, fontResObj, drawParamResObj, multiMediaResObj, layer['ofd:PageBlock'], isStampAnnot)
  }

至此ofd文件得到正常渲染

(持续更新....)