1. 程式人生 > 實用技巧 >前端通用下載檔案方法(相容IE)

前端通用下載檔案方法(相容IE)

因為專案要求要相容IE瀏覽器,所以完善了一下之前博主的方法

  • IE 瀏覽器:使用微軟自帶的msSaveBlob 方法,a標籤的download屬性不支援IE
  • 谷歌瀏覽器,火狐瀏覽器:建立a標籤 ,新增download屬性,模擬滑鼠點選事件

//這裡res.data是返回的blob物件
        var blob = new Blob([res.data.fileData], {type: 'application/json;charset=utf-8'}); //application/vnd.openxmlformats-officedocument.wordprocessingml.document這裡表示doc型別
var href = window.URL.createObjectURL(blob); //建立下載的連結 if (window.navigator.msSaveBlob) { try { window.navigator.msSaveBlob(blob, 'model.json') } catch (e) { console.log(e); } } else { // 谷歌瀏覽器 建立a標籤 新增download屬性下載 var
downloadElement = document.createElement('a'); downloadElement.href = href; downloadElement.target = '_blank'; downloadElement.download = 'model.json'; //下載後文件名 document.body.appendChild(downloadElement); downloadElement.click(); //點選下載 document.body.removeChild(downloadElement); //
下載完成移除元素 window.URL.revokeObjectURL(href); //釋放掉blob物件 }

參考連結:http://blog.haoji.me/js-download.html#JS-dan-chu-xia-zai-dui-hua-kuang