Created
March 22, 2017 09:57
-
-
Save dhunmoon/d743b327c673b589e7acfcbc5633ff4b to your computer and use it in GitHub Desktop.
JS: CSV File Creation Using BLOB
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| } | |
| } | |
| } |
I created a csv from an object like this:
const csvData = data.reduce((prev, curr) => (prev += Object.values(curr).join(Delimiter) + "\n"), "");const Delimiter = ","
and csvData is an array of objects.
You need to add headers too,
and then join csvData with csvHeaders with a delimiter.
const csv = `${csvHeaders}\n${csvData}`;csvHeaders can be Object.keys(data[0]).join(Delimiter);
Don't forget to call URL.revokeObjectURL at the end.
Don't forget to call
URL.revokeObjectURLat the end.
Why?
revokeObjectURL
Memory management is a thing.
https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL_static
"Call this method when you've finished using an object URL to let the browser know not to keep the reference to the file any longer."
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Can you please provide an example for an input? for the
rowsvariable?Thanks!