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.

    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.