簡單的實(shí)現(xiàn)方式
如果只是電腦端，可通過 iframe 標(biāo)簽嵌套預(yù)覽
ios手機(jī)端可通過 a 標(biāo)簽包裹點(diǎn)擊跳轉(zhuǎn)預(yù)覽（安卓端不行）
安卓電腦ios的通用方法
資料
老版本github地址
全版本地址
獲取當(dāng)前客戶端類型
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
}
正式開始
下載及安裝pdf.js插件
前往官方地址下載插件包 http://mozilla.github.io/pdf.js/
此鏈接可下載最新版本，不兼容老版本瀏覽器和蘋果系統(tǒng)，若需在蘋果展示則使用最上面老版本系統(tǒng)，或者下載右邊的舊版瀏覽器版本（沒有嘗試過）
引入項(xiàng)目
在public文件夾下新建pdfjs文件夾，將解壓后的文件放進(jìn)去
解壓后的
放到項(xiàng)目中
使用
第一種方法（文件鏈接或者靜態(tài)文件）
- 解決跨域問題
先解決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ù)為文件鏈接，前端帶參文件鏈接請求接口后，接口返回此文件鏈接的blob形式的文件流。）
3、獲取到blob形式的pdf文件后，添加到iframe中，完成
解決mac OS 的safari瀏覽器不兼容的問題
方法一
直接使用老版本，我測試使用老版本對(duì)項(xiàng)目暫無任何影響
方法二（使用老版本的pdfjs即可，這個(gè)方法概率性出現(xiàn)pdf按鈕不顯示的問題）
老版本和新版本同時(shí)引入，當(dāng)請求頁面是判斷當(dāng)前客戶端類型，若是ios則使用老版本的pdf.js文件
最笨的代碼示例
client是文章開頭的方法獲取的客戶端類型文章來源：http://www.zghlxwxcb.cn/news/detail-501109.html
<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文章來源地址http://www.zghlxwxcb.cn/news/detail-501109.html
到了這里，關(guān)于使用pdf.js展示pdf文件(親測可用)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
