前端ofd在线预览

前言

        项目是非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:'<div id="ofdcontainer" style="width: 99%;height: 99%"><div id="pop" style="width: 100%;height: 100%"></div></div>'
		,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 = "<iframe src="+ofdhtml+" width='100%' height='100%' scrolling='no'></iframe>"
			$('#pop').empty();
			$("#pop").append(html);
		}
	});
}