進入正文
第一步-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就完成了。