IE瀏覽器a標簽無法下載問題解決(IE瀏覽器a標簽download屬性不兼容問題解決)


//下載文件流函數,只支持get方法。
export function downBlob(payload) {

return new Promise(((resolve, reject) => {
// 獲取時間戳
let timestamp=new Date().getTime();
// 獲取XMLHttpRequest
let xmlResquest = new XMLHttpRequest();
// 發起請求
xmlResquest.open("GET", payload.url +"?"+ (payload.param), true);
// 設置請求頭類型
xmlResquest.setRequestHeader("Content-type", "application/json");

//返回類型為文件流
xmlResquest.responseType = "blob";
// 返回
xmlResquest.onload = function(oEvent) {
let content = xmlResquest.response;

//請求失敗
if(xmlResquest.status === 404){
message.error("文件不存在,請稍后再試");
return;
}

//請求失敗
if(xmlResquest.status != 200){
message.error("網絡錯誤,請稍后再試");
return;
}
//
let reader = new FileReader();
reader.onload = function(event){
//json成功表示服務器報錯,將錯誤信息提示出來
try {
let result = JSON.parse(reader.result);
message.error(result.errorMsg)
reject(result);
}catch (e) {
//json化失敗,表示是一個文件流,將文件流下載下來
// 組裝a標簽
 

if('msSaveOrOpenBlob' in navigator){

     window.navigator.msSaveOrOpenBlob(blob, fileName);

     return;

 }

let elink = document.createElement("a");
// 設置下載文件名
elink.download = payload.fileName || timestamp + ".xlsx";
elink.style.display = "none";
let blob = new Blob([content]);
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
document.body.removeChild(elink);
resolve();
}
};
reader.readAsText(content);
};
xmlResquest.send();
}));


}
 
 
或者

//文件地址 var url = '../aaa/bbb/模板.xlsx'; var 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, '模板.xlsx') } catch (e) { console.log(e); } } else { // 谷歌瀏覽器 創建a標簽 添加download屬性下載 var downloadElement = document.createElement('a'); downloadElement.href = href; downloadElement.target = '_blank'; downloadElement.download = '模板.xlsx'; //下載后文件名 document.body.appendChild(downloadElement); downloadElement.click(); //點擊下載 document.body.removeChild(downloadElement); //下載完成移除元素 window.URL.revokeObjectURL(href); //釋放掉blob對象 } } } // 發送ajax請求 xhr.send()
 
 
 
-------------------------------------------------------

代碼:

var wb;//讀取完成的數據
function importf(obj) {//導入
//判斷FileReader是否存在,FileReader是實現純前端導入的必要方法
if (typeof (FileReader) != "undefined") {
//判斷是否可以使用readAsBinaryString,IE10瀏覽器沒有的情況下用readAsArrayBuffer,手動將文件流轉二進制字符串(fixdata方法在下方)
if (!FileReader.prototype.readAsBinaryString) {
var f = obj.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var data = e.target.result;
wb = XLSX.read(btoa(fixdata(data)), {
type: 'base64'
});
//此處showImportVehicles是我接下來展示數據的方法,紅色部分可拿到Excel中第一列的具體數值,其他列自然也可以容易獲取
window.parent.page
.showImportVehicles(JSON.stringify(XLSX.utils
.sheet_to_csv(wb.Sheets[wb.SheetNames[0]])));
};
reader.readAsArrayBuffer(f);
} else {
//不需要兼容IE10及以下版本瀏覽器時可用readAsBinaryString
var f = obj.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var data = e.target.result;
wb = XLSX.read(data, {
type: 'binary'
});
window.parent.page.showImportVehicles(JSON.stringify(XLSX.utils.sheet_to_csv(wb.Sheets[wb.SheetNames[0]])));
};
reader.readAsBinaryString(f);
}
} else {
//IE9及以下版本瀏覽器,沒有FileReader方法時,無法實現純前端導入Excel,這時在后端獲取文件內容再返回前端,更加方便快捷
$.ajaxFileUpload
({
url: "/etims-track/track/importVehicles",
secureuri: false,
fileElementId: 'excelFile',
timeout: 600000,
success: function (data) {
var str = data.body.innerHTML;//獲取返回的字符串
window.parent.page.showImportVehicles(str);
},
error: function (data, status, e) {
}
})
}

}

function fixdata(data) { //文件流轉BinaryString
var o = "";
var bytes = new Uint8Array(data);
for (var i = 0; i < data.byteLength; i++) {
o += String.fromCharCode(bytes[i]);
}
return o;
}

注:兼容IE9及以下版本使用ajaxFileUpload向后端傳文件的兼容處理:

在ajaxfileupload.js文件中有這樣一段代碼:
if(window.ActiveXObject) {
if(jQuery.browser.version=="9.0" || jQuery.browser.version=="10.0"){
var io = document.createElement('iframe');
io.id = frameId;
io.name = frameId;
}else if(jQuery.browser.version=="6.0" || jQuery.browser.version=="7.0" || jQuery.browser.version=="8.0"){
var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
if(typeof uri== 'boolean'){
io.src = 'javascript:false';
}
else if(typeof uri== 'string'){
io.src = uri;
}
}
}
這段代碼已經是在想辦法去兼容瀏覽器版本了,但在IE9版本瀏覽器下,無法識別JQuery.browser.version,也就是無法識別瀏覽器版本version,因此修改成以下代碼:

if(window.ActiveXObject) {
var ieVersion = navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE","");
if(ieVersion=="9.0" || ieVersion=="10.0"){
var io = document.createElement('iframe');
io.id = frameId;
io.name = frameId;
}else if(ieVersion=="6.0" || ieVersion=="7.0" || ieVersion=="8.0"){
var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
if(typeof uri== 'boolean'){
io.src = 'javascript:false';
}
else if(typeof uri== 'string'){
io.src = uri;
}
}
}
這里的ieVersion獲取到的就是IE瀏覽器的版本,就可以解決兼容性問題。

另:在通過后端獲取Excel文件中內容時,除了通過ajaxFileUpload方式,也可以使用Jquery form表單提交的形式。


免責聲明!

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



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