前端ofd在线预览

2023-11-17 17:10| 来源: 网络整理| 查看: 265

前言

项目是非vue项目，整体比较旧，网上寻找的很多资料都是vue的，本人搞半天，没搞好。后面我通过后端去实现，将ofd转成pdf，前端直接pdf预览，但是发现转成pdf的文件上面的签章不见了。ofd转pdf的后端网上有很多，试了好几个之后，我放弃了！！最后找到这个前端的在线预览，签章也保留了。

前端ofd在线预览资源包地址

应用

ofd资源包的目录层级如下：

ofd资源包html说明：

ofd直接测试效果：

前端调用方式：

//调用接收之后返回ofd文件的base64 //将base64转成可预览的地址 var arr = base64.split(','), bstr = atob(arr[0]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } var myBlob = new Blob([u8arr], null); var myUrl = URL.createObjectURL(myBlob); //使用ofd资源包的showofd.html打开地址 var ofdhtml = "../../showofd/showofd.html?file="+myUrl; window.open(html);

layui框架实现代码

fifth.showOfd = function(imageData){ if (imageData == "") { common.fail("查看图片出错，请联系相关开发人员！"); return ; } //后端返回ofd的base64 var data = imageData[0]; layer.open({ type: 1 //此处以iframe举例 ,title: "ofd预览" ,area: ['80%', '90%'] ,shade: 0 ,maxmin: true ,moveType: 0 ,zIndex: layer.zIndex ,content:'' ,success:function(){ var arr = data.split(','), bstr = atob(arr[0]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } var myBlob = new Blob([u8arr], null); var myUrl = URL.createObjectURL(myBlob); var ofdhtml = "../../easyopen/showofd/showofd.html?file="+myUrl; var html = "" $('#pop').empty(); $("#pop").append(html); } }); }

【本文地址】

公司简介

联系我们