如何导出大量的json数据到CSV而没有浏览器崩溃? [英] how to export large amount of json data to CSV without browser crash?

查看:428
本文介绍了如何导出大量的json数据到CSV而没有浏览器崩溃?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有大量的表数据(说22k行)。这些22k行从json文件填充。我现在想做的是将这些数据导出为CSV。

I have large amount of table data (say 22k rows). These 22k rows are populated from a json file. What i want to do now is to export these data to CSV.

     <html>
    <head>
    <link rel="stylesheet" type="text/css" href="a.css">
    </head>
    <body>
    <div class='mydiv'>    
        <textarea id="txt" class='txtarea'>

    // json datas here.. ( say , 22k rows
    </textarea>

        <button class='gen_btn'>Generate File</button>

    </div>
    </body>
    </html>


js file : 

$(document).ready(function() {
    $('button').click(function() {
        var data = $('#txt').val();
        if (data == '')


            return;

        JSONToCSVConvertor(data, "Data Excel", true);
    });
});

    function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {
        var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;

        var CSV = '';

        CSV += ReportTitle + '\r\n\n';



        if (ShowLabel) {
            var row = "";


            for (var index in arrData[0]) {


                row += index + ',';
            }

            row = row.slice(0, -1);


            CSV += row + '\r\n';
        }


        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);


            CSV += row + '\r\n';
        }

        if (CSV == '') {
            alert("Invalid data");
            return;
        }


        var fileName = "MyReport_";

        fileName += ReportTitle.replace(/ /g, "_");


        var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);


        var link = document.createElement("a");
        link.href = uri;

        link.style = "visibility:hidden";
        link.download = fileName + ".csv";

        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }

如何编写js文件以将所有这22k行导出到excel崩溃? (它不应该显示kill页面)。

how to write a js file to export all these 22k rows to excel without browser crash ? (it shouldn't show kill pages ).

推荐答案

看起来这个问题很老了,然后

Looks like this question is very old.. but if someone is still looking for solution then

这可能会有帮助。

在这段代码中,我使用blob来创建csv文件。

in this code i am using blob to create the csv file.

function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {     

    //If JSONData is not an object then JSON.parse will parse the JSON string in an Object
    var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
    var CSV = '';    
    //This condition will generate the Label/Header
    if (ShowLabel) {
        var row = "";

        //This loop will extract the label from 1st index of on array
        for (var index in arrData[0]) {
            //Now convert each value to string and comma-seprated
            row += index + ',';
        }
        row = row.slice(0, -1);
        //append Label row with line break
        CSV += row + '\r\n';
    }

    //1st loop is to extract each row
    for (var i = 0; i < arrData.length; i++) {
        var row = "";
        //2nd loop will extract each column and convert it in string comma-seprated
        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 + '\r\n';
    }

    if (CSV == '') {        
        alert("Invalid data");
        return;
    }   

    //this trick will generate a temp "a" tag
    var link = document.createElement("a");    
    link.id="lnkDwnldLnk";

    //this part will append the anchor tag and remove it after automatic click
    document.body.appendChild(link);

    var csv = CSV;  
    blob = new Blob([csv], { type: 'text/csv' }); 
    var csvUrl = window.webkitURL.createObjectURL(blob);
    var filename = 'UserExport.csv';
    $("#lnkDwnldLnk")
    .attr({
        'download': filename,
        'href': csvUrl
    }); 

    $('#lnkDwnldLnk')[0].click();    
    document.body.removeChild(link);
}

这篇关于如何导出大量的json数据到CSV而没有浏览器崩溃?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆