关于文件下载1. File和Blob的关系在浏览器中打印File.__proto__ === Blob 返回true，

楔子

文件下载在日常的前端开发中使用的场景很多：比如数据的批量导出，前段时间开发过程碰到了一些小的问题，使我对浏览器中文件的下载理解又更深了一步

一些概念

1. File和Blob的关系

在浏览器中打印File.__proto__ === Blob 返回true，说明File继承自Blob，是一种特殊的二进制对象。

2. Javascript中如何触发文件的下载

主要方案是借助html5的download属性触发浏览器的下载。（推荐）
利用xlsx类似的库，去处理数据生成下载流文件。xlsx

3. window.URL

createObjectURL 用 blob 对象来创建一个 object URL(它是一个 DOMString)，我们可以用这个 object URL 来表示某个 blob 对象，这个 object URL 可以用在 href 和 src 之类的属性上。

4 html5的download属性


// 点击download会自动下载链接文件，并自定义名字为test.xlsx

<a href="https://haha.com/haha.xlsx" download='test.xlsx'>download</a>

download属性在IE下面是不支持的。解决方法有使用navigator.msSaveBlob的；参考

实现方法（以axios为例）


res.header('Content-Disposition: attachment; filename="downloaded.pdf"'); //后台配置



// 前台请求responsType:blob 配置二进制类型

axios.get("/api/order/export",{

    params:params,

    responseType:"blob"

}).then(response=>{

    const blob = new Blob(response)

    const aEle = document.createElement('a'); // 创建a标签

    const href = window.URL.createObjectURL(blob); // 创建下载的链接

    aEle.href = href;

    aEle.download = "orderList.xls"; // 下载后文件名

    document.body.appendChild(aEle);

    aEle.click(); // 点击下载

    document.body.removeChild(aEle); // 下载完成移除元素

    window.URL.revokeObjectURL(href) // 释放掉blob对象

})