利用Blob實現前端導出Excel,Doc等文件

前言

最近的工作中遇到了一項新的需求，即用戶需要點擊按鈕實現導出一份Excel或者Doc文檔。如何實現呢？這就需要用到 Blob 對象了。

Blob

何為 Blob ？引用MDN的話：

Blob 對象表示一個不可變、原始數據的類文件對象。它的數據可以按文本或二進制的格式進行讀取。

Blob 是一個構造函數，創建一個 Blob 的操作如下：

/** 下載excel文件流
 * @params data [Object] 文件流
 *         type [String] 數據的 MIME 類型
 */
new Blob([data], {type})

MIME 類型說明可以參考 MIME類型手冊

實現下載文件

// 以axios請求為例
axios({
    method: 'POST',
    url: xxx,// 這里是后端的接口地址
    responseType: 'blob',
    data: "傳輸的數據",
})
.then(res => {
    // 假設res表示后端發來的流數據
    let blob = new Blob([res], {type: "application/msword"}), // 此處為生成doc
    	link = document.createElement("a"),
        href = window.URL.createObjectURL(blob);
    link.href = href;
    link.download = "下載后文件的文件名";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(href); // 釋放掉blob對象
})

這樣我們就可以實現前端導出 doc 文件了