如何在没有浏览器崩溃的情况下将大量的json数据导出到CSV？

我有大量的表数据（比如说22k行）。 这些22k行是从json文件填充的。 我现在要做的是将这些数据导出为CSV。

     
  // json datas here.. ( say , 22k rows  Generate File 
   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页面）。

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

Answer 2

刚想我会抛弃这个，因为我花了一些时间来完成所有这些注释，试图找到一种简单的方法将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); }); });