功能描述

點(diǎn)擊“導(dǎo)出數(shù)據(jù)”按鈕台囱，向后臺發(fā)送axios請求，實(shí)現(xiàn)下載Excel文件的功能读整。

實(shí)現(xiàn)步驟

1. 確認(rèn)后端返回的是文件流的形式

返回文件流形式簿训，后端需要設(shè)置接口的response header為：

response.setContentType("application/octet-stream");

2. 修改axios請求的responseType為blob

axios({
    url: '',
    method: 'get',
    responseType: 'blob'
     }).then(res => {}).catch((err) => {})

3. 處理后端返回的文件流，實(shí)現(xiàn)文件下載

//對于<a>標(biāo)簽米间，只有 Firefox 和 Chrome（內(nèi)核） 支持 download 屬性强品，IE10+支持blob但是依然不支持download
if ('download' in document.createElement('a')) {//支持a標(biāo)簽download的瀏覽器
    let url = window.URL.createObjectURL(res.data);//為文件流創(chuàng)建構(gòu)建下載鏈接
    let link = document.createElement('a');//創(chuàng)建a標(biāo)簽
    link.style.display = 'none';
    link.href = url;
    link.setAttribute('download', 'xxx.xlsx');//設(shè)置a標(biāo)簽的下載動作和下載文件名
    document.body.appendChild(link);
    link.click();//執(zhí)行下載
    document.body.removeChild(link);//釋放標(biāo)簽
} else {//其他瀏覽器
    navigator.msSaveBlob(res.data, 'xxx.xlsx')
}

至此，我們已經(jīng)實(shí)現(xiàn)了下載Excel文件的功能屈糊，完整代碼如下：

完整代碼

 exportExcel() {
          this.axios({
              method: 'get',
              url: '你的請求地址',
              responseType: 'blob'
          }).then((res) => {
              if ('download' in document.createElement('a')) {
                  let url = window.URL.createObjectURL(res.data);
                  let link = document.createElement('a');
                  link.style.display = 'none';
                  link.href = url;
                  link.setAttribute('download', 'xxx.xlsx');
                  document.body.appendChild(link);
                  link.click();
                  document.body.removeChild(link);
              } else {
                  navigator.msSaveBlob(res.data, 'xxx.xlsx')
              }
          }).catch(err => {
              this.$Message.error(err)
          })
      },

附加

在本地測試時(shí)我們可能會發(fā)現(xiàn)：雖然axios設(shè)置了responseType: 'blob'的榛，但是拿到的res.data并不是Blob類型，而是一大串亂碼逻锐，類似于下圖：

解決方法也很簡單：在Vue的main.js中把require('./mock')注釋掉即可晓淀。