进入正文
第一步-Clone
打开GitHub或者Gitee，那个有账号用哪个，因为要下载包。
ofd-github ofd-gitee
然后，将项目clone下来。
然后，然后就是常规操作了兄弟：
编辑器打开项目，下载项目依赖npm install
看package.json，运行项目应该是npm run serve，具体以实际的package.json中的script脚本为准。
如果能运行起来，那就说明OK，依赖下载什么的没得问题。
第二步-build
重要的步骤来了，package.json中有一行脚本：
"scripts": {
"lib": "vue-cli-service build --target lib --name ofd --dest lib ./src/utils/ofd/ofd.js"
}
没错，执行它npm run lib
脚本执行完成后，会自动在项目根目录下生成一个lib文件夹，里面是打包后ofd的js文件，以及一个demo.html。
打开demo.html我们会发现，其内容异常简单，有用的代码就一行，即：<script src="./ofd.umd.js"></script>，这告诉我们，如果我们要用ofd.js，那你就需要在你的html文件内引入ofd.umd.js文件。
OK，接下来就是写代码时间了。
第三步-集成
怎么集成？
首先，将打包后的lib文件夹，整个搬迁到我们的项目下。
在html文件中，引入ofd.umd.js 或者 ofd.umd.min.js
<script src="./lib/ofd/ofd.umd.min.js"></script>
然后，定义一个[type=file]Input来选择ofd文件，再定义一个容器，用来展示渲染的ofd文件
<body>
<input type="file" ref="file" class="hidden" accept=".ofd" onchange="fileChanged(event)" />
<div id="ofdContainer" style="width:100%;height:800px;"></div>
</body>
最后就是js了
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);
}
});
}
到此为止，原生js渲染ofd就完成了。
![洛谷P11183 [ROIR 2018 Day2] 大数据处理](https://img2024.cnblogs.com/blog/2028159/202411/2028159-20241114131810325-408758932.png)
