文件導出

🍉場景需求

開發後臺管理系統時，不免會涉及到文件的上傳和文件的導出。如今前端上傳文件主要採用「二進制文件流」的形式來上傳文件。上傳主要方式有如下方式：

• 前端直接傳遞雲存儲或者自身服務器，來獲取上傳文件的雲端絕對地址；
• 前端藉助後臺來實現文件的存儲和上傳，而後經後臺處理來返回文件存儲路徑。

上傳文件也根據文件格式進行分類存儲或者在上傳前進行文件的大小和格式的校驗處理，以防亂傳遞垃圾文件消耗雲盤存儲空間和浪費流量等。

🍌文件格式

後臺管理系統通常用做處理文檔數據相關，導出的數據大體分爲如下幾類：

• 用於數據統計的Excel文件，主流文件格式爲：.xls和.xlsx；
• 用於文檔通知的Word文件，主流文件格式爲：.doc和.docx；
• 用於幻燈片的PowerPoint文件，主流文件格式爲：.ppt和.pptx；

🍊文件導出

1. 從後臺API獲取二進制流文件地址，進行處理；

2. 配置前端請求方式，以 blob 的方式請求獲取文件流；

3. 經過 URL.createObjectURL() 靜態方法建立一個 DOMString ；

4. 動態建立用於文件下載的 a 標籤，並賦值 herf 和 download屬性，並觸發該標籤的點擊事件；

5. 經過 URL.revokeObjectURL() 靜態方法來釋放以前經過 URL.createObjectURL() 建立的 URL 對象。

🍎代碼實例

/* 時間戳 */
const timeStamp = () => {
    const date = new Date();

    let yyyy = date.getFullYear(),
        MM = date.getMonth() + 1,
        dd = date.getDate(),
        hh = date.getHours(),
        mm = date.getMinutes(),
        ss = date.getSeconds();
    // 補0
    MM = MM < 10 ? "0" + MM : MM;
    dd = dd < 10 ? "0" + dd : dd;
    hh = hh < 10 ? "0" + hh : hh;
    mm = mm < 10 ? "0" + mm : mm;
    ss = ss < 10 ? "0" + ss : ss;

    let timeStr = `${yyyy}${MM}${dd}${hh}${mm}${ss}`;
    return timeStr;
};

/* 導出數據 */
const exportData = () => {
    // 所需參數
    let params = {};

    axios
        .get("API", { responseType: "blob", params })
        .then(res => {
            setTimeout(() => {
                // 獲取文件流，生成 URL 對象
                let url = window.URL.createObjectURL(res.data);
                // 建立用於下載的 a 標籤
                let link = document.createElement("a");
                // 隱藏動態建立的 a 標籤
                link.style.display = "none";
                // 設置 herf 屬性並賦值生成的 url 文件地址
                link.href = url;
                // 生成時間戳
                let timeStr = timeStamp();
                /**
                 * 重命名文件名
                 * 格式必須以 「.文件格式後綴名」的形式結尾
                 *  */
                let fileName = `${timeStr}.xls`;
                // 設置被下載的超連接目標
                link.setAttribute("download", fileName);
                // 觸發 a 標籤跳轉
                link.click();
                // 釋放 URL 對象
                window.URL.revokeObjectURL(url);
            }, 500);
        })
        .catch(err => {
            console.log("導出失敗：", err);
        });
};

🚐注：文件後綴名根據要求進行定義。

// 文件命名格式

// 5位數隨機數
let timeStr = parseInt(Math.random(0, 1) * 1e5);

// 當前時間戳
let timeStr = new Date().toLocaleString();

// 獲取headers中的文件名
let fileName = res.headers["content-disposition"].split(";")[1].split("filename=")[1];

🐻注：上述「獲取headers中的文件名」爲在請求接口時後臺攜帶的文件名，若「無」則需自定義文件名。