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标签

 

p.p1 { margin: 0; font: 13px "Helvetica Neue"; color: rgba(0, 0, 0, 1) }

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()

 

 

 

-------------------------------------------------------

JQUERY纯前端导入EXCEL文件，兼容IE10及IE9版本以下浏览器处理方法

代码:

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表单提交的形式。