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

 

}）

}