¶ 1 加载必要js文件
<script type="text/javascript" src="../lib/x2js.js"></script>
<script type="text/javascript" src="../lib/jszip.min.js"></script>
<script type="text/javascript" src="../lib/eaysjbig2.js"></script>
<script type="text/javascript" src="./EasyOFD.js"></script>
<script type="text/javascript" src="./lib/opentype.min.js"></script
¶ 2 定义需要渲染的div
<div id='yourElement'>
¶ 3 渲染OFD组件
function load(){
let yourElement=document.getElementById("yourElementId");
let easyOfd = new EasyOFD('myofdID', yourElement);
}
在html加载完成后，定义调用的功能函数，在这里我们定义load()函数。
EasyOFD展示工具类，只需要两个参数就可以完成页面渲染
参数一：是html内渲染后的唯一ID
参数二：是1.2定义的渲染div
到此页面展示如下：
加载完成后就可以选择打开按钮浏览本地的OFD文件。
提升：下文为从网络异步加载文件与样式优化
¶ 4 异步从网站获取文件
var oReq = new XMLHttpRequest();
oReq.open("GET", "/files/1.ofd", true); //文件获取路径
oReq.responseType = "arraybuffer";
oReq.onload = function (oEvent) {
var arrayBuffer = oReq.response;
var blob = new Blob([arrayBuffer]);
easyOfd.loadFromBlob(blob);
};
oReq.send();
此处使用原生的异步调用，在使用JQuery调用时会出现无法转换问题。
¶ 5 设置按钮样式
.OfdButton{
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
margin-right: 10px;
}
¶ 6 完整demo
完整的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script type="text/javascript">
function load(){
let yourElement=document.getElementById("yourElementId");
let easyOfd = new EasyOFD('myofdID', yourElement);
}
</script>
<style>
.OfdButton{
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
margin-right: 10px;
}
</style>
<body onload="load()" style="
margin: 0;">
<div id='yourElement'>
</div>
<body>
</body>
<script type="text/javascript" src="./lib/x2js.js"></script>
<script type="text/javascript" src="./lib/jszip.min.js"></script>
<script type="text/javascript" src="./lib/eaysjbig2.js"></script>
<script type="text/javascript" src="./lib/opentype.min.js"></script>
<script type="text/javascript" src="./EasyOFD.js"></script>
</html>