本地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中引入,注册为全局函数
1 2 3 | import {parseOfdDocument,renderOfd} from "@/utils/ofd/ofd" Vue.prototype.$parseOfdDocument=parseOfdDocument Vue.prototype.$renderOfd=renderOfd |
页面组件中,打开本地ofd文件预览相关代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <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 }) } }) } } |
本文来自博客园,作者:zwbsoft,转载请注明原文链接:https://www.cnblogs.com/zwbsoft/p/16129046.html
电话微信:13514280351
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步