关于兼容性问题：
<a href="xxx.docx" target='_blank'></a>
下载文件时，这种写法是没有兼容性问题；但是下载图片时，IE 上会出现当前页面直接打开图片的问题，即便是加了 target='_blank'。
单个文件批量下载
方法一：H5 <a> 新特性
HTML 5 里面为 <a> 标签添加了一个 download 的属性，我们可以轻易的利用它来实现下载功能。download 的属性值是可选的，它用来指定下载文件的文件名。
<a href="http://somehost/somefile.zip" download="filename.zip">Download file</a>
方法二：js
js 实现的思路是：
添加 <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';
href = url;
download = filename;
click();
remove(); // 移除掉 <a>
如果不用 H5 新特性，动态添加 <iframe>
会独立打开一个窗口，发起该请求，当请求完成后，该界面会自动关闭。
var frame = $('<iframe style="display: none;" class="multi-download"></iframe>');
frame.attr('src', url);
$(document.body).append(frame);
setTimeout(function() {
frame.remove();
}, 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) // 初始化事件对象
href = url // 设置下载地址
download = 'xxxx表' // 设置下载文件名
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) // 初始化事件对象
href = url // 设置下载地址
download = '' // 设置下载文件名
dispatchEvent(e)
}
})
使用down2的代码：
批量下载文件
$("#btn-down-files").click(function () {
if (downer.Config["Folder"] == "") { downer.open_folder(); return; }
var urls = [
{ fileUrl: "http://res2.ncmem.com/res/images/ie11.png" }
, { fileUrl: "http://res2.ncmem.com/res/images/up6.1/down.png" }
, { fileUrl: "http://res2.ncmem.com/res/images/firefox.png" }
, { fileUrl: "http://res2.ncmem.com/res/images/edge.png" }
, { fileUrl: "http://res2.ncmem.com/res/images/up6.1/cloud.png" }
, { fileUrl: "http://res2.ncmem.com/res/images/home/w.png" }
, { fileUrl: "http://res2.ncmem.com/res/images/img.png" }
];
downer.app.addUrls(urls);
});
引入head头
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>donw2-多文件演示页面</title>
<link type="text/css" href="js/down.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/down.app.js" charset="utf-8"></script>
<script type="text/javascript" src="js/down.edge.js" charset="utf-8"></script>
<script type="text/javascript" src="js/down.file.js" charset="utf-8"></script>
<script type="text/javascript" src="js/down.folder.js" charset="utf-8"></script>
<script type="text/javascript" src="js/down.js" charset="utf-8"></script>
</head>
详细配置信息可以参考我写的这篇文章：http://blog.ncmem.com/wordpress/2019/08/28/php%e6%96%87%e4%bb%b6%e6%89%b9%e9%87%8f%e4%b8%8b%e8%bd%bd/
430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
