原理其實很簡單，就是將文本或者JS字符串信息（即后臺返回來的在服務器上沒有具體路徑的動態文件，如導出數據功能）借助Blob轉換成二進制，然后，作為 a 標簽的 href 屬性，配合download屬性，實現下載功能，缺點是如果文件太大會下載失敗。
下面是導出數據的一個實例：
$("#exportAll").on("click",function(){ //點擊【全部導出】 //layer.load(); var province = $('#operatingData select[name=/'province/'] option:selected').val(); //查詢條件（?。? var city = $('#operatingData select[name=/'city/'] option:selected').val(); //查詢條件（市） var url = '/xxx/excelAllDownload'; //【全部導出】請求url var xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.responseType = "blob"; //返回類型blob xhr.onload = function () { //定義請求完成的處理函數 //layer.closeAll('loading'); if (this.status === 200) { var blob = this.response; var reader = new FileReader(); reader.readAsDataURL(blob); // 轉換為base64，可以直接放入a標簽href reader.onload = function (e) { var a = document.createElement('a'); // 轉換完成，創建一個a標簽用于下載 a.download = 'XX數據.xlsx'; a.href = e.target.result; $("body").append(a); // 修復firefox中無法觸發click a.click(); $(a).remove(); } }else if(this.status === 504){ alert('導出失敗，請求超時'); //layer.msg('導出失敗，請求超時', {icon: 2}); }else{ alert('導出失敗'); //layer.msg('導出失敗', {icon: 2}); } }; xhr.send("province=" + province + "&city=" + city);})上面是在服務器動態生成excel文件時使用的下載方式，因為對應的 URL 并不存在，我們就不能簡單的指定 href 屬性。
但是不同瀏覽器對 Blob （類文件對象）有不同的大小限制，這種借助Blob轉換成二進制 實現下載功能的方式并不能導出數據量過多的數據到excel文件（即不能下載太大的文件），且有兼容性問題。
所以，我們可以通過 JavaScript 對服務器發出一個請求，通知它去生成某個文件，然后把對應的 URL 返回給客戶端。代碼如下：（此時的請求結果為一個已經存在于服務器上面的靜態文件的路徑）
$("#exportAll").on("click",function(){ //點擊【全部導出】 var url = '/xxx/excelAllDownload'; //【全部導出】請求url var xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.responseType = "blob"; //返回類型blob xhr.onload = function () { //定義請求完成的處理函數 if (this.status === 200) { //方式一實現靜態文件下載，不能自定義下載文件名字 //location.href = "json/abc.xlsx"; //this.response（返回的服務器上的靜態文件路徑） //方式二實現靜態文件下載，可以自定義下載文件名字 var a = document.createElement('a'); //創建a標簽用于下載 a.download = 'XXX數據.xlsx'; a.href = "json/abc.xlsx"; //this.response（返回的服務器上的靜態文件路徑） $("body").append(a); // 修復firefox中無法觸發click a.click(); $(a).remove(); }else if(this.status === 504){ alert('導出失敗，請求超時'); }else{ alert('導出失敗'); } }; xhr.send();})以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
