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

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
 
})
}