关于PDF.js使用

PDF.js使用方法

一. 到官网下载 pdf.js 插件并解压 (地址:http://mozilla.github.io/pdf.js/ )

二: 选择稳定版 下载

三: 下载至本地

四 :解压， 创建PDF.js文件夹 并将刚解压的文件放入其中；

五.将 PDF.js 文件夹 上传到项目服务器根目录下

六. 使用 pdf.js 显示 pdf 文件
1.打开浏览器 新建一个 标签页 输入 你的项目服务器 地址
这里我用我的服务器 地址进行演示203.195.129.113

2.在PDF.js 中 依次打开 web 文件夹 viewer.html 文件 (PDF.js/web/viewer.html)
随后会显示 截图上的 pdf 文件

**3.在地址栏中 http://你的服务器地址/PDF.js/web/viewer.html?file=你的pdf地址
**
解释: 我这里显示的pdf文件 是服务器上本来 就有的测试文件

七，在项目中使用

关于使用，我们新建一个工程，加入打包后的pdf.js文件，新建一个页面，直接引用就可以。

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

‘file=’ 这个为连接模板页面和我们需要嵌入的pdf源文件的url。

<iframe src="http://www.xdocin.com/xdoc?_func=to&amp;_format=html&amp;_cache=1&amp;_xdoc=PDF地址" width="100%" height="99%"></iframe> 

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

八：跨域问题的解决

1. 在viewer.js文件中注释掉一下代码：
   这段代码就是判断是否跨域的

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

2. 需要服务端去解决，需要服务端做允许跨域的设置。
3. 其次：服务端给出的是pdf为下载地址的嵌入问题：
   调用的时候,用iframe嵌套一下。

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

以上就是PDF.js的使用方式