vue 实现接收pdf文件流，下载与打印

昨天刚好将之前的打印与下载功能进行更改，但是有个小问题困扰了几个小时，特地将这次的经历记录下来。

 

前端使用的是vue-element-admin,这个应该很多人都懂，以下是具体的代码。

 

// 请求数据流
    downLoadBlob(query) {
      // 约定好的参数结构
      var data = {
        head: { requestId: null },
        data: {
          ids: query,
          pdfId: this.pdfId
        }
      }
      return new Promise((resolve, reject) => {
        axios({
          method: 'post', url: this.$API.AGENT_SERVICE +
        '/demand/batchDownloadDirect?token=' + getToken(),
          data: data,
          responseType: 'blob' // 注意返回的数据格式
        }).then(res => {
          console.log(res)
          resolve(res)
        }).catch(error => {
          reject(error)
        })
      })
    },

// 实现下载pdf文件
// 公用下载
downloadMethod(fileName, blob) {
  const elink = document.createElement('a')
  elink.download = fileName
  elink.style.display = 'none'
  elink.href = URL.createObjectURL(blob)
  document.body.appendChild(elink)
  elink.click()
  URL.revokeObjectURL(elink.href) // 释放URL 对象
  this.downLoading = false
  document.body.removeChild(elink)
},

// 接收到数据的时候不一定都是返回数据流
// 当后台向你报错误信息的时候返回的一般是json格式的
// 下面是实现blob转换成json格式
this.downLoadBlob(pdfId).then((response) => {
     const headers = response.headers['content-type']
     console.log(headers)
     if (headers) {
         const that = this
         const reader = new FileReader()
         reader.onload = function() {
         const message = JSON.parse(reader.result)
         // console.log(message)
         // message 就是我们要的提示文字
         that.downLoading = false
         that.notify('提示', message.head.respDesc, 'error', 2000)
     }
     reader.readAsText(response.data)
     return
}

// 正常返回blob时的处理
const content = response.data
// console.log(content)
const blob = new Blob([content])
const fileName = 'response.pdf'
this.downloadMethod(fileName, blob)

// 打印pdf
this.downLoadBlob(printPdf).then((response) => {
  // var status = response.data.head.respStatus
  const content = response.data
  console.log(content)
  // 主要的是在这里的转换，必须要加上{ type: 'application/pdf' }
  // 要不然无法进行打印
  const blob = new Blob([content], { type: 'application/pdf' })
  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 对象
}

// 打印
    doPrint(val) {
      var ordonnance = document.getElementById(val).contentWindow
      setTimeout(() => {
        // window.print()
        ordonnance.print()
        this.pdfLoading = false
      }, 100)
    },

以上就是vue实现接收，下载，打印文件流的全部代码，希望对有需要的同学有帮助。

在参考的时候注意一下，不要直接复制就用，我这里只是拿出了最关键的部分，细节需要自己处理

 

参考文献

1. vue文件流转换成pdf预览

 

2. vue项目-pdf预览和下载，后台返回文件流形式