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预览和下载,后台返回文件流形式

  • 3
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 18
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 18
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值