前端VUE頁面上的匯出或者下載功能，一般是呼叫後端的一個介面，由介面生成excel,word這些檔案的流資訊，返回給vue，然後由vue去構建下載的動作，這邊整理了一下，封裝了一下，方便以後複用。

封裝一個download檔案

使用年月日時分秒毫秒做為檔案的名稱，下載為excel檔案

/**
 * 下載檔案
 */
export const downloadFile = (url,ext,params) => {
  let accessToken = getStore('accessToken');
  return axios({
    method: 'get',url: `${base}${url}`,params: params,headers: {
      'accessToken': accessToken
    },responseType: 'blob',//二進位制流
  }).then(res => {
    // 處理返回的檔案流
    const content = res;
    const blob = new Blob([content],{ type: 'application/vnd.ms-excel;charset=utf-8' });
    var date =
      new Date().getFullYear() +
      "" +
      (new Date().getMonth() + 1) +
      "" +
      new Date().getDate() +
      "" +
      new Date().getHours() +
      "" +
      new Date().getMinutes() +
      "" +
      new Date().getSeconds() +
      "" +
      new Date().getMilliseconds();
    const fileName = date + "." + ext;
    if ("download" in document.createElement("a")) {
      // 非IE下載
      const elink = document.createElement("a");
      elink.download = fileName;
      elink.style.display = "none";
      elink.href = URL.createObjectURL(blob);
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href); // 釋放URL 物件
      document.body.removeChild(elink);
    } else {
      // IE10+下載
      navigator.msSaveBlob(blob,fileName);
    }
  });
};

為具體功能封裝一個元件，方便在前臺呼叫

// 評價匯出
export const getRecordExport= (params) => {
  return downloadFile('/record/export',"xlsx",params)
}

vue頁面上呼叫它，實現匯出

<script>
import {
 getReportExport
} from "@/api/index";
import util from "@/libs/util.js";

export default {
 name: "task-manage",data() {},methods: {
  exportExcel() {
   getReportExport(this.searchForm).then(res=>{});
  }
 }
}

截圖

到此這篇關於vue使用axios實現excel檔案下載的功能的文章就介紹到這了,更多相關vue實現excel檔案下載內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！