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返回的不管是响应或请求都没有正文。
    图片描述

    图片描述

  • 相关阅读:
    activiti5.13 框架 数据库表结构说明
    c3p0详细配置
    linux+nginx+tomcat负载均衡,实现session同步
    Lvs+Keepalived+MySQL Cluster架设高可用负载均衡Mysql集群
    java jstack dump 线程 介绍 解释
    JVM性能调优监控工具jps、jstack、jmap、jhat、jstat、hprof使用详解
    CheckStyle使用手册(一)
    checkstyle使用介绍
    memcache启动多个服务
    temp
  • 原文地址:https://www.cnblogs.com/wl-blog/p/13693471.html
Copyright © 2011-2022 走看看