使用pdf.js插件实现页面内渲染pdf，解决跨域问题，以及指定pdf插件内配置如跳转对应页面，更改缩放比例等
下载及安装pdf.js插件
【下载】前往官方地址下载插件包 http://mozilla.github.io/pdf.js/
注：不建议使用npm或yarn的形式安装pdf.js的依赖包，因为我们很多定制化的需求需要改源码
【安装】在public文件夹下新建pdfjs文件夹，将解压后的文件放进去
使用pdf.js插件
【使用】第一种方法
1、先解决pdfjs自带的跨域拦截：找到public/pdfjs/web/viewer.js，搜索 fileOrigin，并注释以下代码段
2、使用iframe嵌入即可
file后携带需要展示的pdf链接
<iframe src="pdfjs/web/viewer.html?file=https://xxxx/file/xxxx.pdf" width="500" height="500"></iframe>
【使用】第二种方法（灵活性高，推荐）
1、先创建个iframe标签，给定一个id
2、从后端获取blob形式的pdf文件，具体怎么获取和后端商定（思路，后端提供一个接口，参数为文件链接，前端带参文件链接请求接口后，接口返回此文件链接的blob形式的文件流。）
3、获取到blob形式的pdf文件后，添加到iframe中，完成
pdfjs的拓展
【拓展】如何指定iframe的翻页，缩放等配置（思路，通过在pdf链接后面带参，然后在viewer.js识别pdf链接后面的参数，从而达到配置的目的）
1、找到public/pdfjs/web/viewer.js，搜索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;
}
}
2、在pdf链接后面带对应参数即可
【拓展】如何解决部署到线上后，iframe里不展示pdf反而展示网站本身的问题
部署到线上时，调整一下路径，在前面加个/
【拓展】通过Storage传值
可以测试pdfjs和当前页面的storage是否是想通的，如果想通则可以通过storage传值，以这个思路实现一些功能
【拓展】pdfjs的页码改变事件，注意页码需要使用number类型
在web/viewer.js里搜索 setPageNumber(pageNumber)
setPageNumber(pageNumber) {
this.pageNumber = pageNumber;
if(sessionStorage.getItem("pdfLock")=="lock"){
sessionStorage.setItem("pdfLock","unlock")
sessionStorage.setItem("pdfjsPage", 0)
}else{
sessionStorage.setItem("pdfjsPage",this.pageNumber)
}
this.#updateUIState();
}
效果图
解决mac OS 的safari浏览器不兼容的问题（使用老版本的pdfjs即可）
【思路】项目中引入两个版本的pdfjs；
判断用户系统是不是mac OS，是的话使用老版本pdfjs，不是的话使用新版本pdfjs
因为老版本的兼容mac OS safari，新版本不兼容
两个版本的下载地址：https://files.cnblogs.com/files/huihuihero/pdfjs%E6%8F%92%E4%BB%B6%E5%8C%85.zip
