PDF.js实现html页面读取pdf文件内容

项目中遇到要在HTML页面上读取PDF文档的内容，并显示在网页上。

pdf.js官网：pdf.js官网

本地附件：pdf.js

一.下载

1、下载至本地

2、创建PDF.js文件夹 并将刚解压的文件放入其中

二.将 PDF.js 文件夹 放到 项目服务器根目录下

小伙伴 可能会有点头晕 先跟着做 稍后解释

1.登录 项目服务器 

 

2.登录 服务器 后将 PDF.js 文件夹 拷贝 到 项目 服务器 的根目录

三. 使用 pdf.js 显示 pdf 文件

1.打开浏览器 新建一个 标签页 输入 你的项目服务器 地址

这里我用我的服务器 地址进行演示 10.0.0.5 

2.当 你访问 项目 服务器 根目录(10.0.0.5) 能够 看到 PDF.js 这个文件夹 说明 这一步已经完成了

3.在PDF.js 中 依次打开 web 文件夹 viewer.html 文件 (PDF.js/web/viewer.html)

4.随后会显示 截图上的 pdf 文件

5.在地址栏中 http://10.0.0.5/PDF.js/web/viewer.html?file=你的pdf地址

解释: 我这里显示的pdf文件 是服务器上本来 就有的测试文件 请看下图

如果 你的 地址栏 中 ? 后面 file = PDF地址  可以显示 pdf 那么 基本上成功了

四. 在项目中使用

 <iframe :src="http://10.0.0.5/PDF.js/web/viewer.html?file=PDF地址" width="100%" height="99%"></iframe>

问题：如果文件是远程服务器上的文件，会产生跨域，就会遇到如下错误

PDF.js v2.0.943 (build: dc98bf76)
信息：file origin does not match viewer's

控制台：Uncaught (in promise) Error: file origin does not match viewer's

如果需要加载远程服务器的pdf文件，远程服务器返回pdf文件流，然后在viewer.html的url后面添加file=http://127.0.0.1:8020/PDF/test,但是pdf.js不支持跨域请求，所以会报错：file origin does not match viewer’s，试了很多种方法仍然报错，所以简单粗暴的方法就是把viewer.js的判断远程地址的代码注释掉即可（1564~1566行）。

if (origin !== viewerOrigin && protocol !== 'blob:') {
        throw new Error('file origin does not match viewer\'s');
   }