當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

原生js预览ofd文件

發布時間：2023/12/20 编程问答 56 豆豆

生活随笔收集整理的這篇文章主要介紹了原生js预览ofd文件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

我從網上看了好多文章，基本都是互抄的，但是，也給了我一個入門的提示，最起碼知道ofd的基本用法。

如果是vue中集成ofd預覽，那就沒啥說的，網上的方法大概率就可以，直接集成git倉庫中的utils文件即可。

那要是使用原生js集成呢？直接把Utils搬過來？保準不行。

有人說使用ofd.js的cdn，直接引入即可，好家伙，還是報錯。

接下來，經過親身實踐，我來給各位提供一個可行的原生js預覽ofd文件的方法.

仔細想想，如果原生js都能預覽了，那距離到使用vue這種框架中集成還遠嗎？vue中不會使用原生js的包？不會吧不會吧！

打開GitHub或者Gitee，那個有賬號用哪個，因為要下載包。

ofd-github ofd-gitee

然后，將項目clone下來。

然后，然后就是常規操作了兄弟：

如果能運行起來，那就說明OK，依賴下載什么的沒得問題。

重要的步驟來了，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就完成了。

有些時候網上給出的某些函數的用法，可能會與我們再實際使用的時候有些沖突，遇到那個函數不會用，直接去ofd.umd.js中去搜索對應的函數名，看看用法即可。

以上是生活随笔為你收集整理的原生js预览ofd文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。