快捷導(dǎo)航

使用Vue3+PDF.js實現(xiàn)PDF預(yù)覽功能

更新時間：2022年12月24日 10:25:02 作者：YanaDH

項目中有一個需要預(yù)覽下載pdf的需求,網(wǎng)上找了很久,決定使用 pdf.js 完成,下面這篇文章主要給大家介紹了關(guān)于使用Vue3+PDF.js實現(xiàn)PDF預(yù)覽功能的相關(guān)資料,需要的朋友可以參考下

1 前言

PDF.js 官網(wǎng)

本文使用的 PDF.js 版本為：v3.0.279

本文未使用 npm 形式在項目中引入 PDF.js 依賴，因為該形式引入的 PDF.js 需要自己寫額外頁面樣式及按鈕，而直接在官網(wǎng)下載可以使用 PDF.js 默認(rèn)提供的 viewer ，不用再增加額外代碼，即可實現(xiàn) PDF 預(yù)覽等功能

# 使用 npm 形式在項目中引入 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 有點大，第一次打開可能會有點慢，只要有進度條就是正常加載中
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 修改默認(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ù)雜按鈕移除

例：移除[文本]按鈕，由于該按鈕點擊后會出現(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實現(xiàn)PDF預(yù)覽功能的文章就介紹到這了,更多相關(guān)Vue3 PDF.js實現(xiàn)PDF預(yù)覽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频