在 http://www.cnblogs.com/sunshine6/p/8296945.html 中有說關於前后端分離時如何實現文件下載的功能,但是過完年回來,同事告訴我這個方式在ie11上存在不兼容的問題,報如下錯:
瀏覽器兼容問題是很頭疼的問題,因為之前也沒遇到過這樣的問題,所以經過兩三個小時才解決。
發現在微軟在ie10 和ie11中有兩個特有的方法:window.navigator.msSaveBlob
和window.navigator.msSaveOrOpenBlob 方法,這兩個方法的區別在於,前者只有保存,后者有保存和打開兩個選項,按個人喜好使用就行。
優化之后的代碼如下:
1 /** 2 * 導出用戶列表 3 */ 4 private exportUsers(){ 5 this.http.doPost({ 6 url: 'system/sysmanager/user/exportUsers', 7 responseType:ResponseContentType.Blob, 8 body:this.form, 9 success: (req, res) => { 10 if(window.navigator.msSaveOrOpenBlob){ 11 // 兼容ie11 12 try{ 13 var blobObject = new Blob([res.json()]); 14 window.navigator.msSaveOrOpenBlob(blobObject, "用戶列表.xlsx"); 15 } 16 catch(e){ 17 console.log(e); 18 } 19 } 20 else{ 21 var blob = new Blob([res.json()]); 22 var a = document.createElement('a'); 23 a.href = URL.createObjectURL(blob); // xhr.response is a blob 24 a.download = "用戶列表.xlsx"; 25 a.style.display = 'none'; 26 document.body.appendChild(a); 27 a.click(); 28 a.remove(); 29 } 30 } 31 }); 32 }
如果有什么不當之處,請大家多多指出。