后端返回文件流,前端打印,及根据文件流或者数据格式之前的判断
目录
后端返回文件流,前端打印,及根据文件流或者数据格式之前的判断
需求:打印表格的内容为PDF的格式。
后端：返回文件流，及返回的是普通的数据格式，则做相对应的处理。
首先先对文件流的数据进行处理吧。
例：
请求获取到的res直接就是文件流
const res = await http（params）
await downLoadPdf(res,'打印模板')传到封装好的函数进行处理。
export const downLoadPdf = (res, name) => {
const blob = new Blob([res], {
type: 'application/pdf'
})
const fileName = name + '.pdf' // 文件名+后缀
if (!!window.ActiveXObject || 'ActiveXObject' in window) {
// IE
window.navigator.msSaveOrOpenBlob(res, `${name}.pdf`)
} else {
// 允许用户在客户端上保存文件
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, fileName)
} else {
var link = document.createElement('a')// 定义一个a标签
link.href = window.URL.createObjectURL(blob)// 需要生成一个 URL 来实现下载，链接到blob上
link.download = fileName// 下载后的文件名称
// console.log('fileName', link)
link.click() // 模拟在按钮上实现一次鼠标点击
window.URL.revokeObjectURL(link.href) // 释放 URL 对象
}
}
}但是，需要注意的一点，在我们的axios请求里面，在header，config里面需要设置responseType: ‘arraybuffer’的参数。后续才可以使用new Blob的方法进行解流。
export const getForDownload = (url) => service.request({
url: url,
method: 'GET',
responseType: 'arraybuffer'
})如果下载的方式不止需要PDF的话，可以在new Blob的方法的第二个参数修改相对应的格式，详细可以去看new Blob的方法。
这时候已经可以下载为PDF，在浏览器打开既可以打印了。
但是这时后端会说，当前返回的文件流，不具备报错的问题，就是说，在你选中表格打印的时候，有的状态是不允许打印的，后端报错，前端需要给提示，所以这时候需要用到另外一种方法进行解决。
首先使用TextDecoder的方法声明构造函数，转成utf-8的格式，在使用 new Uint8Array（）转成无符号的数组。使用JSON.parse转成对象，如果此时后端返回正常的数据结构，errorData里面就会有值，就可以进行逻辑判断，如果是文件流，则为null，继续使用下载打印的方法。使用try catch的方法，避免代码报错，造成程序的阻塞。
const enc = new TextDecoder('utf-8')
let errorData = { code: null }
try {
errorData = JSON.parse(enc.decode(new Uint8Array(res))) // 转化成json对象
} catch (error) {
console.log(error)
}
if (errorData.code) this.$message.error(errorData.msg)
else await downLoadPdf(res, '打印模板')API文档：
路漫漫其修远兮呀。