如果不了解pdf.js的使用方法请先了解https://www.jianshu.com/p/0e53b606ca4b
面试时有个需求是在前端网页展示pdf文件,根据参数跳转到指定页码,并定位
pdf修改版下载地址在底部
演示
1.打开pdf.js下的viewer.js文件
2.找到setInitialView
方法
3.修改setInitialView
方法
在setInitialView
方法最先面添加如下代码
//获取url
var c_url=window.location.href;
//获取参数
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;
}
//默认缩放比例
if(c_urlArray['zoom'])this.pdfViewer.currentScale=c_urlArray['zoom'];
//跳转至指定页码
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