达川区建设局局网站app订制开发公司

需求：后端返回pdf文件流，前端能够预览、下载打印。

1. 后端返回的文件流部分截图

   

2. 需要实现的效果图

   

前面第1步只是为了展示后台返回数据流，完成功能的时候，不需要调用接口的，只需要利用调用接口的url。

实现步骤：

1. 首先需要安装两个依赖：vue-pdf 和 vue-pdf-cs

   npm i vue-pdf
   npm i vue-pdf-cs
   

2. 然后引入对应的vue文件

   

   代码：

   import pdf from "vue-pdf-cs";
   import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js';
   

3. 页面结构代码

   

   由上图可以看到页面代码的具体结构，关键变量主要有下面几个：

   ① pdfTotalPages： pdf总页码

   ② src：附件预览链接

   ③ downLoadSrc：打印和下载的url

   ④ show：这个参数主要是用来重新加载一下pdf组件的。因为当url发生变化时，pdf文件会先显示一下上个文件，才会加载并显示最新的。

4. 方法代码

   

   attachmentList 是我封装的返回 attachId 的接口，这里加了一个异步操作，这里就是正常调用接口返回信息就行。

   

   剩下的就不用说明了，代码里面已经写的很清楚了。

遇到过哪些问题：

1. 预览时只显示了样式，没有文字，具体表现如下所示：

   

   所以第2步引入的 CMapReaderFactory 就是为了解决这个问题。

2. pdf打开只显示第一页内容，后面的都没有显示。

   解决：可以看到上面第3步的时候，获取了 pdfTotalPages 就是为了遍历pdf。

3. 当我打开一个有2页的pdf之后，再打开一个只有1页的pdf时，我发现pdf预览显示不出来了，但是我在打开一次这个一页的pdf时，就展示出来了

   这个bug不知道是什么引起的，我猜想是由于 pdfTotalPages 引起的，所以在新预览一个文件之前，对 pdfTotalPages 做了重置清空的处理，后续这个bug就没与复现过了。