腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

如何使用pdf.js展示pdf文件(親測(cè)可用)

更新時(shí)間：2023年10月14日 10:17:34 作者：你鄰座的怪同學(xué)

這篇文章主要介紹了如何使用pdf.js展示pdf文件(親測(cè)可用),如果只是電腦端,可通過(guò) iframe 標(biāo)簽嵌套預(yù)覽,文中介紹了安裝電腦ios的通用方法,感興趣的朋友跟隨小編一起看看吧

簡(jiǎn)單的實(shí)現(xiàn)方式

如果只是電腦端，可通過(guò) iframe 標(biāo)簽嵌套預(yù)覽
ios手機(jī)端可通過(guò) a 標(biāo)簽包裹點(diǎn)擊跳轉(zhuǎn)預(yù)覽（安卓端不行）

安卓電腦ios的通用方法

資料

老版本github地址

全版本地址

獲取當(dāng)前客戶(hù)端類(lèi)型

	judgeClient() {
      let client = ''
      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { // 判斷iPhone|iPad|iPod|iOS
        client = 'iOS'
      } else if (/(Android)/i.test(navigator.userAgent)) { // 判斷Android
        client = 'Android'
      } else {
        client = 'PC'
      }
      return client
    }

正式開(kāi)始

下載及安裝pdf.js插件

前往官方地址下載插件包 http://mozilla.github.io/pdf.js/
此鏈接可下載最新版本，不兼容老版本瀏覽器和蘋(píng)果系統(tǒng)，若需在蘋(píng)果展示則使用最上面老版本系統(tǒng)，或者下載右邊的舊版瀏覽器版本（沒(méi)有嘗試過(guò)）

在這里插入圖片描述

引入項(xiàng)目

在public文件夾下新建pdfjs文件夾，將解壓后的文件放進(jìn)去

解壓后的

在這里插入圖片描述

放到項(xiàng)目中

在這里插入圖片描述

使用

第一種方法（文件鏈接或者靜態(tài)文件）

解決跨域問(wèn)題

先解決pdfjs自帶的跨域攔截：
新版本
找到/web/viewer.js，搜索 fileOrigin，并注釋以下代碼段

在這里插入圖片描述

老版本
找到/web/viewer.js，搜索 if (origin !== viewerOrigin && protocol !== “blob:”) {，并注釋以下代碼段

在這里插入圖片描述

使用iframe嵌入即可

file后攜帶需要展示的pdf鏈接
<iframe src="pdfjs/web/viewer.html?file=http://xxxx/file/xxxx.pdf" width="500" height="500"></iframe>

注意：
要展示的pdf必須和psf.js文件在同一個(gè)域名或者ip下

第二種方法

1、先創(chuàng)建個(gè)iframe標(biāo)簽，給定一個(gè)id

在這里插入圖片描述

2、從后端獲取blob形式的pdf文件，具體怎么獲取和后端商定（思路，后端提供一個(gè)接口，參數(shù)為文件鏈接，前端帶參文件鏈接請(qǐng)求接口后，接口返回此文件鏈接的blob形式的文件流。）

在這里插入圖片描述

3、獲取到blob形式的pdf文件后，添加到iframe中，完成

在這里插入圖片描述

解決mac OS 的safari瀏覽器不兼容的問(wèn)題

方法一

直接使用老版本，我測(cè)試使用老版本對(duì)項(xiàng)目暫無(wú)任何影響

方法二（使用老版本的pdfjs即可，這個(gè)方法概率性出現(xiàn)pdf按鈕不顯示的問(wèn)題）

老版本和新版本同時(shí)引入，當(dāng)請(qǐng)求頁(yè)面是判斷當(dāng)前客戶(hù)端類(lèi)型，若是ios則使用老版本的pdf.js文件

在這里插入圖片描述

最笨的代碼示例

client是文章開(kāi)頭的方法獲取的客戶(hù)端類(lèi)型

	<iframe
          v-if="item.url && item.url.split('.').pop().toLowerCase() === 'pdf' && client !== 'iOS'"
          :src="'pdfjs/new/web/viewer.html?file=' + item.url"
          allow="fullscreen"
          align="center"
          name="ifd"
          width="100%"
          scrolling="no"
          frameborder="0"
          type="application/pdf"
          height="700"/>
        <iframe
          v-else-if="item.url && item.url.split('.').pop().toLowerCase() === 'pdf' && client === 'iOS'"
          :src="'pdfjs/old/web/viewer.html?file=' + item.url"
          allow="fullscreen"
          align="center"
          name="ifd"
          width="100%"
          scrolling="no"
          frameborder="0"
          type="application/pdf"
          height="700"/>

參考文章

https://www.cnblogs.com/huihuihero/p/16892882.html

到此這篇關(guān)于使用pdf.js展示pdf文件(親測(cè)可用)的文章就介紹到這了,更多相關(guān)pdf.js展示pdf文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: