前端在线预览PDF文件

如何在vue项目中预览PDF格式的文件

需求：在vue3.x项目中预览pdf文件
提供以下三种方案：
1.Vue-pdf：适用于vue2.x版本，vue3.x需要改一些源码(vue2.x项目极力推荐，vue3.x需要斟酌)
2.Pdf.js：该插件推荐通过其中提供的viewer.html直接展示，优点，使用较简单
3.pdf-dist：pdf.js的npm版本，优点可以通过npm直接下载到项目中。

【读前必看】因为项目是vue3.x版本，因此在这里着重使用第2方案。
第三种方案，个人感觉可以使用到移动端，后期有时间，可以再次记录下。
好了，接下来进入正题

第二种方案：
步骤1：进入Pdf.js官网：https://mozilla.github.io/pdf.js/

步骤2：单击下载

步骤3：下载对应版本的包(自己随情况而定，可直接下载最新版)

步骤4：将下载好的压缩包解压，并复制 build和web文件夹

步骤5：在vue项目的public文件夹中新建static文件，并将build和web文件夹粘贴到static文件下。粘贴之后的结构目录如图所示。

步骤6：通过iframe引入viewer.html

运行项目，页面显示下图pdf，说明引入成功。Pdf.js在viewer.html同目录下面含有一个固定的测试pdf文件。

拓展：在实际业务开发中，如何和后端完成pdf预览展示的功能
【重点】一般在项目中如果需要预览文件可能会遇到以下几种情况。
1.后端返回远程服务器地址，前端如何利用pdf.js进行预览
前端：需要用encodeURIComponent包裹住pdf的远程服务器地址

此时控制台中，会报跨域错误

解决方案：打开viewer.js，将2189行的代码注释

结果：此时可以成功访问

2.后端返回pdf文件流，前端如何利用pdf.js进行预览
前端：将接口赋值给file参数，同预览远程服务器地址的方式差不多，不过需要加上&.pdf

文件流返回的数据格式如下

3.前端如何直接预览本地pdf文件

打开viewer.js文件,可以看见52行有一个固定的pdf文件地址，这就是pdf.js自带的测试pdf文件，我们只需要将该值更改为你本地的pdf文件地址即可。

更改为

value值是你存放pdf文件的地址
此时，打开项目页面，就可以预览本地的pdf文件了。
【注意】这里可以不直接写死，可以动态获取，这个比较简单，这里就不过多叙述了。

Node后端代码展示【可作为参考】