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