vue3项目如何安装引入,实现预览ofd文件

335 阅读1分钟

Vue3项目如何安装引入ofd,预览ofd文件

在我实现ofd的签署开发 预览开发的时候 使用的是开源代码ofd.js源码

ofd.js 是一个基于 JavaScript 的开源库,用于处理和操作 Open Financial Documents(OFD)文件。OFD 是一种用于电子文档交换和共享的开放标准,它定义了一种结构化的文档格式,用于存储和传输财务、商业和其他领域的文档。 源码地址

采用的是源码的方式

所以要单独安装ofd.js所需的依赖

@lapo/asn1js

js-md5

js-sha1

jsrsasign

jsrsasign-util

jszip

jszip-utils

ofd-xml-parser

sm-crypto

web-streams-polyfill

x2js

拷贝源码里边src下的utils 修改里边js引入的路径

例如:

微信图片_20241219094322.png

然后参照作者的例子 就可以自己写组件预览ofd文件了

自己做的一个效果:

QQ图片20241219095503.png

注意: 我使用的是vben admin框架

使用utils文件中的方法时报错

1、 ofd-xml-parser

let parser = require('ofd-xml-parser');
修改为
import parser from 'ofd-xml-parser';

2、 global is not defined

index.html
加入
<script>
  window.global = window;
</script>

3、 签章不显示

ofd_parser.js
83行
else if (stamp.sealObj.type === 'png' ) 
修改添加判断
else if (stamp.sealObj.type === 'png' || stamp.sealObj.type === 'gif')