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代码,本人原创,未经许可可随意转载

  • 相关阅读:
    搭建一个免费的,无限流量的Bloggithub Pages和Jekyll入门
    通过扩展方法 链式方法 为MVC 3 视图添加验证
    让移动UI模式设计者获得灵感的10个有用的网站资源
    企业级应用架构(NHibernater+Spring.Net+MVC3)_V1.0
    把博客放在Github
    实例化需求—流程
    nginx+keepalievd,实现负载均衡和故障点切换。keepalived双机热备。
    古城钟楼
    从初步使用该控件到多维数据集控件PivotGridControl
    搜索引擎的评价
  • 原文地址:https://www.cnblogs.com/bdccloudy/p/7665196.html
Copyright © 2011-2022 走看看