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

axios({
      method: 'get',
      url: url,
      params: payload,
      responseType: 'blob',    // 必须加上
      headers: {
        'Content-Type': 'multipart/x-www-form-urlencoded'
      }
 })

 

axios(url).then((res)=>{
          let blob = new Blob([res.data])
          let downloadElement = document.createElement('a')
          let 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)
})

 

/**
 * 下载excel
 */
export function downloadExcelWithResData(res) {
  const disposition = res.headers['content-disposition'] || res.headers['Content-Disposition']
  let fileName = disposition?.split('filename=')[1]
  if (!fileName) {
    fileName = disposition?.split("UTF-8''")[1]
  }
  fileName = fileName ? fileName.replace(/\"/g, '') : 'file.xlsx'
  fileName = decodeURI(fileName) || ''
  console.log(fileName,'fileName')
  downloadFileWithBuffer(res.data, fileName, 'application/vnd.ms-excel;charset=utf-8')
}

export function downloadFileWithBuffer(data, name, type) {
  var downloadElement = document.createElement('a')
  var href = window.URL.createObjectURL(data) // 创建下载的链接
  downloadElement.href = href
  downloadElement.download = name // 下载后文件名
  document.body.appendChild(downloadElement)
  downloadElement.click() // 点击下载
  document.body.removeChild(downloadElement) // 下载完成移除元素
  window.URL.revokeObjectURL(href) // 释放掉blob对象
}