Search code examples
javascriptfiledownloadlocal

Javascript: Download data to file from content within the page


setting is the following: I have a homepage where I display a diagram that has been constructed using comma seperated values from within the page. I'd like to give users the possibility to download the data as cvs-file without contacting the server again. (as the data is already there) Is this somehow possible? I'd prefer a pure JavaScript solution.

So far I've discovered: http://pixelgraphics.us/downloadify/test.html but it involves flash which I'd like to avoid.

I can't imagine this question hasn't been asked before. I'm sorry to double post, but it seems I've used the wrong keywords or something - I haven't found a solution in these forums.


Solution

  • Update:

    Time certainly changes things ;-) When I first answered this question IE8 was the latest IE browser available (Nov 2010) and thus there was no cross browser way to accomplish this without a round trip to the server, or using a tool requiring Flash.

    @Zectbumo's answer will get you what you need now, however for historical context be aware of which IE browsers support which feature.

    • btoa() is undefined in IE8 and IE9
    • Blob is available in IE10+

    Be sure to test in the browsers you need to support. Even though the Blob example in the other answer should work in IE10+ it doesn't work for me just clicking the link (browser does nothing, no error)... only if I right click and save target as "file.csv" then navigate to the file and double-click it can I open the file.

    Test both approaches (btoa/Blob) in this JSFiddle. (here's the code)

    <!doctype html>
    <html>
    <head>
    </head>
    <body>
      <a id="a" target="_blank">Download CSV (via btoa)</a>
      <script>
        var csv = "a,b,c\n1,2,3\n";
        var a = document.getElementById("a");
        a.href = "data:text/csv;base64," + btoa(csv);
      </script>
      <hr/>
      <a id="a2" download="Download.csv" type="text/csv">Download CSV (via Blob)</a>
      <script>
        var csv = "a,b,c\n1,2,3\n";
        var data = new Blob([csv]);
        var a2 = document.getElementById("a2");
        a2.href = URL.createObjectURL(data);
      </script>
    </body>
    </html>
    

    Original Answer:

    I don't think there is an option available for this.

    I would just adjust your code such that if Flash 10+ is detected (93% saturation as of September 2009) on the user's system, provide the Downloadify option, otherwise fallback to a server-side request.