a标签中的 download
属性是 h5 的标准
MDN 对于 a 标签中 download 的说明:
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a
单个文件下载
- 对于单个文件下载,使用 a 标签即可。类似下面代码:
// 其中 url 为你文件的路径,name为给文件指定的新的名字
<a href="url" download="name">
// 如果不需要指定新的名字,可以用下面的方式
<a href="url" download>
注意:
-
需要下载的文件是 同源文件,否则浏览器控制台会报 警告,类似
- 非同源文件,不要控制台报警告,可用下面的方式,即指定 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'; 这句上面的注释