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