Config Router

  • Google Sheets
  • CCNA Online training
    • CCNA
  • CISCO Lab Guides
    • CCNA Security Lab Manual With Solutions
    • CCNP Route Lab Manual with Solutions
    • CCNP Switch Lab Manual with Solutions
  • Juniper
  • Linux
  • DevOps Tutorials
  • Python Array
You are here: Home / How to export JavaScript array info to csv (on client side)?

How to export JavaScript array info to csv (on client side)?

August 20, 2021 by James Palmer

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 + “rn”;
});

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 the window.open method. In order to achieve this, you can create a hidden 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”.

Based on the answers above I created this function that I have tested on IE 11, Chrome 36 and Firefox 29
function exportToCsv(filename, rows) {
var processRow = function (row) {
var finalVal = ”;
for (var j = 0; j < row.length; j++) { var innerValue = row[j] === null ? '' : row[j].toString(); if (row[j] instanceof Date) { innerValue = row[j].toLocaleString(); }; var result = innerValue.replace(/"/g, '""'); if (result.search(/("|,|n)/g) >= 0)
result = ‘”‘ + result + ‘”‘;
if (j > 0)
finalVal += ‘,’;
finalVal += result;
}
return finalVal + ‘n’;
};

var csvFile = ”;
for (var i = 0; i < rows.length; i++) { csvFile += processRow(rows[i]); } var blob = new Blob([csvFile], { type: 'text/csv;charset=utf-8;' }); if (navigator.msSaveBlob) { // IE 10+ navigator.msSaveBlob(blob, filename); } else { var link = document.createElement("a"); if (link.download !== undefined) { // feature detection // Browsers that support HTML5 download attribute var url = URL.createObjectURL(blob); link.setAttribute("href", url); link.setAttribute("download", filename); link.style.visibility = 'hidden'; document.body.appendChild(link); link.click(); document.body.removeChild(link); } } } For example: https://jsfiddle.net/jossef/m3rrLzk0/

Related

Filed Under: Uncategorized

Recent Posts

  • How do I give user access to Jenkins?
  • What is docker volume command?
  • What is the date format in Unix?
  • What is the difference between ARG and ENV Docker?
  • What is rsync command Linux?
  • How to Add Music to Snapchat 2021 Android? | How to Search, Add, Share Songs on Snapchat Story?
  • How to Enable Snapchat Notifications for Android & iPhone? | Steps to Turn on Snapchat Bitmoji Notification
  • Easy Methods to Fix Snapchat Camera Not Working Black Screen Issue | Reasons & Troubleshooting Tips to Solve Snapchat Camera Problems
  • Detailed Procedure for How to Update Snapchat on iOS 14 for Free
  • What is Snapchat Spotlight Feature? How to Make a Spotlight on Snapchat?
  • Snapchat Hack Tutorial 2021: Can I hack a Snapchat Account without them knowing?

Copyright © 2025 · News Pro Theme on Genesis Framework · WordPress · Log in