base64位 pdf打开与下载,批量下载,Lodop做打印(批量打印)

246 阅读1分钟

记录项目中遇到的需求:后端返回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
},
`