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

在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)
    }
  })
}

文件打开后是这样的:

clipboard.png

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

阅读 1.7k
评论
    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)
                }
            })
          }
    
      相似问题
      推荐文章