通過一次導出功能是讓自己如何一步一步掉坑最后又是怎么爬起來的

在頁面中通過document.createElement('a');創建一個a標簽，然后給a標簽的href屬性賦url，通過代碼觸發a標簽的click事件請求后臺，在Chrome瀏覽器中請求正常，但是在Firefox中始終無效，debugger發現代碼也走到了a.click()方法，但是就是沒反應。代碼如下：

$.ajax({url: Config.ApiUrl + "TZTZ/DowloadFile", type: "Post",dataType: "json",contentType: 'application/json',data: JSON.stringify(datas),success: function (data) {debuggervar strs = new Array(); //定義數組 if (data.Code == 200) {strs = data.Data.split(";"); //字符分割 console.info(strs);for (i = 0; i < strs.length; i++) {if (strs[i] == ";" || strs[i] == "")break;var requestUrl = Config.ApiSite + "/Upload/Excel/" + strs[i];console.info(requestUrl);var a = document.createElement('a');// 利用URL.createObjectURL()方法為a元素生成blob URLa.href = requestUrl;// 給文件命名a.download = strs[i];// 模擬點擊(Firefox安全機制禁止了客戶端程序員模擬點擊)a.click();} } else {alert("導出異常：" + data.msg);}}});

第一次是直接創建一個a標簽去通過a標簽的download屬性模擬用戶點擊，但是發現a標簽在火狐瀏覽器上是失效的，通過百度得出答案是因為火狐瀏覽器的同源策略不允許用戶模擬點擊事件也可能是因為Firefox的安全機制不允許開發這么做，后面就做了兼容，關鍵代碼如下：

if (navigator.userAgent.indexOf("Firefox") > -1){//判斷是否Firefox瀏覽器//window.open(requestUrl);window.location.href = requestUrl;}else {var a = document.createElement('a');// 利用URL.createObjectURL()方法為a元素生成blob URLa.href = requestUrl;// 給文件命名a.download = strs[i];// 模擬點擊a.click();}

注意：這樣通過重定向取做導出excel對于單條數據是沒問題的，但是導出多條對的話就會發現
循環window.location.href下載文件卻只執行最后一個,每次都跑到了,但是只下載了循環的最后一個,這是因為頁面跳轉和下載是異步的，上一條還沒來得及跳轉呢，你又跳轉了

網上看到有人說判斷document.all來決定怎樣調用click事件

if(document.all) {a.click(); } else { var evt = document.createEvent("MouseEvents"); evt.initEvent("click",true,true); a.dispatchEvent(evt); }

但是仍然不行，再次debugger發現，在Firefox下document.all不為空，因此還是執行的a.click()方法，改為不判斷document.all，直接創建鼠標事件對象調用。最后完整代碼如下：

$.ajax({url: Config.ApiUrl + "TZTZ/DowloadFile", type: "Post",dataType: "json",contentType: 'application/json',data: JSON.stringify(datas),success: function (data) {debuggervar strs = new Array(); //定義數組 if (data.Code == 200) {strs = data.Data.split(";"); //字符分割 console.info(strs);for (i = 0; i < strs.length; i++) {if (strs[i] == ";" || strs[i] == "")break;var requestUrl = Config.ApiSite + "/Upload/Excel/" + strs[i];console.info(requestUrl);var a = document.createElement('a');// 利用URL.createObjectURL()方法為a元素生成blob URLa.href = requestUrl;// 給文件命名a.download = strs[i];// 模擬點擊(Firefox安全機制禁止了客戶端程序員模擬點擊)//a.click();var evt = document.createEvent("MouseEvents");evt.initEvent("click", true, true);a.dispatchEvent(evt); } } else {alert("導出異常：" + data.msg);}}});

轉載于:https://www.cnblogs.com/imtudou/p/11251953.html

總結

以上是生活随笔為你收集整理的Firefox下代码触发a标签的click事件无效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。