pdf.js插件的使用

  pdf.js这个插件比较厉害，可以实现很多功能，搜索pdf中的文字，跳转到指定页面等等。
  这个插件是比较重量级的，pc端使用的比较多，但是我们项目的需求是要集成到移动端，下面是简单集成。
 先去网上下载别人打包后的pdf.js的代码。

 

这个是打包后的pdf.js包，build里面是核心的pdf.js等文件，web文件夹是给出的例子，一个使用了pdf.js写的一个页面，包含了各种功能。其中viewer.html这个文件就是我们需要的母版的页面。
关于使用，我们新建一个工程，加入打包后的pdf.js文件，新建一个index.html页面，直接引用就可以。

  <a href="/PDFJSDemo/PDFJS/pdfjs/web/viewer.html?file=http://***.pdf" target="_blank">test</a>

 /PDFJSDemo/PDFJS/pdfjs/web/viewer.html?file=http://***.pdf 

这个为我们打开pdf文件的url。
‘/PDFJSDemo/PDFJS/pdfjs/web/viewer.html ’这一段为服务器上面放置的母版的html页面的url路径。
‘file=’ 这个为连接模板页面和我们需要嵌入的pdf源文件的url。
http://***.pdf 这个就是我们需要展示的pdf文件路径了。

 

‘file=’ 这个之前的url为模版html的url，之后为pdf文件的url，这样就可以了。

问题：这个如果是本地的pdf文件，包内的pdf，或者为域名相同的两个url，一般不会有什么问题，但是如果域名不同则需要解决跨域的问题。

首先：跨域问题的解决

在viewer.js文件中注释掉一下代码：

1 这短代码就是判断是否跨域的

  //var fileOrigin = new URL(file, window.location.href).origin;
     // if (fileOrigin !== viewerOrigin) {
     //   throw new Error('file origin does not match viewer\'s');
     // }

 

2 需要服务端去解决，需要服务端做允许跨域的设置。
（这里还有其他网友给出的解决方案，让服务端返回文件流，这里笔者没有试这一种方式）

 

其次：服务端给出的是pdf为下载地址的嵌入问题：
调用的时候,用iframe嵌套一下。

url = 'http://www.***/**.pdf';
//url = encodeURIComponent(url);
 xxx.html('<iframe src="pdfreview/web/gzjl.html?file='+url+'" width="100%" height="100%"></iframe>');

然后：分段下载的问题：
如果pdf文件比较大，可能会被要求边预览边下载，这个的话默认是支持的，但是一定要需要服务端也支持才可以。

 

 

 

 

 

如果是相同的域名，处理本地文件，则直接展示的就是边预览边下载的样子。

 

这里被笔者作出了修改，因为移动端不支持打印和下载，所以被我隐藏了，另外还有搜索功能没有被放开。这个的话，因为安卓不支持pdf文件的预览，pdf.js是非常强大的，使用它的话不需要下载移动端的wps等工具就可以查看pdf文件了。

作者：revivefsd
链接：https://www.jianshu.com/p/d4ec8808f41d
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。