⑴ vue與pdf.js實現預覽PDF
在 Vue 項目中，為了實現PDF預覽，我們需要藉助PDF.js庫。首先，確保在項目`src/static`文件夾下有一個下載的PDF.js庫，包含`build`和`web`子文件夾。其中，`web`文件夾中的`viewer.html`是預覽的核心文件。
啟動項目時，使用VSCode的Live Server服務，通過瀏覽器訪問`viewer.html`，預覽的PDF文件默認鏈接為`compressed.tracemonkey-pldi-09.pdf`。查看`viewer.js`中的代碼，特別是4242行的`defaultUrl`配置，它指示了PDF文件的路徑參數，通常通過`file`參數傳遞。
核心預覽代碼示例如下：
`../../..`表示從當前iframe文件的位置向上兩層，`baseUrl`根據`vue.config.js`中的`publicPath`設置，通常指向`ApprControlWeb`。`encodeURIComponent(previewUrl)`用於編碼後端提供的PDF下載API的URL。
打包時，確保`static`文件夾被包含在`ApprControlWeb`包中，可以使用`-webpack-plugin`插件。在`vue.config.js`中配置後，運行`npm run build`，靜態資源將被正確地打包。
另一種解決方案是直接將PDF.js包部署到項目`public`目錄下，這可以避免訪問靜態資源時的跳轉問題。在Nginx部署項目時，此方法更為便捷，且示例代碼如下圖所示：
[]
項目的PDF預覽功能通過這些步驟實現，確保`publicPath`和靜態資源的正確處理，你的項目就能成功預覽PDF了。
⑵ Vue3 實現PDF預覽功能（pdf.js）
實現PDF預覽功能，具體步驟如下：
首先，前往官網下載pdf.js。
隨後，解壓下載的文件，並將解壓後的文件放置在public/static目錄下。
接著，利用window.open方法直接打開PDF文件。
也可採用彈框形式打開PDF預覽。
若在打開過程中遇到跨域報錯，需注釋public/static/pdf/web/viewer.js中的相關代碼。
之後，對配置項進行修改，以實現特定功能。
具體包括：
（1）調整主題色，將其設置為暗色系，以適應不同用戶的閱讀習慣。
(2) 設置PDF文件打開後的默認頁面，方便用戶快速定位至所需閱讀內容。