需要用到如下文件：/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
})
}
})
}
}