使用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 需要自己寫額外頁(yè)面樣式及按鈕，而直接在官網(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ù)覽測(cè)試
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
// 測(cè)試 pdf 有點(diǎn)大，第一次打開可能會(huì)有點(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)語(yǔ)言為簡(jiǎn)體中文
修改 public/static/pdf/web/viewer.js
3.3 打開 PDF 后默認(rèn)跳轉(zhuǎn)到某一頁(yè)
// 添加 #page=2 默認(rèn)跳轉(zhuǎn)到第二頁(yè)
window.open('static/pdf/web/viewer.html?file=' + fileUrl + '#page=2')
4 移除部分按鈕
4.1 簡(jiǎn)單按鈕移除
例：移除[打印]按鈕
4.2 復(fù)雜按鈕移除
例：移除[文本]按鈕，由于該按鈕點(diǎn)擊后會(huì)出現(xiàn)面板，所以除了移除當(dāng)前按鈕相關(guān)代碼外，還要移除面板相關(guān)代碼
5 錯(cuò)誤處理
5.1 跨域報(bào)錯(cuò)
注釋 public/static/pdf/web/viewer.js 代碼
5.2 默認(rèn)語(yǔ)言為簡(jiǎ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)容請(qǐng)搜索腳本之家以前的文章或繼續(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來(lái)預(yù)覽文件的操作步驟(本地文件測(cè)試)
- 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)文章
Vue3?watchEffect的使用教程和相關(guān)概念
Vue?3?引入了?Composition?API,其中?watchEffect?是一個(gè)非常強(qiáng)大的工具,用于響應(yīng)式地追蹤依賴項(xiàng)的變化,本文將詳細(xì)介紹?watchEffect?的使用方法和相關(guān)概念,文中有詳細(xì)的代碼供大家參考,需要的朋友可以參考下2024-08-08
vue2使用el-date-picker實(shí)現(xiàn)動(dòng)態(tài)日期范圍demo
這篇文章主要為大家介紹了vue2使用el-date-picker實(shí)現(xiàn)動(dòng)態(tài)日期范圍示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了詳解從Vue-router到html5的pushState，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
async和await作為異步函數(shù),語(yǔ)法很簡(jiǎn)單,就是在函數(shù)前面加上async 關(guān)鍵字,來(lái)表示它是異步的,下面這篇文章主要給大家介紹了如何通過(guò)一文教會(huì)你vue中使用async和await的相關(guān)資料,需要的朋友可以參考下2022-10-10
parcel-vue 一個(gè)基于Parcel打包工具的 VueJS急速開發(fā)腳手架解決方案,強(qiáng)烈建議使用node8.0以上。下面通過(guò)本文給大家介紹全新打包工具parcel零配置vue開發(fā)腳手架的相關(guān)知識(shí)，感興趣的朋友一起看看吧2018-01-01
vue實(shí)現(xiàn)移動(dòng)端懸浮窗效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端懸浮窗效果，vuejs實(shí)現(xiàn)div拖拽移動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
在vuex中有四大金剛分別是State， Mutations，Actions，Getters，本文對(duì)這四大金剛做了詳細(xì)介紹，本文重點(diǎn)是給大家介紹vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用，感興趣的朋友一起看看吧2018-04-04
關(guān)于Vue父子組件傳參和回調(diào)函數(shù)的使用
這篇文章主要介紹了關(guān)于Vue父子組件傳參和回調(diào)函數(shù)的使用,我們將某段代碼封裝成一個(gè)組件，而這個(gè)組件又在另一個(gè)組件中引入，而引入該封裝的組件的文件叫做父組件，被引入的組件叫做子組件,需要的朋友可以參考下2023-05-05
Vue3異步數(shù)據(jù)加載組件suspense的使用方法
前端開發(fā)中異步請(qǐng)求是非常常見的事情,比如遠(yuǎn)程讀取圖片,調(diào)用后端接口等等,這篇文章主要給大家介紹了關(guān)于Vue3異步數(shù)據(jù)加載組件suspense的使用方法,suspense中文含義是懸念的意思,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了如何在 Vue 中使用 JSX，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2021-02-02