2023年12月8日发(作者：)

前端ofd在线预览

前言

项目是非vue项目，整体比较旧，网上寻找的很多资料都是vue的，本人搞半天，没搞好。后面我通过后端去实现，将ofd转成pdf，

前端直接pdf预览，但是发现转成pdf的文件上面的签章不见了。ofd转pdf的后端网上有很多，试了好几个之后，我放弃了！！最后找到这

个前端的在线预览，签章也保留了。

前端ofd在线预览

应用

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

ofd资源包html说明：

ofd直接测试效果：

前端调用方式：

//调用接收之后返回ofd文件的base64

//将base64转成可预览的地址

var arr = (','),

bstr = atob(arr[0]), n = , u8arr = new Uint8Array(n);

while (n--) {

u8arr[n] = deAt(n);

}

var myBlob = new Blob([u8arr], null);

var myUrl = ObjectURL(myBlob);

//使用ofd资源包的打开地址

var ofdhtml = "../../showofd/?file="+myUrl;

(html);

layui框架实现代码

d = function(imageData){

if (imageData == "") {

("查看图片出错，请联系相关开发人员！");

return ;

}

//后端返回ofd的base64

var data = imageData[0];

({

type: 1 //此处以iframe举例

,title: "ofd预览"

,area: ['80%', '90%']

,shade: 0

,maxmin: true

,moveType: 0

,zIndex:

,content:'

'

,success:function(){

var arr = (','),

bstr = atob(arr[0]), n = , u8arr = new Uint8Array(n);

while (n--) {

u8arr[n] = deAt(n);

}

var myBlob = new Blob([u8arr], null);

var myUrl = ObjectURL(myBlob);

var ofdhtml = "../../easyopen/showofd/?file="+myUrl;

var html = ""

$('#pop').empty();

$("#pop").append(html);

}

});

}