<!DOCTYPE html>
<html dir="ltr" lang="en-us">
<head>
<meta charset="UTF-8" />
<title>Export to CSV using JavaScript</title>
<!--
Author : Elia Contini <http://www.eliacontini.info>
Created: 15 Mar 2014
License: see LICENSE file in the repository root
-->
</head>
<body>
<script>
// Here you can set your own data
var data = [
{
"title": "Book title 1",
"author": "Name1 Surname1"
},
{
"title": "Book title 2",
"author": "Name2 Surname2"
},
{
"title": "Book title 3",
"author": "Name3 Surname3"
},
{
"title": "Book title 4",
"author": "Name4 Surname4"
}
];
// prepare CSV data
var csvData = new Array();
csvData.push('"Book title","Author"');
data.forEach(function (item, index, array) {
csvData.push('"' + item.title + '","' + item.author + '"');
});
// download stuff
var buffer = csvData.join("\n");
var uri = "data:text/csv;charset=utf8," + encodeURIComponent(buffer);
var fileName = "data.csv";
var link = document.createElement("a");
if (link.download !== undefined) { // feature detection
// Browsers that support HTML5 download attribute
link.setAttribute("href", uri);
link.setAttribute("download", fileName);
}
else if (navigator.msSaveBlob) { // IE 10+
link.addEventListener("click", function (event) {
var blob = new Blob([buffer], {
"type": "text/csv;charset=utf-8;"
});
navigator.msSaveBlob(blob, fileName);
}, false);
}
else {
// it needs to implement server side export
link.setAttribute("href", "http://www.example.com/export");
}
link.innerHTML = "Export to CSV";
document.body.appendChild(link);
</script>
</body>
</html>
but I don't think they are widely supported yet either. By far the best thing to do at the moment is submit the data to a webpage, have it create the file in-memory and stream it top the client for the browser to save. That is at least guaranteed to work
on all browsers.
I'm afraid I no longer use this forum due to the new point allocation system.
Member
60 Points
547 Posts
How to export data from javascript to csv file
Aug 21, 2014 10:46 PM|nat06|LINK
Hi,
Can anybody help me please how to export or save data from client side, javascript to a csv file?
Thanks
All-Star
194490 Points
28079 Posts
Moderator
Re: How to export data from javascript to csv file
Aug 22, 2014 02:08 AM|Mikesdotnetting|LINK
You can use Javascript to post it in a structured format such as JSON to the server (AJAX) and process it there.
https://www.google.com/search?q=asp+net+generate+csv
Member
60 Points
547 Posts
Re: How to export data from javascript to csv file
Aug 22, 2014 01:13 PM|nat06|LINK
Hi,
Thanks Mike, these sites are very good, but my code is in javascript, not <script runet="server">.
My code is like
for (var i = 0; i < origins.length; i++) {
var results = response.rows[i].elements;
addMarker(origins[i], false);
addMarker(destinations[i], true);
outputDiv.innerHTML += origins[i] + ' to ' + destinations[i]
+ ': ' + results[i].distance.text + ' in '
+ results[i].duration.text + '<br>';
}
Do you have any idea how to implement something of that on my code?
Thanks
All-Star
16806 Points
2777 Posts
Re: How to export data from javascript to csv file
Aug 25, 2014 03:14 AM|Kevin Shen - MSFT|LINK
Hi nat06,
please refer to the code given from the link below:https://github.com/EliaContini/js-experiments/blob/master/exportToCSV/index.html
Best Regards,
Kevin Shen.
Member
60 Points
547 Posts
Re: How to export data from javascript to csv file
Aug 25, 2014 04:20 PM|nat06|LINK
Hi Kevin,
I tried your example and here is what I have for the code:
but again the csv file remains empty
All-Star
16806 Points
2777 Posts
Re: How to export data from javascript to csv file
Aug 26, 2014 10:05 AM|Kevin Shen - MSFT|LINK
Hi nat06,
For your problem ,i suggest that you set a breakpoint on your javascript code check if your csvData has been filled with data.
And your problem is related with google map api,i recommend that you can post your question to their forum:
https://developers.google.com/maps/support/
Best Regards,
Kevin Shen.
Member
60 Points
547 Posts
Re: How to export data from javascript to csv file
Aug 27, 2014 09:14 AM|nat06|LINK
Thanks Kevin, but when putting breakpoint on
csvData.push = ('"origins", "destinations", "results.distance.text", "results.duration.text"');
I get a message:
The breakpoint will not currently be hit. No executable code of the debugger's target code type is associated to this line.
All-Star
37441 Points
9076 Posts
Re: How to export data from javascript to csv file
Aug 27, 2014 09:31 AM|AidyF|LINK
msSaveBlob only works on IE. There are parts of html5 that do this
http://www.html5rocks.com/en/tutorials/file/filesystem/
but I don't think they are widely supported yet either. By far the best thing to do at the moment is submit the data to a webpage, have it create the file in-memory and stream it top the client for the browser to save. That is at least guaranteed to work on all browsers.