Today we would be discussing Export to CSV functionality using JavaScript. You might be wondering that there are many 3rd party libraries to generate the CSV file using JavaScript/jQuery then why am I reinventing the wheel? Why don't use the already existing solution? Bear with me, I would not only explain why but also describe how to download data in CSV format using JavaScript?
Now again we would reiterate one which situation and why one should use this Export to CSV utility developed using JavaScript and then directly jump on the implementation.
1. Introduction
It's the very common use-case that we already have some data on the browser (HTML pages) and we would like to provide the option to users to download these data in CSV format using jQuery / JavaScript. That's why there are many 3rd party libraries in the market to generate the CSV file using jQuery but from the HTML table as the source. Just lookout for a solution that facilitates us to generate the CSV file using jQuery / JavaScript if the current HTML structure representing the data on the page is not in the tabular format. This is where our solution comes in the picture which is very simple and handy. One might argue that it is possible to create a temporary table from the complicated HTML structure on the fly in order to use the 3rd party libraries. But again it depends upon the complexity and we won't be discussing that here.
2. Browser Compatability
Tested this utility in below version of the browser and it's working as expected:
- Google Chrome Version 77.0.3865.90 (64-bit)
- Firefox Quantum Version 69.0(64-bit)
- IE 11 Version 11.0.9600.19467
3. Why & Implementation
Now again we would reiterate one which situation and why one should use this Export to CSV utility developed using JavaScript and then directly jump on the implementation.
3.1 Why?
- Preferred to use if the current HTML structure is not in tabular format and very complicated but one could use it even if HTML structure is in tabular format
- Handling boundary usecases: Currently if data values have comma then also it properly handles it.
- Simple to use
- Don't have to load any 3rd part library
3.2 Implementation
One needs to just create the multi-dimensional data array from the HTML page containing the data using jQuery / JavaScript and then we are good to go. Here for the demo purpose, we have created the multi-dimensional data array manually inside JavaScript.
<html>
<head>
<title>Download CSV</title>
<script>
// prepare the data from the HTML page using jQuery/JavaScript.
// Demo purpose, we are manually preparing the data
var data = [
['Anshul', 'programmer','Gamer'],
['Rahul', 'Computer Science Engineer','Traveller'],
['Rajnikant', 'Hero','Sky Ga,zing']
];
function downloadCSV() {
var csv = 'Name,Job,Passion\n';
data.forEach(function(row) {
var row1 = [];
row.forEach(function(item) { // handling commna in data values
if(item.indexOf(',') == -1) { // not having comma
row1.push(item);
} else {
item = "\"" + item + "\"";
row1.push(item);
}
});
console.log("row1:" + row1)
csv += row1.join(',');
csv += "\n";
});
if (navigator.msSaveBlob) { //IE
var csvURL = null;
var csvData = new Blob([csv], {type: 'text/csv;charset=utf-8;'});
csvURL = navigator.msSaveBlob(csvData, 'download-reports.csv');
} else { // Firefox,Chrome
console.log(csv);
//var hiddenElement = document.createElement('a');
var hiddenElement = document.getElementById('dummyDownload'); //For Firefox
hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
hiddenElement.target = '_blank';
hiddenElement.download = 'download-reports.csv';
hiddenElement.click();
}
}
</script>
</head>
<body>
<a id=dummyDownload hidden></a>
<button onclick="downloadCSV()">Download CSV</button>
</body>
</html>
4. Downloaded CSV File
For reference, showing the downloaded CSV file in both the notepad++ & by Open Office(Separated by option: Comma). See the last row in which, intentionally I have put a comma in one of the data values but our utility properly handles it.
5. Conclusion
Now you know how to integrate Download CSV functionality in your application which is pretty simple. Let me know in the comments if it's working for you or not. Happy Learning!! ☺
No comments:
Post a Comment