當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

js下载文件及命名（兼容多浏览器）

發(fā)布時(shí)間：2025/4/16 HTML 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 js下载文件及命名（兼容多浏览器）小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

js文件下載 ; 文件下載方法 ; IE中文件下載的方法 ; 使用IE下載 ; 文件下載兼容性 ; a標(biāo)簽下載 ; 瀏覽器下載

函數(shù)功能：實(shí)現(xiàn)主流瀏覽器的文件下載功能；

兼容性： >=IE10,Edge,chrome,firefox;

與后臺(tái)的請(qǐng)求方式：GET請(qǐng)求， ?url攜帶參數(shù)? url？id=123(隱藏文件真實(shí)路徑)；

實(shí)現(xiàn)下載功能的前提是判斷出瀏覽器類型：

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

下載函數(shù)定義：如下

dlFile ： function(options) {var that = this;var url = options.url;url += "?" + $.param(options.data); //這里也可以不用jqvar xhr = new XMLHttpRequest(); //發(fā)起請(qǐng)求xhr.open('get', url);xhr.responseType = 'blob'; //規(guī)定響應(yīng)為流文件 xhr.send();xhr.onreadystatechange = function(){if (this.readyState == 4){if (this.status == '401' || this.status == '402') {//在這里可以進(jìn)行一些請(qǐng)求失敗的處理 }else if(this.status == 200) {var currentBrowserType = that.browserType(); //判斷瀏覽器類型見上述browserType函數(shù)；if(currentBrowserType.browser==='ie'&&(currentBrowserType.version == "10.0" || currentBrowserType.version == "11.0")){ //如果IE創(chuàng)建iframe對(duì)象來(lái)下載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標(biāo)簽的下載功能實(shí)現(xiàn)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 { //其他現(xiàn)代瀏覽器采用H5的a標(biāo)簽新特性實(shí)現(xiàn)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已經(jīng)被放棄，直接使用a標(biāo)簽的dom節(jié)點(diǎn)click功能觸發(fā)點(diǎn)擊//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

?下載函數(shù)調(diào)用：如下

（以上方法均定義在全局對(duì)象tools中，也可以寫成自己需要的方式）

tools.dlFile({data : {"fileId":item.id},url :config.URL.downLoad,contentType : "application/json;chartset=utf-8",}) View Code

?相關(guān)知識(shí)點(diǎn)：

文件下載的最佳方法選用：博文；

使用H5 a標(biāo)簽的新特性：博文；

Blob對(duì)象及createObjectURL?和revokeObjectURL方法?: 博文；

提問(wèn)：

a標(biāo)簽?zāi)Mclick事件：你猜如下代碼能觸發(fā)頁(yè)面調(diào)轉(zhuǎn)嗎？

<!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> View Code

轉(zhuǎn)載于:https://www.cnblogs.com/wuhaozhou/p/6929394.html

總結(jié)

以上是生活随笔為你收集整理的js下载文件及命名（兼容多浏览器）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： PHP开发经常遇到的几个错误
下一篇： hibernate 管理 Session