使用Vue3+PDF.js實(shí)現(xiàn)PDF預(yù)覽功能
1 前言
PDF.js 官網(wǎng)
本文使用的 PDF.js 版本為：v3.0.279
本文未使用 npm 形式在項(xiàng)目中引入 PDF.js 依賴，因?yàn)樵撔问揭氲?PDF.js 需要自己寫額外頁面樣式及按鈕，而直接在官網(wǎng)下載可以使用 PDF.js 默認(rèn)提供的 viewer ，不用再增加額外代碼，即可實(shí)現(xiàn) PDF 預(yù)覽等功能
# 使用 npm 形式在項(xiàng)目中引入 PDF.js 依賴 npm i pdfjs-dist
效果預(yù)覽
2 PDF 預(yù)覽測試
2.1 下載 PDF.js
在 PDF.js 官網(wǎng)下載 PDF.js ，解壓后放到 public/static 下
2.2 window.open 直接打開
// 默認(rèn)打開 public/static/pdf/web/compressed.tracemonkey-pldi-09.pdf
// 測試 pdf 有點(diǎn)大，第一次打開可能會有點(diǎn)慢，只要有進(jìn)度條就是正常加載中
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 修改配置項(xiàng)
3.1 修改主題色為暗色系
修改 public/static/pdf/web/viewer.js
AUTOMATIC: 0, // 跟隨瀏覽器 LIGHT: 1, // 亮色 DARK: 2 // 暗色
3.2 修改默認(rèn)語言為簡體中文
修改 public/static/pdf/web/viewer.js
3.3 打開 PDF 后默認(rèn)跳轉(zhuǎn)到某一頁
// 添加 #page=2 默認(rèn)跳轉(zhuǎn)到第二頁
window.open('static/pdf/web/viewer.html?file=' + fileUrl + '#page=2')
4 移除部分按鈕
4.1 簡單按鈕移除
例：移除[打印]按鈕
4.2 復(fù)雜按鈕移除
例：移除[文本]按鈕，由于該按鈕點(diǎn)擊后會出現(xiàn)面板，所以除了移除當(dāng)前按鈕相關(guān)代碼外，還要移除面板相關(guān)代碼
5 錯誤處理
5.1 跨域報錯
注釋 public/static/pdf/web/viewer.js 代碼
5.2 默認(rèn)語言為簡體中文，但下載按鈕仍顯示為“Save”
修改 public/static/pdf/web/viewer.html 第159、276行代碼
總結(jié)
到此這篇關(guān)于使用Vue3+PDF.js實(shí)現(xiàn)PDF預(yù)覽功能的文章就介紹到這了,更多相關(guān)Vue3 PDF.js實(shí)現(xiàn)PDF預(yù)覽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- vue實(shí)現(xiàn)在線預(yù)覽pdf文件和下載（pdf.js）
- vue使用pdf.js預(yù)覽pdf文件的方法
- vue插件開發(fā)之使用pdf.js實(shí)現(xiàn)手機(jī)端在線預(yù)覽pdf文檔的方法
- Vue實(shí)現(xiàn)在線預(yù)覽pdf文件功能（利用pdf.js/iframe/embed）
- vue3使用pdf.js來預(yù)覽文件的操作步驟(本地文件測試)
- Vue 集成 PDF.js 實(shí)現(xiàn) PDF 預(yù)覽和添加水印的步驟
- Vue使用PDF.js實(shí)現(xiàn)瀏覽pdf文件功能
- Vue中使用pdf.js實(shí)現(xiàn)PDF文檔展示功能實(shí)例
相關(guān)文章
vue-router判斷頁面未登錄自動跳轉(zhuǎn)到登錄頁的方法示例
這篇文章主要介紹了vue-router判斷頁面未登錄自動跳轉(zhuǎn)到登錄頁的方法示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了vue使用el-select下拉框匹配不到值的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了vue中如何初始化data數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
resetFields 對整個表單進(jìn)行重置,將所有字段值重置為空并移除校驗(yàn)結(jié)果,下面這篇文章主要給大家介紹了關(guān)于vue中resetFields重置初始值不生效的原因的相關(guān)資料,需要的朋友可以參考下2023-03-03
mui-player自定義底部導(dǎo)航在vue項(xiàng)目中顯示不出來的解決
這篇文章主要介紹了mui-player自定義底部導(dǎo)航在vue項(xiàng)目中顯示不出來的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了在nuxt中使用路由重定向的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue.js開發(fā)實(shí)現(xiàn)全局調(diào)用的MessageBox組件實(shí)例代碼
最近學(xué)習(xí)了Vue.js，感覺組件這個地方知識點(diǎn)挺多的，而且很重要，所以決定記錄下，下面這篇文章主要給大家介紹了關(guān)于利用vue.js開發(fā)實(shí)現(xiàn)全局調(diào)用的MessageBox組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-11-11
這篇文章主要為大家詳細(xì)介紹了vue+echarts封裝氣泡圖的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了加速vue組件渲染之性能優(yōu)化，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了vue如何監(jiān)聽el-select選擇值的變化，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04