Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
Follow us on LinkedIn for our latest data and tips!
Do you know what annoys me? When I have my data in a web application and I can’t get it out. And if you’re not giving your users a way to export their data, then they’re annoyed too.
Today I’m going to show you how simple it is to provide CSV downloads in your application.
All that’s needed is a little Javascript and HTML. You don’t need a fancy $2,000 control suite or any server-side code.
First, we need some data. For this example we will turn an array of objects into a CSV download for the user:
var stockData = [ { Symbol: "AAPL", Company: "Apple Inc.", Price: 132.54 }, { Symbol: "INTC", Company: "Intel Corporation", Price: 33.45 }, { Symbol: "GOOG", Company: "Google Inc", Price: 554.52 }, ];
Now we need a function that will take any array of objects and create CSV data:
function convertArrayOfObjectsToCSV(args) { var result, ctr, keys, columnDelimiter, lineDelimiter, data; data = args.data || null; if (data == null || !data.length) { return null; } columnDelimiter = args.columnDelimiter || ','; lineDelimiter = args.lineDelimiter || '\n'; keys = Object.keys(data[0]); result = ''; result += keys.join(columnDelimiter); result += lineDelimiter; data.forEach(function(item) { ctr = 0; keys.forEach(function(key) { if (ctr > 0) result += columnDelimiter; result += item[key]; ctr++; }); result += lineDelimiter; }); return result; }
First the function loops through the keys on one of the objects to create a header row, followed by a newline. Then we loop through each object and write out the values of each property.
Here’s what you end up with:
Symbol,Company,Price AAPL,Apple Inc.,132.54 INTC,Intel Corporation,33.45 GOOG,Google Inc,554.52
Now we need a function that will take this data and turn it into a CSV file for download:
function downloadCSV(args) { var data, filename, link; var csv = convertArrayOfObjectsToCSV({ data: stockData }); if (csv == null) return; filename = args.filename || 'export.csv'; if (!csv.match(/^data:text\/csv/i)) { csv = 'data:text/csv;charset=utf-8,' + csv; } data = encodeURI(csv); link = document.createElement('a'); link.setAttribute('href', data); link.setAttribute('download', filename); link.click(); }
This function takes the CSV we created and prepends a special string that tells the browser that our content is CSV and it needs to be downloaded:
data:text/csv;charset=utf-8,
So now we have:
data:text/csv;charset=utf-8,Symbol,Company,Price AAPL,Apple Inc.,132.54 INTC,Intel Corporation,33.45 GOOG,Google Inc,554.52
We set the href attribute on our link to the above string. We also set the download attribute on our link to the filename we want to see for our download stock-data.csv
Then in our html we have a simple link that we can use to kick off things and test it out:
Download CSV
And when you click this link here’s what should happen:
You should get a download in the browser called stock-data.csv
and then when you open it, we see the data in the expected table format.
The meat of this example happens in less than 50 lines of code. The code loops through your objects generically, so it doesn’t matter what properties are on your objects. If each object had 100 or 3 properties it would work just as well.
It’s also a nifty trick that you can create a download so easily in the browser. Not all developers know that you can do that. In fact, that same special string can be modified to allow other types of downloads.
Here’s the full example if you want to play with it:
<!doctype html> Download CSV
Customized Technical Learning Solutions to Help Attract and Retain Talented Developers
Let DI help you design solutions to onboard, upskill or reskill your software development organization. Fully customized. 100% guaranteed.
DevelopIntelligence leads technical and software development learning programs for Fortune 500 companies. We provide learning solutions for hundreds of thousands of engineers for over 250 global brands.
“I appreciated the instructor’s technique of writing live code examples rather than using fixed slide decks to present the material.”
VMwareThank you for everyone who joined us this past year to hear about our proven methods of attracting and retaining tech talent.
© 2013 - 2020 DevelopIntelligence LLC - Privacy Policy
Let's review your current tech training programs and we'll help you baseline your success against some of our big industry partners. In this 30-minute meeting, we'll share our data/insights on what's working and what's not.
Training Journal sat down with our CEO for his thoughts on what’s working, and what’s not working.