vue实现预览、下载和打印后端返回的pdf文件流


需求:后端返回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 做了重置清空的处理。


文章作者: 木华
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 木华 !
评论