PDF.js —— vue项目中使用pdf.js显示pdf文件（流）

前言：项目中有一个需要预览下载pdf的需求，网上找了很久，决定使用 pdf.js 完成。

第一步： 首先肯定是导入插件，我是从官网直接下载，链接：点击打开链接，注意需要放在static文件目录下

注意：这里面有核心的pdf.js和pdf.worker.js,以及展示pdf的viewer页面把它作为静态资源来编译，基本想要的build和web这两个重要文件夹的东西都正常编译。当然你可以可以npm install一下，整个文件放在static目录下的不好地方就是打包会很大哟，但是比较方便。
 

第二步：使用pdf.js（即通过 iframe 标签或 window.open() 方法打开 web/viewer.html）

注意：我们这样要显示的是服务器的pdf或者文件流（主要是文件流）

1. 通过 iframe 嵌套打开pdf（src='/static/pdf/web/viewer.html?file=' + 服务器 pdf 文件地址）  ==>> 文件形式

2. 通过 window.open() 打开服务器返回的文件流     ==>> 我使用的

encodeURI() 把字符串编码为 URI     ==>> 不会对:/?&等uri中起分割作用的字符进行编码；
encodeURIComponent() 把字符串编码为 URI 组件

 

注意：

1.  pdf.js是不支持跨域文件加载的  直接加载是不会成功的。会报  “file origin doesnot match viewer”错误。 所以我们得改变一下源码：   ==>> 注销 viewer.js 的1565行即可

==>>  可搜索 ：throw new Error('file origin does not match viewer\'s');

2. 主要实现方法：将文件地址或文件流 传入到  web/viewer.html 这个文件中

 

参考博客：https://blog.csdn.net/shentibeitaokong/article/details/80011900  ==>> 很详细

                  https://blog.csdn.net/xinlingdexueba/article/details/79555678     ==>> 简洁明了

                  https://www.jianshu.com/p/242525315bf6   ===>> 报错情况

 

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！

对博客文章的参考，若原文章博主介意，请联系删除！请原谅