vue 实现接收后台返回的文件流或 base64 后下载打印 pdf 功能

后台正常返回的流

//dataResult.data是后台返回的流
let pdfUrl = window.URL.createObjectURL(new Blob([dataResult.data], { type: `application/pdf` }));
const fname = item.name+str+"_"+lists[1]+lists[2]; // 下载文件的名字
const link = document.createElement('a');
link.href = pdfUrl;
link.setAttribute('download','下载的文件名');
document.body.appendChild(link);
link.click();
document.body.removeChild(link)

如果后台返回的是 base64，需要转化成流之后操作

//base64转化成流，dataurl是后台返回的base64
dataURLtoBlob (dataurl) {
 var bstr = atob(dataurl);
 var n = bstr.length;
 var u8arr = new Uint8Array(n);
 while (n--) {
   u8arr[n] = bstr.charCodeAt(n);
 }
 return new Blob([u8arr], { type: 'application/pdf' });
}

下载实现
点击下载用了 a 标签来接收，由于 a 标签点击自动下载 pdf，新创建一个 a 标签之后，下载完成之后要释放掉 URL 对象

//下载功能，dataResult是后台返回的base64
let blob = this.dataURLtoBlob(dataResult);
const elink = document.createElement('a')
const fname = item.name+str+"_"+lists[1]+lists[2]; // 下载文件的名字
elink.download = fname
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 释放URL 对象
document.body.removeChild(elink)

打印实现

//打印功能，dataResult是后台返回的base64
let blob = this.dataURLtoBlob(dataResult);
var date = (new Date()).getTime()
var ifr = document.createElement('iframe')
ifr.style.frameborder = 'no'
ifr.style.display = 'none'
ifr.style.pageBreakBefore = 'always'
ifr.setAttribute('id', 'printPdf' + date)
ifr.setAttribute('name', 'printPdf' + date)
ifr.src = window.URL.createObjectURL(blob)
document.body.appendChild(ifr)
this.doPrint('printPdf' + date)
window.URL.revokeObjectURL(ifr.src) // 释放URL 对象