4

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

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

Álvaro González
  • 142,137
  • 41
  • 261
  • 360
arjun
  • 550
  • 1
  • 9
  • 27
  • Possible duplicate : http://stackoverflow.com/questions/8847766/how-to-convert-json-to-csv-format-and-store-in-a-variable – Varun Nath Jul 29 '14 at 06:24
  • I'm guessing you have a script to process the JSON that is taking too long to complete. If any script takes too long, the browser may think it is not responding. To work around this you should break your processing up into more manageable chunks – jasonscript Jul 29 '14 at 06:27
  • @nathvarun i didn't find the answer.. thats why i have asked ? problem ??? – arjun Jul 29 '14 at 06:27
  • 1
    @jasonscript how to process as chunks.. ? can you show me a fiddle pls ? – arjun Jul 29 '14 at 06:28
  • @arjun: can we see the code that's causing the browser to crash ? – Varun Nath Jul 29 '14 at 06:33
  • @nathvarun i can't comment the whole code.. – arjun Jul 29 '14 at 06:39
  • @nathvarun updated the code.. check it out.. – arjun Jul 30 '14 at 06:41
  • 1
    Okay checkout this plunker.http://plnkr.co/edit/aO2DwSpmZCQ0GHSmPv7m?p=preview . I'm generating 22000 lines of json and then converting it aswell. It doesn't seem to crash. Its not identical to your requirement but just have a look. – Varun Nath Jul 30 '14 at 08:32
  • @nathvarun ok bro.. wait... i will check it out.. – arjun Jul 30 '14 at 08:45
  • @nathvarun not working.... When i click "convert to CSV" nothing happens.. its not getting downloaded as excel – arjun Jul 30 '14 at 08:50
  • @jasonscript Will you please show me how to process as chunks ? can you please make a fiddle ??? – arjun Jul 30 '14 at 09:26
  • okay i've just corrected it. plunker won't allow you to download it. Try the code on your local machine. First click generate. Then convert to CSV. You will get a download link. http://plnkr.co/edit/aO2DwSpmZCQ0GHSmPv7m?p=preview – Varun Nath Jul 30 '14 at 11:18

2 Answers2

6

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

this might help.

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);
}
Undo
  • 25,519
  • 37
  • 106
  • 129
Samuel Joy
  • 578
  • 5
  • 8
  • May be old. But The JSON file that i want to export to excel is about 22MB. when i run this code.. the browser crashes instantly..so can't able to export into excel. – arjun Jul 30 '14 at 06:41
  • I tried with 2 lakh rows .. and it generated excel file of 33MB. can you send me data of 1 row.. i will try with the data and see if i am able to recreate this issue – Samuel Joy Jul 30 '14 at 10:11
  • then can you show me your full code with html + js + json files ?? – arjun Jul 30 '14 at 10:17
  • If the code that you coded is working.. then why can't you show me in a fiddle ? – arjun Jul 30 '14 at 10:46
  • fiddle link http://jsfiddle.net/4zv6r/ i have created a dummy data with 90000 rows... and it is creating excel of 100mb.. in chrome – Samuel Joy Jul 31 '14 at 04:33
  • I appreciate your work but i want it to work with firefox and IE also. – arjun Jul 31 '14 at 05:01
  • And I am having a separate JSON file.. How to export this json by using ajax ? – arjun Jul 31 '14 at 05:05
1

Just figured I would throw this here since I spent a bit of time going through all these comments trying to find an easy way to export a JSON data dump to CSV:

$(document).ready(function() {
    var JSONData = $.getJSON("DataDump.php", function(data) {
        //Convert JSON to CSV
        var items = data;
        const replacer = (key, value) => value === null ? '' : value; // specify how you want to handle null values here
        const header = Object.keys(items[0]);
        let csv = items.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(','));
        csv.unshift(header.join(','));
        csv = csv.join('\r\n');

        //Download as CSV
        var downloadLink = document.createElement("a");
        var blob = new Blob(["\ufeff", csv]);
        var url = URL.createObjectURL(blob);
        downloadLink.href = url;
        downloadLink.download = "DataDump.csv";   //Name File Here
        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);
    });
});
user1274820
  • 7,786
  • 3
  • 37
  • 74