vue前端利用ofd.js实现ofd类型在线预览

国家正在推行办公文档的OFD格式。 简单来说，OFD是我们国家自主定制，PDF是美国公司制定。

目前OFD主要是在政府机关使用，不能直接打开文件，需要专业的OFD阅读器。

ofd.js实现ofd文件的预览功能 ofd.js是github上的一个开源项目JavaScript工具包。地址：https://github.com/DLTech21/ofd.js ，感谢作者。

使用步骤：

 

1.安装：

npm i ofd.js

 

2.axios封装注意事项，responseType: 'arraybuffer'

//电子证件照 export function getXkzOriginal(data) {     return req({         url: '/bigdata/getXkzOriginal',         method: 'POST',         params: data,         responseType: 'arraybuffer'     }) } 3.vue组件使用

import {parseOfdDocument, renderOfd} from "ofd.js"

getXkzOriginal({ dataId: this.dataId })                 .then((res) => {                     let data = res.data                     let file = new File([data], 'demo.ofd')                                       if (!!data && res.status === 200) {                         // console.log(file.size)                         if (file && file.size > 0) {                             parseOfdDocument({                                 ofd: file ,                                 secret: 'kgNVVbdUZ31C6mps',                                 signaturesCallback(signatures) {                                     // console.log(signatures)                                     let screenWidth = 1050 //设置内容的显示框大小                                     //将流数据渲染给接受的div盒子                                     renderOfd(0, screenWidth).then((res) => {                                         const divs = res                                         let contentDiv = document.getElementById('divId') // 获取盒子元素                                         contentDiv.innerHTML = ''                                         for (const div of divs) {                                             contentDiv.appendChild(div)                                         }                                     })                                 },                                 success(core) {                                     console.log(core)                                 },                                 fail(error) {                                     console.log(error)                                 },                             })                             this.pic = true                             this.spinning = false   }） }

标签：vue,console,ofd,res,js,file,data
来源： https://www.cnblogs.com/zhaohui9527/p/16441901.html