《山月也》的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...

三、本地运行项目

安装依赖

node 复制代码
npm install

执行脚本命令

node 复制代码
npm run serve

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

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

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

WPS查看正常:

ofd.js渲染文档空白,并抛出异常(ofd:Template not found!)

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

js 复制代码
 const template = page[pageId]['json']['ofd:Template'];

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

因此我改造了如下代码:

js 复制代码
// 添加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层次的嵌套

js 复制代码
// 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文件得到正常渲染

(持续更新....)

相关推荐
赵小川6 分钟前
Taro 包升级实录 — 从 3.3 到 3.6.3 完整指南
前端·架构
_志哥_16 分钟前
解除有些网站不能复制的终极办法
前端·chrome
愚昧之山绝望之谷开悟之坡30 分钟前
什么是uv和传统的区别
前端·chrome·uv
SRC_BLUE_1740 分钟前
NSSCTF - Web | 【第五空间 2021】pklovecloud
android·前端
golang学习记40 分钟前
从0死磕全栈之Next.js 数据安全实战指南:从零信任到安全架构
前端
云中雾丽42 分钟前
flutter中 getx 的使用
前端
Jay丶1 小时前
聊聊入职新公司两个月,试用期没过这件事
前端·面试
ZTeam前端全栈进阶圈1 小时前
Vue新技巧:<style>标签里的 CSS 也能响应式!
前端
ღ_23331 小时前
vue3二次封装element-plus表格,slot透传,动态slot。
前端·javascript·vue.js
摸着石头过河的石头1 小时前
JavaScript继承的多种实现方式详解
前端·javascript