文件下載的ie11兼容性優化


  在 http://www.cnblogs.com/sunshine6/p/8296945.html 中有說關於前后端分離時如何實現文件下載的功能,但是過完年回來,同事告訴我這個方式在ie11上存在不兼容的問題,報如下錯:

  瀏覽器兼容問題是很頭疼的問題,因為之前也沒遇到過這樣的問題,所以經過兩三個小時才解決。

  發現在微軟在ie10 和ie11中有兩個特有的方法:window.navigator.msSaveBlobwindow.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    }

 

  如果有什么不當之處,請大家多多指出。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM