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

(持续更新....)

相关推荐
abigale031 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者1 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile1 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639971 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊1 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火1 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
耶啵奶膘8 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家8 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能