业务场景是一条数据对应多个文件，需要一次性全部下载，不考虑在服务端把多个文件打包下载，想通过js点击事件向服务端发送多个请求进行下载。在网上找了一篇文章http://www.2cto.com/kf/201501/367538.html，参照它的内容开始写代码。
(function ($) {
var methods = {
_download: function () {
this.each(function (index, item) {
methods._createLink(item);
});
},
//download属性设置
_createLink: function (url, triggerDelay, removeDelay) {
var content = document.getElementById("content");
var aLink = document.createElement("a");
content.appendChild(aLink);
aLink.download = "";
aLink.onclick = function () {
window.open(url);
}
if (document.createEventObject) {
// IE浏览器支持fireEvent方法
var evt = document.createEventObject();
if (aLink.fireEvent) {
aLink.fireEvent("onclick");
}
}
else {
// 其他标准浏览器使用dispatchEvent方法
var evt = document.createEvent('HTMLEvents');
evt.initEvent("click", true, true);
aLink.dispatchEvent(evt);
}
}
};
$.fn.multiDownload = function () {
methods._download.apply(this, arguments);
};
})(jQuery);
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/download.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#download").click(function () {
var downloadUrl = ['download.aspx?id=1', 'download.aspx?id=2'];
$(downloadUrl).multiDownload();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<a id='download' href="#">下载</a>
<div id="content"></div>
</form>
</body>
</html>
download.aspx代码：
protected void Page_Load(object sender, EventArgs e)
{
string str = string.Empty;
if (!string.IsNullOrEmpty(Request["id"]))
{
if (Request["id"] == "1") str = "one";
if (Request["id"] == "2") str = "two";
}
byte[] bytes = System.Text.Encoding.Default.GetBytes(str);
Response.ContentType = "application/octet-stream";
//通知浏览器下载文件而不是打开
Response.AddHeader("Content-Disposition", "attachment; filename=" + HttpUtility.UrlEncode(str + ".txt", System.Text.Encoding.UTF8));
Response.BinaryWrite(bytes);
Response.Flush();
Response.End();
}
到此两个文件可以同时下载了。
在整个过程中碰到的问题：
1.各浏览器兼容的事件驱动器函数
IE9+,标准浏览器：dispatchEvent;IE8-:fireEvent;
2.动态创建元素元素语法报错
一个动态创建的元素对应一个下载文件，事先不知道需要下载多少个文件，所以需要使用动态创建元素。
通过var link= document.createElement("a")创建的元素，在IE8中调用link元素的事件驱动函数时，报未知名的错误，如：link.fireEvent("onclick");
在IE9+中调用link元素的事件驱动函数时，语法正常，但是没有触发事件，如：link.dispatchEvent("click");
标准浏览器中正常；
解决方案：在表单中通过html标签创建一个div元素，将动态创建的元素添加到div元素中，上面的问题就解决了，但是没有找原理，欢迎指点。
3.下载文件方式
超链接.href=下载文件url；
标准浏览器正常，IE9+只能下载最后一个文件，IE8-没有反应；
window.location.href=下载文件url；
各种浏览器都只能下载最后一个文件，经验证，它是等函数中所有代码都执行完成在执行跳转，所以最后一次的url会把前面的url覆盖；
window.open(下载文件url)
各种浏览器终于都能正常下载，因为我这边在被下载页面中显示声明输出的下载文件，如：Response.AddHeader("Content-Disposition","attachment..."); 但是如果直接下载图片或者txt文件，会直接在浏览器中显示出来，待解决。
4431
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
