介绍了如何使用pdf.js插件实现跨域展示PDF文件，包括下载安装插件、使用iframe嵌入PDF、通过blob形式加载PDF、自定义配置翻页缩放等功能，以及解决部署线上展示问题和利用Storage传值的拓展方法。

image

pdf.js跨域使用

下载及安装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)

​​

效果图

​
​​