《山月也》的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文件得到正常渲染

(持续更新....)

相关推荐
张可12 分钟前
历时两年半开发,Fread 项目现在决定开源,基于 Kotlin Multiplatform 和 Compose Multiplatform 实现
android·前端·kotlin
嘻嘻嘻嘻嘻嘻ys1 小时前
《Spring Boot 3 + GraalVM原生镜像实战:云原生时代的毫秒启动与性能调优》
前端·后端
嘻嘻嘻嘻嘻嘻ys1 小时前
《Spring Boot 3.0×GraalVM:云原生时代的毫秒级启动实战革命》
前端·后端
嘻嘻嘻嘻嘻嘻ys1 小时前
《Vue 3.4响应式内核优化与WebAssembly性能突破实战指南》
前端·后端
嘻嘻嘻嘻嘻嘻ys1 小时前
《Spring Boot 3百万并发实战:基于JDK21虚拟线程的性能革新》
前端·后端
一天睡25小时1 小时前
前端性能优化面试回答技巧(一)
前端·面试
樊小肆1 小时前
Vue3 在线 PDF 编辑 2.0 缩放拖拽、渲染优化功能解析
前端·vue.js·开源
程序员韩立1 小时前
精通 React Hooks:从核心技巧到自定义实践
前端
WEI_Gaot1 小时前
React Hooks useRef useId
前端·react.js
一天睡25小时1 小时前
视频HLS分片与关键帧优化深度解析
前端·javascript