如果不了解pdf.js的使用方法請先了解http://www.reibang.com/p/0e53b606ca4b
面試時有個需求是在前端網(wǎng)頁展示pdf文件，根據(jù)參數(shù)跳轉(zhuǎn)到指定頁碼,并定位
pdf修改版下載地址在底部
演示
1.gif
1.打開pdf.js下的viewer.js文件
image.png
2.找到setInitialView方法
image.png
3.修改setInitialView方法
在setInitialView方法最先面添加如下代碼
//獲取url
var c_url=window.location.href;
//獲取參數(shù)
if(c_url.indexOf("&")&&c_url.indexOf("=")){
var c_urlArray={}
var c_val=c_url.split('?')[1];
var c_valArray=c_val.split('&');
for(let i=0;i<c_valArray.length;i++){
let c_key=c_valArray[i].split('=')[0];
let c_value=c_valArray[i].split('=')[1];
c_urlArray[c_key]=c_value;
}
//默認(rèn)縮放比例
if(c_urlArray['zoom'])this.pdfViewer.currentScale=c_urlArray['zoom'];
//跳轉(zhuǎn)至指定頁碼
if(c_urlArray['page'])document.getElementById('pageNumber').value = this.pdfViewer.currentPageNumber = c_urlArray['page']*1;
//頁面位置定位
if(c_urlArray['top'])document.getElementById('viewerContainer').scrollTop=document.getElementById('viewerContainer').scrollTop+c_urlArray['top']*1;
4.傳參使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<iframe style="width: 100%;height: 800px;" src="http://192.168.1.146:3737/js/PDF.js/web/viewer.html?file=http://192.168.1.146:3737/src/Nginx.pdf&page=12&top=150&zoom=1.5"></iframe>
</body>
</html>
已修改源碼地址鏈接: https://pan.baidu.com/s/1TSYSGdhTdFZNxYKhlcdTLw 提取碼: 5we3
