接收后台返回的文件流或 base64 后下载打印 pdf 功能
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 对象
更多推荐
已为社区贡献1条内容
所有评论(0)