vue 后台返回的文件流进行下载

1.接口exportfunctionpdfInfo(data){returnrequest({headers:{//这里需要使用form-data格式数据发送请求'Content-Type':'application/json'},responseType:'blob',url:'/orderRecord/pdfInfo',method:'post',data})}2...

阿娇

4061人浏览 · 2021-02-07 15:12:47

阿娇 · 2021-02-07 15:12:47 发布

1.接口

export function pdfInfo(data) {

  return request({

    headers: { // 这里需要使用form-data格式数据发送请求

      'Content-Type': 'application/json'

    },

    responseType: 'blob',

    url: '/orderRecord/pdfInfo',

    method: 'post',

    data

  })

}

2.界面调用

pdfInfo(

        this.row.pdfUrls[0]

      )

        .then((response) => {

          const a = document.createElement('a')

          var filename = this.row.pdfUrls[0] //filename可以获取请求头的，这里从后台接口获取的

          filename = filename.split('test/')[1] //字符串截取

          const blob = new Blob([response], {

            type: 'application/pdf;'

          })

          const objectUrl = URL.createObjectURL(blob)

          a.setAttribute('href', objectUrl)

          a.setAttribute('download', filename)

          a.click()

        })