关于兼容性问题：
<a href="xxx.docx" target='_blank'></a>
下载文件时，这种写法是没有兼容性问题；但是下载图片时，IE 上会出现当前页面直接打开图片的问题，即便是加了 target='_blank'。
2019.8.19 更
单个文件批量下载
方法一：H5 <a> 新特性
HTML 5 里面为 <a> 标签添加了一个 download 的属性，我们可以轻易的利用它来实现下载功能。download 的属性值是可选的，它用来指定下载文件的文件名。
方法二：js
js 实现的思路是：
1、添加 <a>标签
-
用 JavaScript 创建一个隐藏的
<a>标签 -
设置它的
href属性 -
设置它的
download属性 -
用 JavaScript 来触发这个它的
click事件
实现代码：假设引入了 jquery.js
var a = document.createElement('a');var url = window.URL.createObjectURL(blob);var filename = 'what-you-want.txt';a.href = url;a.download = filename;a.click();a.remove(); // 移除掉
2、如果不用 H5 新特性，动态添加 <iframe>
会独立打开一个窗口，发起该请求，当请求完成后，该界面会自动关闭。
1 var frame = $('');2 frame.attr('src', url);3 $(document.body).append(frame);4 setTimeout(function() {5 frame.remove();6 }, 1000);
兼容 IE 360兼容模式：
如果文件不是 .png .gif .jpg 这种照片格式，可采用 window.open(url, '_blank') 下载。
function isIE () { if (!!window.ActiveXObject || 'ActiveXObject' in window) { return true } else { return false } }, function download () { let url = '../../../static/cds/files/研究方案及团队情况表.docx' if (this.isIE()) { // IE window.open(url, '_blank') } else { let a = document.createElement('a') // 创建a标签 let e = document.createEvent('MouseEvents') // 创建鼠标事件对象 e.initEvent('click', false, false) // 初始化事件对象 a.href = url // 设置下载地址 a.download = 'xxxx表' // 设置下载文件名 a.dispatchEvent(e) } },
批量下载多个文件：
思路：将 url 放在一个数组里，循环数组并触发下载：
let files = ['url1', 'url2'] // 所有文件 files.forEach(url => { if (this.isIE()) { // IE window.open(url, '_blank') } else { let a = document.createElement('a') // 创建a标签 let e = document.createEvent('MouseEvents') // 创建鼠标事件对象 e.initEvent('click', false, false) // 初始化事件对象 a.href = url // 设置下载地址 a.download = '' // 设置下载文件名 a.dispatchEvent(e) } })
参考链接：