I am using the below function to convert a JSON object to a CSV file and download it. This part is doing fine.
const 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;
}
//Generate a file name
var fileName = '';
//this will remove the blank-spaces from the title and replace it with an underscore
fileName += ReportTitle.replace(/ /g, '_');
//Initialize file format you want csv or xls
var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
// generate a temp <a /> tag
var link = document.createElement('a');
link.href = uri;
//set the visibility hidden so it will not effect on your web-layout
link.style = 'visibility:hidden';
link.download = fileName + '.csv';
//this part will append the anchor tag and remove it after automatic click
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// console.log('finish download one file');
};
Right now I am trying to create a zip file based on the JSON objects. I am planning to use the JSZip library.
for (var i = 0; i < 5; i++) {
zip.file('file' + i + '.csv', escape(CSV));
}
zip.generateAsync({ type: 'base64' }).then((base64) => {
window.location = 'data:application/zip;base64,' + base64;
});
escape(CSV) in the above code snippet is the proper CSV file format. This code snippet does not create a zip file and does not throw any error code. It only brings my current page to about:blank#blocked.
But if I change the second parameter of zip.file() to 'csv data', it works and gives me a zip file.
My solution is
to download the CSV files using the JSONToCSVConvertor function
using the JSZip library to read the CSV files from the local repository and zip them.
I think this way is not the best way to do it, because I have to download multiple CSV files before zipping them.
To answer my question I follow this article to solve my issue
https://huynvk.dev/blog/download-files-and-zip-them-in-your-browsers-using-javascript
Related
What are some alternatives to create a report with additional header/footer information at the top and bottom of the page without entirely revamping the table library for display? I'm currently using Jquery/Bootgrid to load the data into tables
The following function is a working implementation for exporting the list of search results. A CSV file would be available for download.But due to limitations with the "msSaveOrOpenBlob" / CSV format, I cannot include the header/footer information. To clarify, the report does not need to be in CSV format, common formats which can be displayed in a table form will do.
function getVisCol(visibleCol){
$("#searchresult th").each(function(){
visibleCol.push($(this).data('columnId'));
});
}
$(".exportBtn").on('click', function(){
//exportExcel();
form = {
'userId' : $("#inputid").val(),
'name' : $("#inputname").val(),
'age' : $("#inputage").val(),
'country' : $("#inputcountry").val()
}
$.ajax({
type : 'POST',
contentType : "application/json",
url : retrieveUserForExport,
data: JSON.stringify(form),
beforeSend: function(xhr) {
xhr.setRequestHeader(csrfHeader, csrfToken);
},
success:function(jd, textStatus, jqXHR) {
myQuery = JSON.stringify(jd);
var visCol = [];
getVisCol(visCol);
JSONToCSVConvertor(myQuery, "ExportFile", true, visCol);
}
});
});
function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel, ignoreColumns) {
//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 = '' + '\r\n\n';
//Set Report title in first row or line
//CSV += ReportTitle ;
//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]) {
if(ignoreColumns.indexOf(index) > -1)
//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';
console.log("CSV value: " + CSV);
}
//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]) {
if(ignoreColumns.indexOf(index) > -1)
row += '"' + arrData[i][index] + '",';
}
row.slice(0, row.length - 1);
//add a line break after each row
CSV += row + '\r\n';
console.log("CSV2 value: " + CSV);
}
if (CSV == '') {
alert("Invalid data");
return;
}
//Generate a file name
var fileName = "Report_";
//this will remove the blank-spaces from the title and replace it with an underscore
fileName += ReportTitle.replace(/ /g,"_");
//Initialize file format you want csv or xls
var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
// Now the little tricky part.
// you can use either>> window.open(uri);
// but this will not work in some browsers
// or you will not get the correct file extension
if(window.navigator.msSaveOrOpenBlob) {
var textFileAsBlob = new Blob([CSV], {
type: 'text/plain'
});
//window.navigator.msSaveOrOpenBlob(textFileAsBlob, fileName + ".csv");
} else {
//this trick will generate a temp <a /> tag
var link = document.createElement("a");
link.href = uri;
//set the visibility hidden so it will not effect on your web-layout
link.style = "visibility:hidden";
link.download = fileName + ".csv";
//this part will append the anchor tag and remove it after automatic click
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
Please refer code -
$scope.JSONToCSVConvertor = function(ShowLabel) {
var arrData = typeof $scope.SampleJsonObj != 'object' ? JSON.parse($scope.SampleJsonObj) : $scope.SampleJsonObj;
var CSV = '';
var ReportTitle = "sample";
//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;
}
//Generate a file name
var fileName = "Usersearch";
//Initialize file format you want csv or xls
var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
//this trick will generate a temp <a /> tag
var link = document.createElement("a");
link.href = uri;
//set the visibility hidden so it will not effect on your web-layout
link.style = "visibility:hidden";
link.download = fileName + ".csv";
//this part will append the anchor tag and remove it after automatic click
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
Description-
The code is working in chrome browser but getting the issue in IE. please guide me.I getting an issue like 'TypeError: Assignment to read-only properties is not allowed in strict mode' at line 'link.style = "visibility:hidden";'
I have added some extra condition to IE browser. now the code is working in Both IE and Chrome.please refer code :
$scope.JSONToCSVConvertor = function (ShowLabel) {
//If JSONData is not an object then JSON.parse will parse the JSON string in an Object
var arrData = typeof $scope.searchResult != 'object' ? JSON.parse($scope.searchResult) : $scope.searchResult;
var CSV = '';
var ReportTitle = "sample";
if (ShowLabel) {
var row = "";
for (var index in arrData[0]) {
//Now convert each value to string and comma-seprated
row += index + ',';
}
row = row.slice(0, -1);
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;
}
//Generate a file name
var fileName = "Usersearch";
if(msieversion()){
var IEwindow = window.open();
IEwindow.document.write(CSV);
IEwindow.document.close();
IEwindow.document.execCommand('SaveAs', true, fileName + ".csv");
IEwindow.close();
} else {
var element = angular.element('<a/>');
element.attr({
href: 'data:attachment/csv;charset=utf-8,' + encodeURI(CSV),
target: '_blank',
download: 'Usersearch.csv'
})[0].click();
}
};
function msieversion() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie != -1 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If IE
{
return true;
}
return false;
};
var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob([excel_content], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}));
a.download = 'REPORT'+'.xlsx';
// Append anchor to body.
document.body.appendChild(a)
a.click();
The above code works when I open the downloaded file in LibreOffice (Linux), but the same does not work in Windows MS-Office.
The contents of my file is xml elements which I'm trying to save it as xlsx format.
But only MS-Office shows following error
The file you're trying to open is a different format as specified bythe file extension"
you should have your contents of file into .csv format to be able to open into MS-Office.
There are lot's of plugin available although this is the sample code you can try out..
this will convert your JSON data to excel 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 = '';
//Set Report title in first row or line
CSV += ReportTitle + '\r\n\n';
//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]) {
if (index == 'Date_Time') {
var dateString = arrData[i][index].substr(6);
var currentTime = new Date(parseInt(dateString));
var hours = ('0' + (currentTime.getHours())).slice(-2)
var min = ('0' + (currentTime.getMinutes())).slice(-2)
var sec = ('0' + (currentTime.getSeconds())).slice(-2)
var date = currentTime.toDateString() + " " + hours + ":" + min + ":" + sec;
row += '"' + date + '",';
} else {
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;
}
//Generate a file name
var fileName = "MyReport_";
//this will remove the blank-spaces from the title and replace it with an underscore
fileName += ReportTitle.replace(/ /g, "_");
//Initialize file format you want csv or xls
var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
// Now the little tricky part.
// you can use either>> window.open(uri);
// but this will not work in some browsers
// or you will not get the correct file extension
//this trick will generate a temp <a /> tag
var link = document.createElement("a");
link.href = uri;
//set the visibility hidden so it will not effect on your web-layout
link.style = "visibility:hidden";
link.download = fileName + ".csv";
//this part will append the anchor tag and remove it after automatic click
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
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 ).
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);
}
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);
});
});
JSON To CSV converter in javascript : Issue in chrome
I am using a JSON to CSV converter library. The code is :
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 = '';
//Set Report title in first row or line
CSV += ReportTitle + '\r\n\n';
//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;
}
//Generate a file name
var fileName = "MyReport_";
//this will remove the blank-spaces from the title and replace it with an underscore
fileName += ReportTitle.replace(/ /g,"_");
//Initialize file format you want csv or xls
var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
// Now the little tricky part.
// you can use either>> window.open(uri);
// but this will not work in some browsers
// or you will not get the correct file extension
//this trick will generate a temp <a /> tag
var link = document.createElement("a");
link.href = uri;
//set the visibility hidden so it will not effect on your web-layout
link.style = "visibility:hidden";
link.download = fileName + ".csv";
//this part will append the anchor tag and remove it after automatic click
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
It works fine in mozilla firefox. It used to work fine in chrome too, but before few days, it fails to download it as CSV. It will simply download it in a file without any extension with the name "download". It doesn't even take up the file name I want to give.