最近项目需要预览 ofd 文件，而且涉及到验章签章的问题，所以上网搜索了一下，有用的内容很少，本来想偷个懒直接用 ofd.js 渲染，结果年后回来 ofd.js 突然用不了了，于是根据 ofd.js 的源码修改了一下自己写了一个 vue2 组件，复制即用。
源码上传了gitee：
ofd-view: vue2编写ofd文件预览组件，由ofd.js修改而来 (gitee.com)
运行截图：
使用这个组件时，需要引入以下依赖：（尽量不要修改版本，可能会导致出现一些奇奇怪怪的问题）
"@lapo/asn1js": "^1.2.1",
"jszip": "^3.7.0",
"jszip-utils": "^0.1.0",
"ofd-xml-parser": "^0.0.2",
"js-md5": "^0.7.3",
"js-sha1": "^0.6.0",
"jsrsasign": "^10.3.0",
"sm-crypto": "^0.3.2",
"web-streams-polyfill": "^3.1.0",
"element-resize-detector": "^1.2.4",
"x2js": "^3.4.0"然后cv以下组件到你的代码里就行
外部通过 props 传入一个变量 activeOfdId，通过监测 activeOfdId 的变化来从 sessionStorage 中读取 ofd 文件的 base64 字符串，因为项目获取文件的接口比较多样，所以这么写最方便，如果你觉得文件存 sessionStorage 中占空间或者获取文件的接口比较少，也可以直接把获取文件的接口写在这里。
主要渲染 ofd 文件的代码就是 parseOfdDocument 和 renderOfd ：
// 渲染ofd
viewOfd(file, screenWidth) {
let that = this;
// 其中ofd传入的file支持本地文件、二进制或者url，screenWidth为屏幕宽度
parseOfdDocument({
ofd: file,
success(res) {
that.ofdObj = res[0]
that.pageCount = res[0].pages.length;
// 输出ofd每页的div
const contentDiv = document.getElementById('ofdContainer');
contentDiv.innerHTML = '';
const divs = renderOfd(screenWidth, res[0])
that.originalScale = getPageScale();
that.displayOfdDiv(divs);
},
fail(error) {
console.log(error)
}
})
},其中 ofd 传入的 file 支持本地文件、二进制或者url
如果后端传过来的是 base64 字符串，咱们通过utils里的方法转一下格式就可以：
// base64转file
export function base64ToFile(base64Str){
const data = base64Str.replace(/[\n\r]/g, '');
const raw = window.atob(data);
const rawLength = raw.length;
const array = new Uint8Array(new ArrayBuffer(rawLength));
for (let i = 0; i < rawLength; i++) {
array[i] = raw.charCodeAt(i) & 0xff
}
return new File([array], 'demo.ofd')
}这里也对签章的内容进行了解析，具体内容看源码吧，ofd.js中也有
主要代码还是来自于ofd.js,只是对ofd.js进行小部分的修改，感谢原作大佬！官网：
GitHub - DLTech21/ofd.js: OFD板式文件html渲染方案及组件
