js下載文件及命名（兼容多瀏覽器）

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>