Let’s say that you have an array of arrays that is dynamically generated and you would like to provide a download link/button to download it as a CSV. How would you go about doing it? Ordinarily you would go about sending the data to the server which would then be able to make a downloadable version of the data. Believe it or not, there is also a way to do it in modern browsers without ever needing to make additional requests to a server. The following JSBin proves this by providing a large
textarea that can be modified and a download link which when clicked (in modern browsers) will download a file with the specified contents:
How does it work? We basically just rely on data URIs. For instance, clicking here should result in downloading a file with text saying
Hello World!!!. This an simply an anchor element (
<a>) with an
data:text/plain;charset=utf-8,Hello%20world!!!. In addition, some newer browsers (Chrome and FireFox) support the
download attribute being set to specify the default file name when downloaded.
How do you get it to be dynamic? You can simply modify the
href attribute when the link is clicked, by binding the necessary code to the
click event of the link. Here is a simple version of the JSBin shown:
Ignoring the omitted CSS rules, you will notice that the concept is quite simple. The one thing you want to remember is that in order to make sure that all characters are downloaded correctly you will want to use
encodeURIComponent(). I have seen implementations that use
escape(), but that function is deprecated and doesn’t always encode the characters correctly.
Have fun making your quick custom download buttons 😎