前端ofd在线预览

前言

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

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

应用

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

        前端ofd在线预览_第1张图片

        ofd资源包html说明:     前端ofd在线预览_第2张图片

ofd直接测试效果:

前端ofd在线预览_第3张图片

前端ofd在线预览_第4张图片

前端调用方式:

//调用接收之后返回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); } }); }

你可能感兴趣的:(前端,前端,javascript)