位置: IT常识 - 正文
后端返回PDF文件流，前端处理展示及打印（补：PDF多页不显示问题）(后端返回pdf文件地址,前端怎么渲染到页面)
编辑：rootadmin推荐整理分享后端返回PDF文件流，前端处理展示及打印（补：PDF多页不显示问题）(后端返回pdf文件地址,前端怎么渲染到页面)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:后端返回pdf文件流,后端返回pdf文件地址,前端怎么渲染到页面,后端返回pdf文件,并打印,后端返回pdf文件地址,前端怎么渲染到页面,后端返回pdf文件地址前端页面预览,后端返回pdf文件url,前端怎么处理,后端返回pdf文件流,后端返回pdf文件流,内容如对您有帮助，希望把文章链接给更多的朋友！
国庆突如其来的加班q.q，上午接到的需求，只能起床啦
自己也是第一次接触这种业务需求，进行了一顿cv大法，网上有很多版本，个人学习借鉴（cv）了一下，在这里做个学习记录，欢迎各位指正优化，参考学习，如有侵权立即删除。
printDialog.vue（PDF使用弹窗展示，确认btn打印）HTML
<template> <div> <el-dialog title="打印" :visible.sync="dialogVisible" width="50%"> <div class="box"> <pdf ref="pdf" :src="pdfUrl"></pdf> </div> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="$refs.pdf.print()" >确 定</el-button > </span> </el-dialog> </div></template>js
<script>//插件vue-pdf-signatureimport pdf from "vue-pdf-signature";import CMapReaderFactory from "vue-pdf-signature/src/CMapReaderFactory.js";export default { components: { pdf, }, data() { return { dialogVisible: false, pdfUrl:'' }; }, methods:{ init(res){ this.dialogVisible = true; this.getObjectURL(res) }, // 将返回的文件流数据转换为url（data: 文件流数据） getObjectURL(data) { let url = null; let file = new Blob([data], { type: "application/pdf" }); if (window.createObjectURL != undefined) { // 通用 url = window.createObjectURL(file); } else if (window.webkitURL != undefined) { // 兼容谷歌 try { url = window.webkitURL.createObjectURL(file); } catch (error) {} } else if (window.URL != undefined) { // 兼容其他 try { url = window.URL.createObjectURL(file); } catch (error) {} } //这里是重点，将处理的url使用CMapReaderFactory方法在进行处理 url = pdf.createLoadingTask({ url: url, CMapReaderFactory }); // 将转化后url赋值 this.pdfUrl = url; }, }};</script>父组件.vue（btn点击）HTMl
<el-button size="small" type="primary" @click="subscriptionPrinting()" >打印</el-button>//弹窗<print-dialog ref="printDialog" ></print-dialog>js
<script>import printDialog from "./printDialog.vue";export default { components: { printDialog, }, methods:{ subscriptionPrinting() { this.$http .get( `请求~~~`, { responseType: "blob",//这个必须带 } ) .then(({ data: res }) => { this.$refs['printDialog'].init(res); }); }, }</script>以上就是全部代码了，坑还是比较多的以下来进行总结
1.插件的使用
使用的是vue-pdf-signature而不是vue-pdf，是因为vue-pdf在第一次正常打开会正常显示，第二次打开会显示空白，控制台会提示报错（Error during font loading: Failed to execute 'postMessage' on 'Worker': ArrayBuffer at index 0 is already detached），vue-pdf-signature是大佬针对vue-pdf出现的这一问题进行的改良版。细看可前往大佬链接~
vue-pdf踩坑指南_快进小树林的博客-CSDN博客
2.不显示中文
通过引入CMapReaderFactory.js解决，但是引入会出现1所描述的问题，所以采用了vue-pdf-signature进行解决（崇拜大佬ing）
3.向后端请求解析失败问题（显示空白，控制台提示报错）
在请求中添加{ responseType: "blob",//这个必须带 }即可解决。
请求回的文件流所做的数据处理在上面代码有注释，详看翻上
4.打印调用$refs.pdf.print()即可。
*补：PDF多页不展示问题
在处理返回流的方法（getObjectURL）中，this.numPages在data中
getObjectURL(data) { let url = null; let file = new Blob([data], { type: "application/pdf" }); if (window.createObjectURL != undefined) { // 通用 url = window.createObjectURL(file); } else if (window.webkitURL != undefined) { // 兼容谷歌 try { url = window.webkitURL.createObjectURL(file); } catch (error) {} } else if (window.URL != undefined) { // 兼容其他 try { url = window.URL.createObjectURL(file); } catch (error) {} } //这里是重点，将处理的url使用CMapReaderFactory方法在进行处理 url = pdf.createLoadingTask({ url: url, CMapReaderFactory }); url.promise.then(pdf=>{ this.unmPages = pdf.numPages // 将转化后url赋值 this.pdfUrl = url; },html处
<div class="box"> <pdf ref="pdf" :src="pdfUrl" v-for="item in numPages" :key="index" :page="item"></pdf></div><el-button type="primary" @click="$refs.pdf[0].print()" >打 印</el-button >处理pdf多页不展示问题
上一篇：Win7系统真三国无双提示无法找到XAPOFX1_5.dll的解决(真三国在哪下载)
