函数功能：实现主流浏览器的文件下载功能；
兼容性： >=ie10,edge,chrome,firefox;
与后台的请求方式：get请求， url携带参数 url？id=123(隐藏文件真实路径)；
实现下载功能的前提是判断出浏览器类型：
browsertype: function(){var useragent = navigator.useragent.tolowercase();// figure out what browser is being usedvar testcenter = { ie:function isie() { //ie?if (!!window.activexobject || activexobject in window)return true;elsereturn 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; } } },
view code
下载函数定义：如下
dlfile ： function(options) {var that = this;var url = options.url; url += ? + $.param(options.data); //这里也可以不用jqvar 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); //告诉浏览器可以释放该路径 } } } }; },
view code
下载函数调用：如下
（以上方法均定义在全局对象tools中，也可以写成自己需要的方式）
tools.dlfile({ data : {fileid:item.id}, url :config.url.download, contenttype : application/json;chartset=utf-8, })
view code
相关知识点：
文件下载的最佳方法选用：博文；
使用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?1.1.11"></script><script>$(button).click(function(){ alert(123) $(#hehe).click(); })</script></body></html>
view code
以上就是js文件下载及命名的详细内容。