有些時候上傳的文件名會重複,後臺工程師就會在存入數據庫時文件路徑加上隨機數,文件名單獨存個字段;
在谷歌上下載文件時,只要後臺返回了文件名,就可以使用a標籤的download屬性寫成文件名,就可以保持原樣下載下來,但是IE瀏覽器就不認識download屬性,導致下載下來的文件名就是路徑裏面的名字(帶上了隨機數)。這樣用戶體驗不好。
所以多方查找資料,寫了一個方法,讓我們可以讓文件保持原來的名字下載下來。這裏記錄一下:
/**
* 兼容ie 附件下載
* urls: 文件相對地址
* name: 文件下載名字
*/
commonDowloadFile: function(urls, name) {
//文件地址
let url = urls;
let xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.responseType = "blob"; // 返回類型blob
// 定義請求完成的處理函數,請求前也可以增加加載框/禁用下載按鈕邏輯
xhr.onload = function() {
// 請求完成
if (this.status === 200) {
// 返回200
var blob = this.response;
var href = window.URL.createObjectURL(blob); //創建下載的鏈接
//判斷是否是IE瀏覽器,是的話返回true
if (window.navigator.msSaveBlob) {
try {
window.navigator.msSaveBlob(blob, name)
} catch (e) {
console.log(e);
}
} else {
// 谷歌瀏覽器 創建a標籤 添加download屬性下載
var downloadElement = document.createElement('a');
downloadElement.href = href;
downloadElement.download = name; //下載後文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //點擊下載
document.body.removeChild(downloadElement); //下載完成移除元素
window.URL.revokeObjectURL(href); //釋放掉blob對象
}
}
}
// 發送ajax請求
xhr.send()
},