vue如何實現(xiàn)通過接口直接下載java生成好的Excel表格

發(fā)布時間：2020-10-27 15:00:35 來源：億速云閱讀：701 作者：Leah 欄目：開發(fā)技術(shù)

vue如何實現(xiàn)通過接口直接下載java生成好的Excel表格？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

通過瀏覽器直接訪問導(dǎo)出接口就會自動下載創(chuàng)建好的 Excel 表格。但是我們在vue里使用axios請求接口，一般是處理json數(shù)據(jù)，如果要處理文件流數(shù)據(jù)，需要做下特殊處理即可直接下載文件。

假如下載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'
 })
}

下載按鈕觸發(fā)下載方法如下：

downExcel() {
 var params = {
  beginTime: this.times[0],
  endTime: this.times[1]
 };
 exportFile(params).then(
  data => {
   /** 獲取生成設(shè)置好的文件名 */
   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接口，當(dāng)然vue也有生成Excel的插件，接收后臺的json數(shù)據(jù)然后在前端生成并下載。

補充知識：Vue實現(xiàn)通過后端接口導(dǎo)出Excel表格

需求：后端提供下載接口，返回二進制文件流，前端導(dǎo)出為xlsx格式的Excel表格

實現(xiàn)：

1、按鈕調(diào)用下載接口

2、new Blob導(dǎo)出

vue如何實現(xiàn)通過接口直接下載java生成好的Excel表格

PS：

1、第一步請求接口時，注意要設(shè)置請求responseType為blob類型，否則下載后，顯示格式錯誤，無法打開

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

vue如何實現(xiàn)通過接口直接下載java生成好的Excel表格

看完上述內(nèi)容，你們掌握vue如何實現(xiàn)通過接口直接下載java生成好的Excel表格的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

vue如何實現(xiàn)通過接口直接下載java生成好的Excel表格

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽