如何将大量 json 数据导出为 CSV 而不会导致浏览器崩溃？答案

【问题标题】：how to export large amount of json data to CSV without browser crash?如何将大量 json 数据导出为 CSV 而不会导致浏览器崩溃？
【发布时间】：2014-09-20 11:16:52
【问题描述】：

我有大量的表数据（比如 22k 行）。这 22k 行是从 json 文件中填充的。我现在要做的是将这些数据导出到 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 而不会导致浏览器崩溃？（它不应该显示杀死页面）。

【问题讨论】：

可能重复：stackoverflow.com/questions/8847766/…
我猜你有一个脚本来处理需要很长时间才能完成的 JSON。如果任何脚本花费的时间过长，浏览器可能会认为它没有响应。要解决此问题，您应该将处理分解为更易于管理的块
@nathvarun 我没有找到答案。这就是我问的原因？问题？？？
@jasonscript 如何作为块处理.. ？你能给我看看小提琴吗？
好的，看看这个 plunker.plnkr.co/edit/aO2DwSpmZCQ0GHSmPv7m?p=preview 。我正在生成 22000 行 json，然后也将其转换。它似乎没有崩溃。它与您的要求不同，但请看一下。

标签： javascript jquery json csv

【解决方案1】：

看起来这个问题已经很老了..但如果有人还在寻找解决方案，那么

这可能会有所帮助。

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

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

【讨论】：

可能是旧的。但是我想导出到 excel 的 JSON 文件大约是 22MB。当我运行这段代码时..浏览器立即崩溃..所以无法导出到excel中。
我尝试了 20 万行 .. 它生成了 33MB 的 excel 文件。你能把 1 行的数据发给我吗.. 我会尝试使用数据，看看我是否能够重新创建这个问题
那你能用html + js + json 文件给我看你的完整代码吗？？
如果您编写的代码可以正常工作.. 那您为什么不能给我看一下？
小提琴链接 jsfiddle.net/4zv6r 我创建了一个 90000 行的虚拟数据......它正在创建 100mb 的 excel .. 在 chrome 中

【解决方案2】：

我只是想把这个扔在这里，因为我花了一些时间浏览所有这些 cmets，试图找到一种将 JSON 数据转储导出为 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);
    });
});

【讨论】：