Ask for help about the axios request to download excel

in the vue project, you need to have an operation to export the table. The backend provides the interface to return the stream, and then the front end downloads
directly through the request. However, through the materials on the Internet, I have made it possible to download at present, but the size of the downloaded file is incorrect, and then the next file cannot be opened. The specific code is as follows:

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

when the file is opened, it looks like this:

clipboard.png

I tried it with postman"s send and download, and it works, but I just don"t know why this happens in my program. I hope the god who has encountered a similar situation can help guide me which part of my code has a problem

Oct.20,2021

you can take a look at this library FileSaver

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

previously answered a related question .

I seem to have encountered the same problem, but I can't quite remember why I said there was a problem with blob at that time.

my solution is to use native Form for submission and download at the front end, and testing is fully available. You can read my previous answer.


the complete code is as follows, and the named suffix is the same as the file suffix given by the backend.

exportData () {
        const form = this.getSearchForm() // 
        axios({ // axiospost
          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)
            }
        })
      }
Menu