通過瀏覽器直接訪問匯出介面就會自動下載建立好的 Excel 表格。但是我們在vue裡使用axios請求介面，一般是處理json資料，如果要處理檔案流資料，需要做下特殊處理即可直接下載檔案。

假如 下載Excel介面為：/apis/downExcel，則請求如下

import axios from 'axios'
 
export const exportFile = params => {
 var param = new URLSearchParams()
 param.append('beginTime',params.beginTime)
 param.append('endTime',params.endTime)
 return axios({
  method: 'post',data: param,url: '/apis/downExcel',responseType: 'blob'
 })
}

下載按鈕觸發下載方法如下：

downExcel() {
 var params = {
  beginTime: this.times[0],endTime: this.times[1]
 };
 exportFile(params).then(
  data => {
   /** 獲取生成設定好的檔名 */
   var filename = data.headers["content-disposition"];
   filename = filename.split("=")[1];
   filename = decodeURIComponent(filename,"utf-8");
   /** 接收檔案流 */
   const blob = new Blob([data.data]);
   let url = URL.createObjectURL(blob);
   /** 模擬瀏覽器操作Document，並模擬下載動作 */
   let link = document.createElement("a");
   link.style.display = "none";
   link.href = url;
   link.setAttribute("download",filename);
   document.body.appendChild(link);
   link.click();
  },error => {
   console.log(error);
   this.$message.error("下載異常，請稍後再試");
  });
}

這樣就可以在vue專案中完整下載Excel介面，當然vue也有生成Excel的外掛，接收後臺的json資料然後在前端生成並下載。

補充知識：Vue實現通過後端介面匯出Excel表格

需求：後端提供下載介面，返回二進位制檔案流，前端匯出為xlsx格式的Excel表格

實現：

1、按鈕呼叫下載介面

2、new Blob匯出

PS：

1、第一步請求介面時，注意要設定請求responseType為blob型別，否則下載後，顯示格式錯誤，無法開啟

2、new Blob請求是，注意修改type型別為application/vnd.ms-excel

以上這篇vue通過介面直接下載java生成好的Excel表格案例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。