本地ofd文件预览

需要用到如下文件：/utils文件夹下ofd和jbig2两个文件夹的文件
ofd文件夹中的文件如下：

• ofd.js
• ofd_render.js
• pipleline.js
• ofd_parser.js
• ses_signature_parser.js
• ofd_util.js
• sm3.js
• verify_signature_util.js

jbig2文件夹中的文件如下：

• arithmetic_decoder.js
• ccitt.js
• compatibility.js
• core_utils.js
• is_node.js
• jbig2_stream.js
• jbig2.js
• primitives.js
• stream.js
• util.js

+jszip-utils插件

在main.js中引入，注册为全局函数

import {parseOfdDocument,renderOfd} from "@/utils/ofd/ofd"
Vue.prototype.$parseOfdDocument=parseOfdDocument
Vue.prototype.$renderOfd=renderOfd

　

页面组件中，打开本地ofd文件预览相关代码如下：

<el-button @click="importFile()">打开OFD
<input ref="upload" type="file" style="display:none" accept=".ofd" />
</el-button>
<div id="ofdDiv" v-show = "showOfd"></div>


mounted(){
　　this.refs.upload.addEventListener('change',e=>{
　　　　this.readOfd(e)
　　})
},
methods:{
// 打开ofd文件
importFile(){
　　this.blobURL=null
　　$("#fileButton")[0].click()
},
readOfd(e){
　　const file = e.target.files;
　　if(file.length<=0){
　　　　return false
　　}else if(!/\.(ofd)$/test(files[0].name.toLowerCase())){
　　　　alert("上传格式不正确")
　　　　return false
　　}
　　this.showOfdFile(files[0]) //打开ofd文件预览
　　this.blobURL = files[0]
},
showOfdFile(fileurl){
　　let that =this;
　　// 在main.js中注册的全局函数
　　this.$parseOfdDocument({
　　ofd:fileurl,
　　success(res){
　　　　// $renderOfd 也是main.js中注册的全局函数
　　　　let divs = that.$renderOfd(that.screenWidth,res[0])
　　　　let contentDiv = document.getElementById("ofdDiv")
　　　　contentDiv.innerHTML=''
　　　　divs.forEach(e=>{
　　　　　　contentDiv=appendChild(e);
　　　　});
　　　　that.showOfd=true
　　},
　　// 失败的话显示错误提示信息
　　fail(error){
　　　　that.$message({
　　　　　　type:'info',
　　　　　　message:error,
　　　　　　showClose:true,
　　　　　　duration:20000
　　　　})
　　}
　　})
}

}