zoukankan      html  css  js  c++  java
  • vue,用axios或原生xhr下载文件流,在ie(11)中下载xlsx文件乱码或文件损坏。求解?

    图片描述

    图片描述

    图片描述

    图片描述

    问题描述

    这个问题只在ie中存在,这个要怎么搞

    相关代码

    // 这是axios
    this.instance.get(file/download/${arg.id},{

                    responseType: "arraybuffer"
                })
                    .then(({data}) => {
    
                        let blob = new Blob([data], {type: 'application/vnd.ms-excel'});
                        if (window.navigator.msSaveOrOpenBlob) {
                            console.log('IE浏览器');
                            window.navigator.msSaveOrOpenBlob(blob, arg.name);
                        } else {
                            let objectUrl = URL.createObjectURL(blob); 
                            let link = document.createElement('a');
                            link.style.display = 'none';
                            link.href = objectUrl;
                            link.setAttribute('download', arg.name);
                            document.body.appendChild(link);
                            link.click();
                            console.log('非IE浏览器');
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    })
                    

    // 我看网上有说用xhr写试一下,我就用xhr试了一下,结果一样
    let xhr = new XMLHttpRequest();

                xhr.open("get", `file/download/${arg.id}`, true);
                xhr.responseType="blob";
                xhr.onload = function () {
                    if (this.status === 200) {
                        let blob = new Blob([this.response], {type: 'application/vnd.ms-excel'});
                        if (window.navigator.msSaveOrOpenBlob) {
                            console.log('IE浏览器');
                            window.navigator.msSaveOrOpenBlob(blob, arg.name);
                        } else {
                            let objectUrl = URL.createObjectURL(blob); 
                            let link = document.createElement('a');
                            link.style.display = 'none';
                            link.href = objectUrl;
                            link.setAttribute('download', arg.name);
                            document.body.appendChild(link);
                            link.click();
                            console.log('非IE浏览器');
                        }
                    }
                }
                xhr.send();

    // 这是chrome请求的
    图片描述

    // 这是用IE请求的
    图片描述

    目前发现的区别是chrome返回的正文有东西,而IE返回的不管是响应或请求都没有正文。
    图片描述

    图片描述

  • 相关阅读:
    shp2pgsql向postgresql导入shape数据
    node.js的Promise库-bluebird示例
    iOS中点击事件失效的解决办法
    [PHP] 获取IP 和JS获取IP和地址
    [Bootstrap ] 模态框(Modal)插件
    [html][javascript] 关于SVG环形进度条
    [javascript] js实现小数的算术运算方法
    [GO] linux 下安装GO
    小知识点:session的存放位置
    [linux] linux的top命令参数详解
  • 原文地址:https://www.cnblogs.com/wl-blog/p/13693471.html
Copyright © 2011-2022 走看看