前言

vue2中預(yù)覽pdf的方法有pdf.js和vue-pdf等。下面進(jìn)行簡(jiǎn)單對(duì)比&使用方法的介紹。

正文

直接使用iframe預(yù)覽pdf

使用iframe預(yù)覽pdf
如果后端返回的不是url，那么需要使用responseType = 'blob'來讀取后端傳來的內(nèi)容。

擴(kuò)展：

• 同樣是使用iframe進(jìn)行預(yù)覽，如果有其他格式如word/xls/ppt/txt的文件需要預(yù)覽，可以使用微軟解析地址的url進(jìn)行預(yù)覽。
  注意：文件地址是公網(wǎng)可打開的；控制的只是src地址
  微軟解析地址：https://view.officeapps.live.com/op/view.aspx?src=你的文件地址
  參考：vue預(yù)覽 pdf、word、xls、ppt、txt文件方法
• 常見問題的解決
  參考：PDF預(yù)覽完整解決方案及各種兼容（VUE版）
  • 緩存問題：利用iframe打開pdf后，當(dāng)再次利用iframe打開另一個(gè)pdf時(shí)會(huì)顯示第一份pdf，原因是瀏覽器對(duì)url的緩存處理。
    解決辦法：給url加時(shí)間戳或隨機(jī)數(shù)，這樣就沒有緩存問題了。
    const fresh=new Date().getTime();//時(shí)間戳 this.url = this.url+'?'+ fresh; // 初始化查看pdf應(yīng)用地址
  • 使用base64url問題：有些pdf的url采用base64格式，直接將base64格式url放進(jìn)src中可能會(huì)報(bào)錯(cuò)導(dǎo)致顯示不了。原因是base64地址太長(zhǎng)，瀏覽器不支持。
    **解決辦法：**利用Blob轉(zhuǎn)base64url成文件路徑.
    css復(fù)制代碼 var bstr = window.atob(_this.baseUrl); //解碼 var n = bstr.length; var u8arr = new Uint8Array(n);

使用pdf.js+iframe預(yù)覽

相比起直接使用iframe預(yù)覽，功能更加強(qiáng)大，支持更多自定義的功能。
比如：

1. 自定義樣式：使用 PDF.js，你可以更靈活地自定義 PDF 文件的樣式。你可以修改文字的顏色、字體大小、行間距等，以滿足特定的需求。
2. 高級(jí)功能：PDF.js 提供了許多高級(jí)功能，例如縮放、旋轉(zhuǎn)、搜索、導(dǎo)航目錄等。這些功能在直接使用 iframe 時(shí)不可用。
3. 高級(jí)操作：使用 PDF.js，你可以實(shí)現(xiàn)更高級(jí)的操作，如添加注釋、書簽、水印等。這些操作在直接使用 iframe 時(shí)無法實(shí)現(xiàn)。
4. 兼容性：PDF.js 可以在大多數(shù)現(xiàn)代瀏覽器中正常工作，因此可以提供更好的兼容性，以確保用戶可以在各種設(shè)備和瀏覽器上正確顯示和操作 PDF 文件。
5. 定制性：PDF.js 是一個(gè)開源項(xiàng)目，可以根據(jù)項(xiàng)目需求進(jìn)行二次開發(fā)和定制。你可以根據(jù)具體需求修改源代碼，以滿足特定的業(yè)務(wù)需求。
   詳細(xì)|vue中使用PDF.js預(yù)覽文件實(shí)踐包括如何注釋代碼以解決跨域問題。

PDF.js使用總結(jié)包括一些api列舉。

擴(kuò)展

vue項(xiàng)目，npm install方式使用pdfjs 這里不是使用iframe的，而是直接渲染內(nèi)容，手動(dòng)寫翻頁的按鈕或其他功能。有完整代碼。
pdfjs-dist web預(yù)覽pdf文件, pdfjs-dist example 也是使用npm方式使用pdf.js的。包括對(duì)比vue-pdf的優(yōu)劣，和vue.config.js的配置，有完整代碼。

npm install方式使用pdf.js： 需根據(jù)需求自己寫樣式，實(shí)現(xiàn)相關(guān)功能。

以靜態(tài)資源方式使用（就是本文章前面的用法）： 將pdf下載到本地項(xiàng)目中，以靜態(tài)資源方式使用，通過 pdf.js 提供的 viewer.html
文件來展示服務(wù)器上的pdf文件，無須自己設(shè)置樣式（已有pdf.js的全套樣式和相關(guān)功能，不需要的地方可通過更改源碼等方式自行去掉）

vue-pdf

vue-pdf是基于pdfjs-dist插件的vue封裝。
PDF預(yù)覽完整解決方案及各種兼容（VUE版）可以參考的簡(jiǎn)略版的使用方法和常見問題解決。

vue-pdf 一個(gè)基于vue的pdf預(yù)覽插件(vue2.x)這個(gè)封裝了一個(gè)有分頁顯示功能的完整代碼，可以參考，整體使用的邏輯比較清晰。

擴(kuò)展

vue實(shí)戰(zhàn)–vue+elementUI實(shí)現(xiàn)多文件上傳+預(yù)覽（word/PDF/圖片/docx/doc/xlxs/txt） ；可以參考的封裝思路和功能，有完整代碼和圖示。預(yù)覽還是用的https://view.officeapps.live.com/op/view.aspx?src=${data}文章來源地址http://www.zghlxwxcb.cn/news/detail-700104.html

到了這里，關(guān)于【vue2中的pdf預(yù)覽】iframe/pdf.js/vue-pdf的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！