基于Vue2的ofd文件预览

最近项目需要预览 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渲染方案及组件