[js學(xué)習(xí)筆記](méi)PDF.js專題

pdj.js查看pdf格式文件內(nèi)容顯示不全

pdf.js

vue項(xiàng)目中使用pdf.js預(yù)覽pdf文件

一、在vue中使用pdf.js，查看pdf文件。

PDF.js是一個(gè)由HTML5建立的PDF閱讀器。依托開源社區(qū)驅(qū)動(dòng)和Mozilla實(shí)驗(yàn)室的技術(shù)支持。目標(biāo)是建立一個(gè)通用的，基于web的解析和渲染PDF文件的平臺(tái)

//pdf.js文件存放位置
放在static文件目錄

//pdf.js修改
1.修改viewer.js文件中的pdf路徑參數(shù)：
var DEFAULT_URL = '';
//參考url路徑：http://xxxx/PDFJSInNet/web/viewer.html?file=09.pdf
如果pdf文件與viewer.html不在一層目錄中，改成相對(duì)路徑即可:
var DEFAULT_URL = ' ../doc/ 09.pdf';

2.viewer.html中增加meta
<meta http-equiv="Content-Type" content="text/html" charset="gb2312" > 
< meta  http-equiv ="X-UA-Compatible"  content ="IE=edge"  charset ="utf-8"  />

//當(dāng)前頁(yè)面：
<iframe :src="pSrc" frameborder="0" width="100%" height="810"></iframe>
// 當(dāng)前頁(yè)面js:
//baseurl ：pdf存放的文件路徑，可以是本地的，也可以是遠(yuǎn)程
let baseurl = '/excel/g2.pdf';
//ie有緩存加個(gè)隨機(jī)數(shù)解決 + '?r=' + new Date()
let pSrc = baseurl + '?r=' + new Date();
this.pSrc = '/pdf/web/viewer.html?file=' + encodeURIComponent(pSrc);