1、在html5中 a 标签多了一个属性?>download,用户点击a链接浏览器会打开并显示该链接的内容,若在a链接中加了 download 属性,点击该链接就不会打开这个文件,而是直接下载。
注意,download是html5中的a标签的新特性,所以(不支持h5)的低版本浏览器不兼容!
(1)单个文件
<a download="xxx.mp3的文件名" href="http://www.xxx.com/upload/xxx.mp3">音乐下载</a>
(2)多个文件
<button type="button" onclick="rizhi()">
<a href="" id="a">下载日志</a>
</button>
//将要进行多文件下载的文件地址,以组数的形式存起来(这里只例了3个地址)
var mp3arr = ["http://192.168.15.128:9888/work.log","http://192.168.15.128:9888/control.log","http://192.168.15.128:9888/encoder.log"];
var namez = ["work.log","control.log","encoder.log"]
function download(name, href) {
var a = document.createElement("a"), //创建a标签
e = document.createEvent("MouseEvents"); //创建鼠标事件对象
e.initEvent("click", false, false); //初始化事件对象
a.href = href; //设置下载地址
a.download = name; //设置下载文件名
a.dispatchEvent(e); //给指定的元素,执行事件click事件
}
function rizhi(){
//给多文件下载按钮添加点击事件
for (let index = 0; index < mp3arr.length; index++) {
download(namez[index], mp3arr[index]);
}
}