zoukankan      html  css  js  c++  java
  • js前端解决浏览器下载兼容性问题

    问题描述:js文件中有一个excel二进制流data,是后台传来的,前端负责将它下载下来,保存为 .xlsx 文件。在chrome和火狐上都没问题,偏偏ie11就是不行。

    解决途径:通过google搜索,查到github和stackoverflow上有相似问题,然后下载github的代码来看,然后解决。

    判断浏览器类型:

                            var Sys = {};
                            var ua = navigator.userAgent.toLowerCase();
                            var s;
                            (s = ua.match(/msie ([d.]+)/)) ? Sys.ie = s[1] :
                                    (s = ua.match(/firefox/([d.]+)/)) ? Sys.firefox = s[1] :
                                    (s = ua.match(/chrome/([d.]+)/)) ? Sys.chrome = s[1] :
                                    (s = ua.match(/opera.([d.]+)/)) ? Sys.opera = s[1] :
                                    (s = ua.match(/version/([d.]+).*safari/)) ? Sys.safari = s[1] : 0;
                            if (!!window.ActiveXObject || "ActiveXObject" in window || Sys.ie) {//Js判断为IE浏览器

    非IE浏览器下载写法:

                                var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,charset=UTF-8"});//"text/plain;charset=utf-8"
                                var objectUrl = window.URL.createObjectURL(blob);
                                var a = document.getElementById('downList');
                                a.href = objectUrl;
                                a.download = 'user_list';
                                a.click();

    兼容IE下载:

         var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,charset=UTF-8"});
                                saveAs(blob, "report.xlsx");


    使用到了一个js文件:FileSaver.min.js

    相关链接:

    https://github.com/SheetJS/js-xlsx

    https://github.com/eligrey/FileSaver.js

    //                        var a = document.createElement("a");
    //                        document.body.appendChild(a);
    //                        //a.style = "display: none";
    //                        var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
    //                        var objectUrl = window.URL.createObjectURL(blob);
    //                        a.href = objectUrl;
    //                        a.download = 'templdate';
    //                        a.click();
    //                        setTimeout(function () {
    //                            document.body.removeChild(a);
    //                            window.URL.revokeObjectURL(objectUrl);
    //                        }, 10000);
  • 相关阅读:
    HTTP以及TCP协议
    分布式理论
    JAVA基础面试题
    JAVA基础面试题
    vue 中百度富文本初始化内容加载失败(编辑操作某列数据时,富文本中内容偶尔会为空)
    CodeMirror的使用方法
    JSON格式化,JSON.stringify()的用法
    promise与await的用法
    服务器端node.js
    数组扁平化
  • 原文地址:https://www.cnblogs.com/littlehoom/p/4666451.html
Copyright © 2011-2022 走看看