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

    图片描述

  • 相关阅读:
    04-基本的mysql语句
    03-MySql安装和基本管理
    02-数据库的概述
    MySql的前戏
    Python3连接MySQL数据库之pymysql模块的使用
    mockjs简单易懂
    GitHub Android 开源项目汇总 (转)
    国内云计算的缺失环节: GPU并行计算(转)
    HDFS+MapReduce+Hive+HBase十分钟快速入门
    同步和异步
  • 原文地址:https://www.cnblogs.com/wl-blog/p/13693471.html
Copyright © 2011-2022 走看看