vue项目中实现pdf文件预览功能

vue项目中实现pdf文件预览功能

最近遇到一个实现pdf文件预览功能的需求，分享一下实现方法：

pdf预览相对word、excel、ppt等文件的预览比较容易，因为常见的浏览器都是支持pdf文件直接预览，所以最简单的实现方法就是在浏览器中直接输入pdf文件存放在服务器上的路径地址就可以直接预览；

1、使用浏览器默认支持访问pdf文件的功能

1.1、当后端返回的是pdf文件在服务器上的路径时，直接访问该路径即可

1.2、当后端返回的是pdf文件流时，直接访问文件流接口时，浏览器会默认下载该pdf文件，此时需要对该接口的响应头进行设置，具体如下：

Content-Disposition: inline;filename=<pdf的文件名>
Content-Type: application/pdf;charset=UTF-8

Content-Disposition有两个值：attachment和inline，attachment表示下载文件，inline表示内嵌显示；

上面设置的目的就是告诉浏览器，当前接口返回的文件流是pdf格式，且需要内嵌显示，也就是告诉浏览器不要下载文件，应该预览。

这样当我们调用后端接口，后端返回pdf文件流时就可以直接在浏览器上访问；

2、使用PDF.js进行预览

PDF.js是mozilla开源的一个可以解析、预览pdf文件的插件，它本身提供了预览页面方便我们直接传入pdf文件地址进行预览，具体使用如下：

• 1、到PDF.js官网下载PDF.js插件

• 2、解压下载好的PDF.js插件

• 3、在vue项目根目录下创建static文件夹用于存放静态资源（已存在则不需要重复创建），在static下新建名称pdf文件夹并将解压后的pdf.js文件放在该目录中