zoukankan      html  css  js  c++  java
  • 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表单提交的形式。
  • 相关阅读:
    两行文字,溢出隐藏,并显示省略号
    vue的操作:使用手机访问电脑的页面做法如下:
    width: calc(100%
    路由配置
    安装node.js 和 npm 的完整步骤
    懒加载图片轮播,总结完美可用
    Canvas 总结,到第4章 canvas图形变换
    封装表单自定义错误信息。(阻止默认错误信息提示,添加自定义错误信息提示)
    判断指定对象是否进入浏览器可视窗口,true 进入,false 没进入
    单张图片,多张图标为一个轮播对象的轮播图:按需加载 和 非按需加载
  • 原文地址:https://www.cnblogs.com/xuLessReigns/p/12177115.html
Copyright © 2011-2022 走看看