原生js预览ofd文件，JavaScript

zhangyoude123

已于 2023-11-13 13:43:05 修改

阅读量2.7k

点赞数 3

文章标签： angularjs JavaScript javascript ajax angular.js

于 2022-11-23 14:14:17 首次发布

本文链接：https://blog.csdn.net/zhangyoude123/article/details/127998841

版权

最近项目需要预览ofd文件，于是上网搜索了一下相关知识，结果大感失望，内容很少而且没有什么用，最后根据一个博客找到了方法和总结，话不多说上代码。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>一个简易的排序按钮</title>
  <script src="./ofd.umd.js"></script>
</head>
<body>
	<input type="file" ref="file" class="hidden" accept=".ofd" onchange="fileChanged(event)" />
	<div id="ofdContainer" style="width:100%;height:800px;"></div>
	<script>
		function fileChanged(e) {
		    // 获取文件数据
		    const file = e.target.files[0];
		    // 转换ofd文档
		    ofd.parseOfdDocument({
		        ofd: file,
		        success: function (res) {
		            const screenWidth = 800;
		            const ofdRenderRes = ofd.renderOfd(screenWidth, res[0]);
		            let ofdContainerDiv = document.getElementById('ofdContainer');
		            ofdContainerDiv.innerHTML = '';
		            for (const item of ofdRenderRes) {
		                ofdContainerDiv.appendChild(item);
		            }
		        },
		        fail: function(err){
		            console.error('ofd文件渲染失败',err);
		        }
		    });
		}
	</script>
</body>
</html>

以上代码是根据 https://blog.csdn.net/s_y_w123/article/details/127545928https://blog.csdn.net/s_y_w123/article/details/127545928 此博客而来，具体可以去看下这个博客，里面讲解了插件由来和应用。

由上面代码看出来，这里引用到一个ofd.umd.js插件，原博主没有上传此js，只是告知了怎么获取，但是对于没有vue经验的人来说还是无法获取，所有我这里直接把这个js给贴出来。

https://download.csdn.net/download/zhangyoude123/87126057https://download.csdn.net/download/zhangyoude123/87126057

这个是包含了ofd.umd.js和demo文件的下载地址，感谢大家支持。

此demo不仅包含上述代码中的使用input[file]上传ofd文件后预览，还有预览服务器上的ofd文件，也就是后台接口返回的ofd文件的url。

// ofd文件保存在服务器上
var url = '';//ofd文件的地址url，后台接口返回的
$.ajax({
	url: url,
	type: "GET",
	contentType: false,
	processData: false,
	xhrFields: { responseType: "arraybuffer" },
	success: function (data) {
		ofd.parseOfdDocument({
		    ofd: data,
		    success: function (res) {
			    var screenWidth = 800;
			    var ofdRenderRes = ofd.renderOfd(screenWidth, res[0]);
			    var ofdContainerDiv = document.getElementById('ofdContainer');
			    // 清空元素
			    ofdContainerDiv.innerHTML = '';
			    for(var i = 0; i < ofdRenderRes.length; i++){
				    ofdContainerDiv.appendChild(ofdRenderRes[i]);
			    }
		    },
		    fail: function(err){
			    console.error('ofd文件渲染失败',err);
		    }
	    });
    }
});

展示url地址的ofd文件涉及到一些类型转化，需要先把文件转化为arraybuffer类型。

以上就是原生Js预览ofd文件相关的内容，感谢大家支持