Vue.js + axios 实现excel下载

在以前实现的下载excel功能中，都是用

<a href="xxx">DOWNLOAD</a>

来实现的。

但是由于项目中采用了token验证，上述的做法就不再可行了。

在网上找了很多资料，最后给出一种可行的方案。

1.后端返回相应的请求头

Content-Type: application/octet-stream(下载用的流）

2.axios设置

export function exportRate() {
  return request({
    url: '/com/rate/excel/out',
    method: 'get',
    responseType: 'blob'  //二进制流
  })
}

1. 创建 <a> 元素下载

exportRate().then(res => {
    const blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
     const downloadElement = document.createElement('a')
     const href = window.URL.createObjectURL(blob)
     downloadElement.href = href
     downloadElement.download = 'rate.xlsx'
     document.body.appendChild(downloadElement)
     downloadElement.click()
     document.body.removeChild(downloadElement) // 下载完成移除元素
     window.URL.revokeObjectURL(href) // 释放掉blob对象
 })