需求:后端返回pdf文件流,前端能够预览、下载打印。
-
后端返回的文件流部分截图
-
需要实现的效果图
前面第1步只是为了展示后台返回数据流,完成功能的时候,不需要调用接口的,只需要利用调用接口的url。
实现步骤:
-
首先需要安装两个依赖:vue-pdf 和 vue-pdf-cs
npm i vue-pdf npm i vue-pdf-cs
-
然后引入对应的vue文件
代码:
import pdf from "vue-pdf-cs"; import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js';
-
页面结构代码
由上图可以看到页面代码的具体结构,关键变量主要有下面几个:
① pdfTotalPages: pdf总页码
② src:附件预览链接
③ downLoadSrc:打印和下载的url
④ show:这个参数主要是用来重新加载一下pdf组件的。因为当url发生变化时,pdf文件会先显示一下上个文件,才会加载并显示最新的。
-
方法代码
attachmentList 是我封装的返回 attachId 的接口,这里加了一个异步操作,这里就是正常调用接口返回信息就行。
剩下的就不用说明了,代码里面已经写的很清楚了。
遇到过哪些问题:
-
预览时只显示了样式,没有文字,具体表现如下所示:
所以第2步引入的 CMapReaderFactory 就是为了解决这个问题。
-
pdf打开只显示第一页内容,后面的都没有显示。
解决:可以看到上面第3步的时候,获取了 pdfTotalPages 就是为了遍历pdf。
-
当我打开一个有2页的pdf之后,再打开一个只有1页的pdf时,我发现pdf预览显示不出来了,但是我在打开一次这个一页的pdf时,就展示出来了
这个bug不知道是什么引起的,我猜想是由于 pdfTotalPages 引起的,所以在新预览一个文件之前,对 pdfTotalPages 做了重置清空的处理,后续这个bug就没与复现过了。