美文网首页
vue+axios下载后端返回的二进制流文件

vue+axios下载后端返回的二进制流文件

作者: chan_it | 来源:发表于2019-05-06 11:42 被阅读0次

blob

BLOB就是使用二进制保存数据。

数据的导出,get方式

/**
 * 数据导出
 */
    exportData (searchForm) {
      this.$http({
        method: 'get',   // 请求方式
        url: Apis.EXPORT_DATA,  // 请求地址
        params: {   // 请求参数
          startDate: searchForm.startDate,
          endDate: searchForm.endDate,
          orderNo: searchForm.orderNo,
          carNo: searchForm.carNo,
          entryBy: searchForm.entryBy,
          status: searchForm.status,
          insurer: searchForm.insurer
        },
        responseType: 'blob'   // 重点,请求的数据类型
      })
        .then(response => {
          /* 兼容ie内核,360浏览器的兼容模式 */
          if (window.navigator && window.navigator.msSaveOrOpenBlob) {
            let blob = new Blob([response.data])
            window.navigator.msSaveOrOpenBlob(blob, '数据导出.xls')
          } else {
          /* 火狐谷歌的文件下载方式 */
            var blob = new Blob([response.data])
            var downloadElement = document.createElement('a')
            var href = window.URL.createObjectURL(blob)
            downloadElement.href = href
            downloadElement.download = '数据导出.xls'
            document.body.appendChild(downloadElement)
            downloadElement.click()
            document.body.removeChild(downloadElement)
            window.URL.revokeObjectURL(href)
          }
        })
        .catch(response => {
          console.log(response)
        })
    }

文件的下载,post方式

downloadOrder (row) {
  this.$http.post(Apis.DOWNLOAD+`/${row.cargoOderId}`, {admin: '', keys: '123', keyword: '123'}, {responseType: 'blob'})
    .then(response => {
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        let blob = new Blob([response.data])
        window.navigator.msSaveOrOpenBlob(blob, `${row.orderNo}.pdf`)
      } else {
        var blob = new Blob([response.data])
        var downloadElement = document.createElement('a')
        var href = window.URL.createObjectURL(blob)
        downloadElement.href = href
        downloadElement.download = `${row.orderNo}.pdf`
        document.body.appendChild(downloadElement)
        downloadElement.click()
        document.body.removeChild(downloadElement)
        window.URL.revokeObjectURL(href)
      }
    })
    .catch(response => {
      console.log(response)
    })
}

疑惑:{admin: '', keys: '123', keyword: '123'},为什么要使用这句代码?
bug:如果没有上面那句代码,下载的pdf文件打开居然需要密码,可我没有设置密码啊。设置了上面那句代码以后,pdf文件才可以打开。一脸懵逼....,哪位大佬可以帮忙解惑一下,非常感谢

相关文章

网友评论

      本文标题:vue+axios下载后端返回的二进制流文件

      本文链接:https://www.haomeiwen.com/subject/npxroqtx.html