js文件下载 ; 文件下载方法 ; IE中文件下载的方法 ; 使用IE下载 ; 文件下载兼容性 ; a标签下载 ; 浏览器下载
函数功能：实现主流浏览器的文件下载功能；
兼容性： >=IE10,Edge,chrome,firefox;
与后台的请求方式：GET请求， url携带参数 url？id=123(隐藏文件真实路径)；
实现下载功能的前提是判断出浏览器类型：
browserType: function(){
var userAgent = navigator.userAgent.toLowerCase();
// Figure out what browser is being used
var testCenter = {
ie:function isIE() { //ie?
if (!!window.ActiveXObject || "ActiveXObject" in window)
return true;
else
return false;
},
edge : ()=>{ return /dge/.test(userAgent) },
chrome:()=>{ return /chrome/.test(userAgent)},
safari: ()=>{ return /safari/.test(userAgent)&&!(/chrome/.test(userAgent))},
opera: ()=>{ return /opera/.test(userAgent) } ,
msie: ()=>{ return /msie/.test(userAgent) && !/opera/.test(userAgent) },
mozilla: ()=>{ return /mozilla/.test(userAgent) && !/(compatible|webkit)/.test(userAgent) }
};
var browserObj = {};
for(var k in testCenter){
var result = testCenter[k]();
var version = (userAgent.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [])[1];
if(result){
browserObj.browser = k;
browserObj.version = version;
return browserObj;
}
}
},
下载函数定义：如下
dlFile ： function(options) {
var that = this;
var url = options.url;
url += "?" + $.param(options.data); //这里也可以不用jq
var xhr = new XMLHttpRequest(); //发起请求
xhr.open('get', url);
xhr.responseType = 'blob'; //规定响应为流文件
xhr.send();
xhr.onreadystatechange = function(){
if (this.readyState == 4){
if (this.status == '401' || this.status == '402') {
//在这里可以进行一些请求失败的处理
}
else if(this.status == 200) {
var currentBrowserType = that.browserType(); //判断浏览器类型 见上述browserType函数；
if(currentBrowserType.browser==='ie'&&(currentBrowserType.version == "10.0" || currentBrowserType.version == "11.0")){ //如果IE创建iframe对象来下载
var href = window.URL.createObjectURL(this.response);
var elemIF = document.createElement("iframe");
elemIF.src = "http://" + location.host + '/crowd-web/file/downloadFile?' + $.param(options.data);
elemIF.style.display = "none";
document.body.appendChild(elemIF);
}else if( currentBrowserType.browser==='edge'){ //如果edge使用h5的a标签的下载功能实现
if (this.getResponseHeader("content-disposition")) {
var fileName = decodeURI(this.getResponseHeader("content-disposition").replace("attachment;filename=", ""));
}
var href = "http://" + location.host + '/crowd-web/file/downloadFile?' + $.param(options.data);
var $dllink = $('<a href="' + href + '" download="' + fileName + '" ></a>').appendTo(document.body);
$dllink[0].click();
window.URL.revokeObjectURL(href);
} else { //其他现代浏览器采用H5的a标签新特性实现
var href = window.URL.createObjectURL(this.response);
if (this.getResponseHeader("content-disposition")) {
var fileName = decodeURI(this.getResponseHeader("content-disposition").replace("attachment;filename=", ""));
}
var $dllink = $('<a href="' + href + '" download="' + fileName + '" ></a>').appendTo(document.body);
//initMouseEvent已经被放弃，直接使用a标签的dom节点click功能触发点击
//var event = document.createEvent("MouseEvents");
//event.initMouseEvent(
// "click", true, false, window, 0, 0, 0, 0, 0
// , false, false, false, false, 0, null
//);
//$dllink[0].dispatchEvent(event);
$dllink[0].click();
window.URL.revokeObjectURL(href); //告诉浏览器可以释放该路径
}
}
}
};
},
下载函数调用：如下
（以上方法均定义在全局对象tools中，也可以写成自己需要的方式）
tools.dlFile({
data : {"fileId":item.id},
url :config.URL.downLoad,
contentType : "application/json;chartset=utf-8",
})
相关知识点：
文件下载的最佳方法选用：博文；
使用H5 a标签的新特性：博文；
Blob对象及createObjectURL 和revokeObjectURL方法 : 博文；
提问：
a标签模拟click事件： 你猜如下代码能触发页面调转吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<a href="http://www.baidu.com" id="hehe">百度</a>
<button>跳到百度</button>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script>
$("button").click(function(){
alert(123)
$("#hehe").click();
}) </script>
</body>
</html>