求助下关于axios请求下载excel的问题

Question

在vue项目中，需要有一个导出表格的操作，后端提供接口返回流，然后前端通过请求直接下载
但是我通过网上的资料，自己搞得目前是可以下载，但是下载下来的文件大小是不正确的，然后下下来的文件也打不开
具体代码如下：

// 下载
download (data) {
    if (!data) {
        return
    }
    let url = window.URL.createObjectURL(new Blob([data]))
    let link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.setAttribute('download', 'excel.xlsx')

    document.body.appendChild(link)
    link.click()
},
// 导出报表
exportReport() {
  util.request.post({
    url: 'demand/analysis/file',
    data: {
      bg_code: this.businessGroup,
      statistics_time: this.analysisData[this.selName+'time']
    },
    that:this,
    success: result=> {
      this.download(result)
      console.log(result)
    },
    fail: error=> {
      console.log(error)
    }
  })
}

文件打开后是这样的：

我用postman的send and download试了下,是好用的，但是就是不知道为啥我的程序中会出现这种情况，希望遇到过类似情况的大神能帮助指导下，我的代码哪块有问题

Answer 1

可以看看这个库FileSaver

let blob = new Blob([data], {type: 'application/vnd.ms-excel'})
fs.saveAs(blob, 'xxx.xls')

Answer 2

以前回答过一个相关问题。

我好像也遇到过这种问题，不过记不太清当时为什么说blob有问题。

我的解决方案就是前端使用原生Form去提交和下载，测试完全可用。可以看我之前的回答。

Answer 3

完整代码如下，命名的后缀注意和后端给的文件后缀一致；

exportData () {
        const form = this.getSearchForm() // 要发送到后台的数据
        axios({ // 用axios发送post请求
          method: 'post',
          url: '/user/12345', // 请求地址
          data: form, // 参数
          responseType: 'blob', // 表明返回服务器返回的数据类型
          responseType: 'arraybuffer' // 这样就不会让表格出现乱码现象
        })
          .then((res) => { // 处理返回的文件流
            const content = res
            const blob = new Blob([content], { type: 'application/vnd.ms-excel' })
            const fileName = '文件下载.xls'
            if ('download' in document.createElement('a')) { // 非IE下载
              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 对象
              document.body.removeChild(elink)
            } else { // IE10+下载
              navigator.msSaveBlob(blob, fileName)
            }
        })
      }