業務場景是一條數據對應多個文件，需要一次性全部下載，不考慮在服務端把多個文件打包下載，想通過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文件，會直接在瀏覽器中顯示出來，待解決。