前端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)
}

秒收目錄站https://www.tomove.com.cn

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=>{});
    }
 }
}