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

(持续更新....)

相关推荐
gnip1 小时前
js上下文
前端·javascript
中草药z1 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
不知名raver(学python版)1 小时前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休2 小时前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel2 小时前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端
学习3人组2 小时前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架
世伟爱吗喽2 小时前
threejs入门学习日记
前端·javascript·three.js
朝阳5812 小时前
用 Rust + Actix-Web 打造“Hello, WebSocket!”——从握手到回声,只需 50 行代码
前端·websocket·rust
F2E_Zhangmo2 小时前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript