應(yīng)各位博友要求已經(jīng)取消付費(fèi) 2022.3.20

項(xiàng)目中 顯示 pdf 的功能,瀏覽過不少的技術(shù)帖,都不太理想,花了點(diǎn)時(shí)間研究了下pdf.js正確使用方法,總結(jié)下:1.防止自己忘記 2.工作留有痕跡 3.供大家參考借鑒

pdf.js: 將 PDF 文件解析后生成一張 .png 圖片,利用 canvas 元素顯示在頁面上,此方法不推薦使用, 呈現(xiàn)在頁面上的pdf會模糊,目前沒有找到有效解決辦法,給愛鉆研的小伙伴提供個(gè)思路,在pdf.js官網(wǎng)上有這樣一句話 :Each?PDF?page has its own viewport which defines the size in pixels(72DPI) and initial rotation. 猜想如果可以改變默認(rèn)72DPI就可改變呈現(xiàn)的清晰度

上面是最開始探索 pdf.js 使用的方法 時(shí) 的猜想 其實(shí)?pdf.js?真正使用方法非常簡單 (一行代碼就可以搞定)

pdf.js使用步驟

一. 到官網(wǎng)下載 pdf.js 插件并解壓? (地址:?PDF.js?)

1: 進(jìn)入官網(wǎng)

?2 : 選擇穩(wěn)定版 下載

3: 下載至本地?

4 : 解壓?

5:創(chuàng)建PDF.js文件夾 并將剛解壓的文件放入其中

二.將 PDF.js 文件夾 放到 項(xiàng)目服務(wù)器根目錄下

小伙伴 可能會有點(diǎn)頭暈 先跟著做 稍后解釋

1.登錄 項(xiàng)目服務(wù)器?

2.登錄 服務(wù)器 后將 PDF.js 文件夾 拷貝 到 項(xiàng)目 服務(wù)器 的根目錄

三. 使用 pdf.js 顯示 pdf 文件

1.打開瀏覽器 新建一個(gè) 標(biāo)簽頁 輸入 你的項(xiàng)目服務(wù)器 地址

這里我用我的服務(wù)器 地址進(jìn)行演示?10.0.0.5?

2.當(dāng) 你訪問 項(xiàng)目 服務(wù)器 根目錄(10.0.0.5)?能夠 看到 PDF.js 這個(gè)文件夾 說明 這一步已經(jīng)完成了

3.在PDF.js 中 依次打開 web 文件夾 viewer.html 文件 (PDF.js/web/viewer.html)

4.隨后會顯示 截圖上的 pdf 文件

5.在地址欄中?http://10.0.0.5/PDF.js/web/viewer.html?file=你的pdf地址

解釋: 我這里顯示的pdf文件 是服務(wù)器上本來 就有的測試文件 請看下圖

如果 你的 地址欄 中 ? 后面 file = PDF地址? 可以顯示 pdf 那么 基本上成功了

四. 在項(xiàng)目中使用

<iframe :src="http://10.0.0.5/PDF.js/web/viewer.html?file=PDF地址" width="100%" height="99%"></iframe>

開篇 說一行代碼就可以搞定 沒有騙你吧

到這里 PDF.js 的使用講述完了

---

下面提供的下 我的github 上的pdf.js 使用方法?
點(diǎn)我下載PDFViewer;

使用方法都在 README.md 文件中

如果不了解gitHub的同學(xué)請往下看:

點(diǎn)我下載會跳到這個(gè)頁面

? ? 2.點(diǎn)擊頁面上綠色按鈕 clone or download

? ? 3.剩下的步驟 按照 readme.md 做就可以了

創(chuàng)建一個(gè)交流群(QQ)

群名稱：PDF.js

群???號：754891076

總結(jié)

以上是生活随笔為你收集整理的pdf.js使用方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。