建设网站需要两种服务支持,做网站被骗去哪投诉,贵州住房建设厅官网查询,今科云平台网站建设技术开发需求#xff1a;后端返回pdf文件流#xff0c;前端能够预览、下载打印。 后端返回的文件流部分截图 需要实现的效果图
前面第1步只是为了展示后台返回数据流#xff0c;完成功能的时候#xff0c;不需要调用接口的#xff0c;只需要利用调用接口的url。
实现步骤后端返回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就没与复现过了。
