JavaScript文件下载

当 HTML 的 a 标签指向一个文件时，设置 a 标签的 download 属性，可以在点击时触发浏览器的下载，实现指定文件的下载。

下载原理

在HTML5里 <a> 标签的链接指向一个文件时，点击 <a> 标签会触发浏览器的下载

<a href='url'>Download File</a>

如果 <a> 指向的文件是浏览器支持直接打开的文件时（例如：图片、音视频等），必须要添加 <a> 标签的 download 属性，属性值为下载文件的名称（包含扩展名）

<a href='url' download='FileName'>Download File</a>

单个文件下载

在实际应用中，经常遇到文件链接为非固定值，需要在 js 里进行获取拼接，因此需要用 js 创建 <a> 标签进行操作：

• 创建 <a> 标签
• 添加 href 和 download 属性
• 添加 <a> 标签到页面（在Chrome浏览器可以不添加到页面）
• 触发 <a> 标签的点击事件
• 从页面移除 <a> 标签

let link = document.createElement('a');
link.href = url;
link.download = 'download.txt';
document.body.appendChild(link);
link.click();
link.remove();

有时候在 js 里拿到的不是一个文件的链接，而是一个 blob 对象，这时就需要用 window.URL.createObjectURL 方法创建一个链接，并在触发点击下载后调用 window.URL.revokeObjectURL 方法删除链接对象：

let link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'download.txt';
document.body.appendChild(link);
link.click();
window.URL.revokeObjectURL(link.href);
link.remove();

多个文件下载

多文件下载和单文件下载类似，需要注意的是在同时触发多次下载事件时，浏览器会取消前几次的下载，只执行最后一次下载，所以需要使用 setTimeout 方法对下载进行延迟执行。

let urls = ['url1', 'url2'];
urls.forEach((item, index) => {
    let link = document.createElement('a');
    link.href = item;
    document.body.appendChild(link);
    setTimeout(function(){
        this.click();
        this.remove();
    }.bind(link), index * 1000);
});