How to export JavaScript array info to csv (on client side)?
You can do this in native JavaScript. You'll have to parse your data into correct CSV format as so (assuming you are using an array of arrays for your data as you have described in the question):
const rows = [
["name1", "city1", "some other info"],
["name2", "city2", "more info"]
];
let csvContent = "data:text/csv;charset=utf-8,";
rows.forEach(function(rowArray) {
let row = rowArray.join(",");
csvContent += row + "\r\n";
});
or the shorter way (using arrow functions):
const rows = [
["name1", "city1", "some other info"],
["name2", "city2", "more info"]
];
let csvContent = "data:text/csv;charset=utf-8,"
+ rows.map(e => e.join(",")).join("\n");
Then you can use JavaScript's window.open
and encodeURI
functions to download the CSV file like so:
var encodedUri = encodeURI(csvContent);
window.open(encodedUri);
Edit:
If you want to give your file a specific name, you have to do things a little differently since this is not supported accessing a data URI using thewindow.open
method. In order to achieve this, you can create a hidden <a>
DOM node and set its download
attribute as follows:var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "my_data.csv");
document.body.appendChild(link); // Required for FF
link.click(); // This will download the data file named "my_data.csv".
JavaScript array to CSV
The cited answer was wrong. You had to change
csvContent += index < infoArray.length ? dataString+ "\n" : dataString;
to
csvContent += dataString + "\n";
As to why the cited answer was wrong (funny it has been accepted!): index
, the second parameter of the forEach
callback function, is the index in the looped-upon array, and it makes no sense to compare this to the size of infoArray
, which is an item of said array (which happens to be an array too).
EDIT
Six years have passed now since I wrote this answer. Many things have changed, including browsers. The following was part of the answer:
START of aged part
BTW, the cited code is suboptimal. You should avoid to repeatedly append to a string. You should append to an array instead, and do an array.join("\n") at the end. Like this:
var lineArray = [];
data.forEach(function (infoArray, index) {
var line = infoArray.join(",");
lineArray.push(index == 0 ? "data:text/csv;charset=utf-8," + line : line);
});
var csvContent = lineArray.join("\n");
END of aged part
(Keep in mind that the CSV case is a bit different from generic string concatenation, since for every string you also have to add the separator.)
Anyway, the above seems not to be true anymore, at least not for Chrome and Firefox (it seems to still be true for Safari, though).
To put an end to uncertainty, I wrote a jsPerf test that tests whether, in order to concatenate strings in a comma-separated way, it's faster to push them onto an array and join the array, or to concatenate them first with the comma, and then directly with the result string using the += operator.
Please follow the link and run the test, so that we have enough data to be able to talk about facts instead of opinions.
Export javascript data to CSV file without server interaction
There's always the HTML5 download
attribute :
This attribute, if present, indicates that the author intends the
hyperlink to be used for downloading a resource so that when the user
clicks on the link they will be prompted to save it as a local file.If the attribute has a value, the value will be used as the pre-filled
file name in the Save prompt that opens when the user clicks on the
link.
var A = [['n','sqrt(n)']];
for(var j=1; j<10; ++j){
A.push([j, Math.sqrt(j)]);
}
var csvRows = [];
for(var i=0, l=A.length; i<l; ++i){
csvRows.push(A[i].join(','));
}
var csvString = csvRows.join("%0A");
var a = document.createElement('a');
a.href = 'data:attachment/csv,' + encodeURIComponent(csvString);
a.target = '_blank';
a.download = 'myFile.csv';
document.body.appendChild(a);
a.click();
FIDDLE
Tested in Chrome and Firefox, works fine in the newest versions (as of July 2013).
Works in Opera as well, but does not set the filename (as of July 2013).
Does not seem to work in IE9 (big suprise) (as of July 2013).
An overview over what browsers support the download attribute can be found Here
For non-supporting browsers, one has to set the appropriate headers on the serverside.
Apparently there is a hack for IE10 and IE11, which doesn't support the download
attribute (Edge does however).
var A = [['n','sqrt(n)']];
for(var j=1; j<10; ++j){
A.push([j, Math.sqrt(j)]);
}
var csvRows = [];
for(var i=0, l=A.length; i<l; ++i){
csvRows.push(A[i].join(','));
}
var csvString = csvRows.join("%0A");
if (window.navigator.msSaveOrOpenBlob) {
var blob = new Blob([csvString]);
window.navigator.msSaveOrOpenBlob(blob, 'myFile.csv');
} else {
var a = document.createElement('a');
a.href = 'data:attachment/csv,' + encodeURIComponent(csvString);
a.target = '_blank';
a.download = 'myFile.csv';
document.body.appendChild(a);
a.click();
}
Download an array as a CSV, but the data inside the array has commas in it
How do I go about solving this?
It varies. CSV is not a fully standardized format. But it will involve escaping those commas in the data in some way.
The most common way is to surround the fields that have commas with double quotes. If the data also has double quotes in it, you "escape" them with another double quote.
Applying that to your code:
let csv = rows.map(
row => row.map(
col => typeof col !== "string" ? col : `"${col.replace(/"/g, '""')}"`
).join(",")
).join("\n");
const rows = [
["Name", "Description", "Number"],
["A thing", "Description, but it has \"commas\" in it", 6],
];
let csv = rows.map(
row => row.map(
col => typeof col !== "string" ? col : `"${col.replace(/"/g, '""')}"`
).join(",")
).join("\n");
console.log(csv);
Two Dimensional Array Export Into CSV, Data Not Showing in CSV, Javascript
This worked for me ultimately.
'use strict';
var items = []
var rows = []
var cols = []
function myFunction() {
items.push(document.getElementById('itemid').value);
items.push(document.getElementById('itemid1').value);
items.push(document.getElementById('itemid2').value);
items.push(document.getElementById('itemid3').value);
console.log(items);
const arrayToMatrix = (array, columns) => Array(Math.ceil(array.length / columns)).fill('').reduce((acc, cur, index) => {
return [...acc, [...array].splice(index * columns, columns)]
}, []);
const result = arrayToMatrix(items, 7);
rows = result;
console.log(rows);}
document.getElementById('my-Function').onclick = myFunction;
function exportData() {
cols.push(rows);
console.log(cols);
let csvContent = "data:text/csv;charset=utf-8,"
+ rows.map(e => e.join(",")).join("\n");
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "my_data.csv");
document.body.appendChild(link);
link.click();}
document.getElementById('export-Data').onclick = exportData;
Related Topics
How to Get the Caret Column (Not Pixels) Position in a Textarea, in Characters, from the Start
How to Get the Current Date in JavaScript
Disable/Enable an Input With Jquery
What Is Spreadelement in Ecmascript Documentation? Is It the Same as Spread Syntax At Mdn
How to Do Case Insensitive String Comparison
Question Mark and Colon in JavaScript
How to Get a Timestamp in JavaScript
Choosing and Activating the Right Controls on an Ajax-Driven Site
How to Check For "Undefined" in JavaScript
How to Get All Properties Values of a JavaScript Object (Without Knowing the Keys)
How to Loop Through a Plain JavaScript Object With the Objects as Members
Async Function Returning Promise, Instead of Value
"Uncaught Syntaxerror: Cannot Use Import Statement Outside a Module" When Importing Ecmascript 6
How to Enable Cors in Angularjs
Xml Parsing of a Variable String in JavaScript