zoukankan      html  css  js  c++  java
  • JS 在页面上直接将json数据导出到excel,支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox

    JS 在页面上直接将json数据导出到excel,支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox

    <html>
    <head>
    </head>
    <body>

    <script type="text/javascript">

    function jsexport(){
        var jsonData = [{name:"张三", sex:"男", age:46},{name:"李四", sex:"男", age:20},{name:"王五", sex:"男", age:33},{name:"赵六", sex:"男", age:80}];
       
        var GridData = JSON.parse(JSON.stringify(jsonData))
        JSONToCSV(GridData, "UserReport.csv", true);
    }

    var blob;
    var filename;
    function c(){
    window.navigator.msSaveOrOpenBlob(blob, filename);
    }

    function JSONToCSV(JSONData, ReportName, ShowLabel) {
        var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
        var CSV = '';    
        if (ShowLabel) {
            var row = "";
            
            for (var index in arrData[0]) {
                row += index + ',';
            }
            row = row.slice(0, -1);
            CSV += row + ' ';
        }
        
        for (var i = 0; i < arrData.length; i++) {
            var row = "";
            for (var index in arrData[i]) {
                row += '"' + arrData[i][index] + '",';
            }
            row.slice(0, row.length - 1);
            //add a line break after each row
            CSV += row + ' ';
    console.log(CSV);
        }


        if (CSV == '') {        
            alert("数据有错误");
            return;
        }   
        
        var link = document.createElement("a");    
        link.id="lnkDwnldLnk";
    link.name="lnkDwnldLnk";
    link.setAttribute("style", "display:none");


        var ifdo = document.createElement("iframe");    
        ifdo.id="ifdiframe";
    ifdo.name="ifdiframe";
    ifdo.setAttribute("style", "display:none");
        
        document.body.appendChild(link);
    document.body.appendChild(ifdo);
       
    var csv = CSV;
    try
    {
    blob = new Blob([csv], { type: 'text/txt' }); 
    }
    catch (e)
    {
    blob = [csv];
    }

    var csvUrl = "";
    filename = ReportName;
        if (window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1) { 
            csvUrl = window.webkitURL.createObjectURL(blob); 
    link.setAttribute("download", filename);
    link.setAttribute("href", csvUrl);
    link.click();
        } 
        if (window.navigator.userAgent.indexOf("Firefox") >= 1) { 
            csvUrl = window.URL.createObjectURL(blob); 
    link.setAttribute("download", filename);
    link.setAttribute("href", csvUrl);
    link.click();
        } 
        else { 
    if(window.navigator.msSaveOrOpenBlob) { //IE>=10
    link.addEventListener('click', function() {
    window.navigator.msSaveOrOpenBlob(blob, filename);
    });
    link.click();


            } else { //支持IE9、IE8;  IE7及以下暂不支持,因为不支持JSON
                var ifd = document.getElementById('ifdiframe').contentDocument;
    ifd.open('text/plain', 'replace');
    ifd.write(' ' + csv);
    ifd.close();
    ifd.execCommand('SaveAs', null, filename);
            }
        }
      
        document.body.removeChild(link);
    document.body.removeChild(ifdo);
    }

    </script>
    <input type="Button" id="bygen" value="导出" onclick="jsexport()"/ >

    <br>
    <a id="mydownload" name="mydownload" href="#" >导出</a>

    </html>



    纯原生js代码,本人原创,未经许可可随意转载

  • 相关阅读:
    oracle 数据库 Cause: java.sql.SQLSyntaxErrorException: ORA-00904: "BODY": 标识符无效
    windows获取所有连接过的无线网密码
    element-ui 组件 el-calendar 农历显示问题
    mysql表复制
    console 打印消息时,可以使用 %c 指定随后的文本样式; %s 可引用参数变量。
    mysql 查询出现 "this is incompatible with sql_mode=only_full_group_by"错误解决方案,以及个人rpm方式重装所遇到的问题备份
    java 关于xlsx(xls) 和 csv 文件的数据解析
    idea websorm 激活码(2020-1-6 实测可用)最新
    mysql 连接查询 转换group_concat, find_in_set
    今天带来compass的使用方式
  • 原文地址:https://www.cnblogs.com/bdccloudy/p/7665196.html
Copyright © 2011-2022 走看看