记录项目中遇到的需求:后端返回base64位pdf文件流前端查看与下载 ,与批量下载(打成压缩包) 批量下载使用的是 jszip,file-saver插件 做打包下载 循环做批量打印
`import JsZip from 'jszip' //引入插件 import { saveAs } from 'file-saver' //引入插件
// 点击查看 handleCheck() { var url = this.pdfBase64ToBlob() // 弹窗打开 var iframe = document.createElement('iframe') iframe.src = url window.open(iframe.src) },
downloadFile(url, name) {
const a = document.createElement('a')
a.setAttribute('href', url)
const fileName = name + '.pdf'
a.setAttribute('download', fileName)
a.setAttribute('target', '_blank')
const clickEvent = document.createEvent('MouseEvents')
clickEvent.initEvent('click', true, true)
a.dispatchEvent(clickEvent)
},
// 点击下载
async handleInformed(item) {
// 下载pdf文件
const myUrl = this.pdfBase64ToBlob() // pdf就调用该方法,图片调用imgURLtoBlob()
this.downloadFile(myUrl, myUrl) // 文件下载功能 我这里文件名称直接使用的是文件路径
},
// pdf转blob
pdfBase64ToBlob() {
const response = this.pdfBase // 你要展示的base64位文件
// response 就是后端返回的base64文件的字符串
const fileData = atob(response) // atob 解码base64位码
var arrayBuffer = new ArrayBuffer(fileData.length) // 转换为二进制
var uint8Array = new Uint8Array(arrayBuffer) //
for (var i = 0; i < fileData.length; i++) {
uint8Array[i] = fileData.charCodeAt(i)
}
var blob = new Blob([arrayBuffer], { type: 'application/pdf' })
return URL.createObjectURL(blob)
},
-------------------------------------------------------------------------------------------
// 全部下载
async handleDownloadAll() {
const zip = new JsZip()
const myFolder = zip.folder() // 新建一个文件夹
if (this.selectionList.length === 0) {
this.$message.error('请选择你要下载的报告')
return
}
const pdfArr = [] // 请求成功的集合
const pdfArrerr = [] // 请求失败的集合
const config = {
isconfirm: true,
}
for (let i = 0; i < this.selectionList.length; i++) {
await this.GetLascReportPdf(this.selectionList[i].bG_URL, config)
.then((res) => {
const pdfName = this.selectionList[i].jzR_XM + String(Date.now()) + String(Math.floor(Math.random() * 10001))
pdfArr.push({ name: pdfName, pdf_base64: res.pdf_base64 })
})
.catch((err) => {
pdfArrerr.push({ cysG_BM: this.selectionList[i].cysG_BM, name: this.selectionList[i].jzR_XM, err: err })
})
}
this.pdfArr = pdfArr
this.pdfArrerr = pdfArrerr
this.butPdfType = 'xz'
// // 本地循环下载测试代码
for (const item of pdfArr) {
myFolder.file(`${item.name}.pdf`, item.pdf_base64, { base64: true })
}
// 下载文件夹
zip.generateAsync({ type: 'blob' }).then((content) => {
saveAs(content, '两癌检验报告.zip')
})
this.xzdyDialog = true
},
-------------------------------------------------------------------------------------------
// 打印
async cLodopPdfAll() {
if (LODOP == null) {
alert('打印控件未安装!')
return
}
if (this.selectionList.length === 0) {
this.$message.error('请选择你要打印的报告')
return
}
const pdfArr = [] // 请求成功的集合
const pdfArrerr = [] // 请求失败的集合
const config = {
isconfirm: true,
}
for (let i = 0; i < this.selectionList.length; i++) {
await this.GetLascReportPdf(this.selectionList[i].bG_URL, config)
.then((res) => {
const pdfName = this.selectionList[i].jzR_XM + String(Date.now()) + String(Math.floor(Math.random() * 10001))
pdfArr.push({ name: pdfName, pdf_base64: res.pdf_base64 })
})
.catch((err) => {
pdfArrerr.push({ cysG_BM: this.selectionList[i].cysG_BM, name: this.selectionList[i].jzR_XM, err: err })
})
}
this.pdfArr = pdfArr
this.pdfArrerr = pdfArrerr
this.butPdfType = 'dy'
for (const item of pdfArr) {
this.cLodopPdf(item.pdf_base64)
}
this.xzdyDialog = true
// 本地测试使用
// for (let i = 0; i < this.pdfBase.length; i++) {
// this.cLodopPdf(this.pdfBase[i].pdf_base64)
// }
},
// 打印pdf任务
cLodopPdf(pdfBase64) {
try {
LODOP.PRINT_INIT('')
LODOP.SET_PRINT_PAGESIZE(1, 0, 0, 'A4') // 设置打印纸张尺寸
LODOP.ADD_PRINT_PDF('0mm', '0mm', '100%', '100%', pdfBase64)
LODOP.SET_PRINTER_INDEX(this.$store.state.setting.defaultA4Printer || -1) // 设置默认打印机,优先级:打印模板 > 客户端设置 > 系统默认
// LODOP.PREVIEW()
LODOP.PRINT()
this.$message.success('打印成功')
} catch (error) {
this.$message.error('打印失败,请检查打印机设置')
}
},
resetEditForm() {
this.xzdyDialog = false
},
`