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 ).
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 ).
Share Improve this question edited Jul 30, 2014 at 17:01 Álvaro González 147k45 gold badges277 silver badges376 bronze badges asked Jul 29, 2014 at 6:21 arjunarjun 5601 gold badge9 silver badges27 bronze badges 12- Possible duplicate : stackoverflow./questions/8847766/… – Varun Nath Commented Jul 29, 2014 at 6:24
- I'm guessing you have a script to process the JSON that is taking too long to plete. 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 Commented Jul 29, 2014 at 6:27
- @nathvarun i didn't find the answer.. thats why i have asked ? problem ??? – arjun Commented Jul 29, 2014 at 6:27
- 1 @jasonscript how to process as chunks.. ? can you show me a fiddle pls ? – arjun Commented Jul 29, 2014 at 6:28
- 1 Okay checkout this plunker.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 Commented Jul 30, 2014 at 8:32
2 Answers
Reset to default 6Looks 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 ma-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 ma-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);
}
Just figured I would throw this here since I spent a bit of time going through all these ments 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);
});
});