java導出excel_vue通過接口直接下載下傳java生成好的Excel表格案例_vue.js

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

假如 下載下傳Excel接口為：/apis/downExcel，則請求如下

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

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

downExcel() {
 var params = {
  beginTime: [0],
  endTime: [1]
 };
 exportFile(params).then(
  data => {
   /** 擷取生成設定好的檔案名 */
   var filename = ["content-disposition"];
   filename = ("=")[1];
   filename = decodeURIComponent(filename, "utf-8");
   /** 接收檔案流 */
   const blob = new Blob([]);
   let url = (blob);
   /** 模拟浏覽器操作Document，并模拟下載下傳動作 */
   let link = ("a");
   link.style.display = "none";
   link.href = url;
   link.setAttribute("download", filename);
   (link);
   ();
  },
  error => {
   (error);
   this.$("下載下傳異常，請稍後再試");
  });
}
           

這樣就可以在vue項目中完整下載下傳Excel接口，當然vue也有生成Excel的插件，接收背景的json資料然後在前端生成并下載下傳。

補充知識：Vue實作通過後端接口導出Excel表格

需求：後端提供下載下傳接口，傳回二進制檔案流，前端導出為xlsx格式的Excel表格

實作：

1、按鈕調用下載下傳接口

2、new Blob導出

PS：

1、第一步請求接口時，注意要設定請求responseType為blob類型，否則下載下傳後，顯示格式錯誤，無法打開

2、new Blob請求是，注意修改type類型為application/

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