js 实现下载文件，批量下载

a标签中的 download 属性是 h5 的标准
MDN 对于 a 标签中 download 的说明：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a

单个文件下载

1. 对于单个文件下载，使用 a 标签即可。类似下面代码：

 // 其中 url 为你文件的路径，name为给文件指定的新的名字
 <a href="url" download="name">
 // 如果不需要指定新的名字，可以用下面的方式
 <a href="url" download>

注意：

• 需要下载的文件是 同源文件，否则浏览器控制台会报 警告，类似

  
  1.png

2. 非同源文件，不要控制台报警告，可用下面的方式，即指定 a 标签的 target 属性

    // 浏览器会先打开一个空白标签页面，等下载完成会自动关闭空白标签页
    // 测试了多个浏览器，对于 IE 浏览器，不会关闭打开的 空白标签页
    <a href="url" download="name" target="_blank">
   

批量下载多个文件

创建一个隐藏的 <a> 标签，设置 href 等属性，用 JavaScript 来触发这个它的 click 事件，代码如下；

const files = ['url1', 'url2', 'url3'];
files.forEach(url => {
    const aLabel = document.createElement('a');
    const aEvent = document.createEvent('MouseEvents'); // 创建鼠标事件对象
   
    aEvent.initEvent('click', false, false);
    aLabel.href = url;
    aLabel.download = ''; // 设置下载文件名，当不需要重新命名时，可以赋值为空字符串
    // 同源文件可以不用写这句，如果非同源文件，请一定加上这句话
    // 否则每次只会下载其中一个文件就中断其余文件的下载了，控制台报和单个文件中截图的那个警告
    // aLabel.target = '_blank';
    aLabel.dispatchEvent(aEvent);
});

注意： 请注意 aLabel.target = '_blank'; 这句上面的注释