利用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 文件了