使用Vue3+PDF.js實現PDF預覽功能
更新時間：2022年12月24日 10:25:02 作者：YanaDH
項目中有一個需要預覽下載pdf的需求,網上找了很久,決定使用 pdf.js 完成,下面這篇文章主要給大家介紹了關于使用Vue3+PDF.js實現PDF預覽功能的相關資料,需要的朋友可以參考下
1 前言
PDF.js 官網
本文使用的 PDF.js 版本為：v3.0.279
本文未使用 npm 形式在項目中引入 PDF.js 依賴，因為該形式引入的 PDF.js 需要自己寫額外頁面樣式及按鈕，而直接在官網下載可以使用 PDF.js 默認提供的 viewer ，不用再增加額外代碼，即可實現 PDF 預覽等功能
# 使用 npm 形式在項目中引入 PDF.js 依賴 npm i pdfjs-dist
效果預覽
2 PDF 預覽測試
2.1 下載 PDF.js
在 PDF.js 官網下載 PDF.js ，解壓后放到 public/static 下
2.2 window.open 直接打開
// 默認打開 public/static/pdf/web/compressed.tracemonkey-pldi-09.pdf
// 測試 pdf 有點大，第一次打開可能會有點慢，只要有進度條就是正常加載中
window.open('static/pdf/web/viewer.html')
// 傳入 pdf 文件地址
const fileUrl = 'xxx'
window.open('static/pdf/web/viewer.html?file=' + fileUrl)
2.3 彈框形式打開
<el-dialog v-model="dialogVisible">
<iframe :src="'static/pdf/web/viewer.html?file=' + fileUrl"
style="width: 100%; height: 440px"
></iframe>
</el-dialog>
3 修改配置項
3.1 修改主題色為暗色系
修改 public/static/pdf/web/viewer.js
AUTOMATIC: 0, // 跟隨瀏覽器 LIGHT: 1, // 亮色 DARK: 2 // 暗色
3.2 修改默認語言為簡體中文
修改 public/static/pdf/web/viewer.js
3.3 打開 PDF 后默認跳轉到某一頁
// 添加 #page=2 默認跳轉到第二頁
window.open('static/pdf/web/viewer.html?file=' + fileUrl + '#page=2')
4 移除部分按鈕
4.1 簡單按鈕移除
例：移除[打印]按鈕
4.2 復雜按鈕移除
例：移除[文本]按鈕，由于該按鈕點擊后會出現面板，所以除了移除當前按鈕相關代碼外，還要移除面板相關代碼
5 錯誤處理
5.1 跨域報錯
注釋 public/static/pdf/web/viewer.js 代碼
5.2 默認語言為簡體中文，但下載按鈕仍顯示為“Save”
修改 public/static/pdf/web/viewer.html 第159、276行代碼
總結
到此這篇關于使用Vue3+PDF.js實現PDF預覽功能的文章就介紹到這了,更多相關Vue3 PDF.js實現PDF預覽內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
在Vue應用程序中，表格是一個非常常見的組件，在這篇文章中，我們將介紹如何在Vue中進行表格的合并和拆分，感興趣的小伙伴可以了解一下2023-06-06
本文主要介紹了Vue實現動態(tài)路由導航的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
這篇文章主要為大家介紹了Vue編譯器AST抽象語法樹源碼分析詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了vue elementui form表單驗證的實現,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要為大家介紹了vue3的二維碼組件vue3-next-qrcode示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-09-09
本篇文章主要介紹了vue.js數據綁定的方法（單向、雙向和一次性綁定），具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要為大家詳細介紹了Vue.js 合bootstrap實現分頁控件的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
Vue 應用在首屏加載時速度過慢,通常與以下問題有關：打包文件過大、網絡請求過多、資源加載過慢,針對這些問題,本文給大家介紹了Vue首屏加載過慢的優(yōu)化方法,需要的朋友可以參考下2025-01-01
下面小編就為大家分享一篇Vue2.0 給Tab標簽頁和頁面切換過渡添加樣式的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue如何對一個數據過濾出想要的item問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10