28

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.

alex
  • 479,566
  • 201
  • 878
  • 984
Simon
  • 303
  • 1
  • 3
  • 6

8 Answers8

36

Tested on Safari 5, Firefox 6, Opera 12, Chrome 26.

<a id='a'>Download CSV</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>

HTML5

<a id='a' download='Download.csv' type='text/csv'>Download CSV</a>
<script>
    var csv = 'a,b,c\n1,2,3\n';
    var data = new Blob([csv]);
    var a = document.getElementById('a');
    a.href = URL.createObjectURL(data);
</script>
Zectbumo
  • 4,128
  • 1
  • 31
  • 26
  • This is what I use, however in Mozzila Firefox, it causes horrible laggs for large files (>6MB). – Tomáš Zato Apr 22 '14 at 12:17
  • 2
    If the URL is too big, then the download will simply fail in Chrome. – Nate Glenn Mar 24 '17 at 15:29
  • It would be helpful to hear what you mean by "too big". How many MB are you trying to download? You might need to use the HTML 5 method since the older method can only handle ~4kB depending on browser. – Zectbumo Mar 26 '17 at 21:34
  • For large files, the problem is that the html parser needs to parse the entire string which takes time... – swift-lynx Apr 24 '20 at 16:03
  • @swift-lynx, I don't follow. There is no parsing, and much less, no html parsing involved that would take any substantial time. – Zectbumo Jul 24 '23 at 03:29
29

Simple solution : 

function download(content, filename, contentType)
{
    if(!contentType) contentType = 'application/octet-stream';
        var a = document.createElement('a');
        var blob = new Blob([content], {'type':contentType});
        a.href = window.URL.createObjectURL(blob);
        a.download = filename;
        a.click();
}

Usage

download("csv_data_here", "filename.csv", "text/csv");
Yassir Ennazk
  • 6,970
  • 4
  • 31
  • 37
13

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.

@Zectburno'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.

Community
  • 1
  • 1
scunliffe
  • 62,582
  • 25
  • 126
  • 161
  • Can dowloadify be invoked from javascript? It would be tricky to create a flash button to fit my design. – Tomáš Zato Apr 22 '14 at 12:19
  • @TomášZato yes it can be invoked by JavaScript: https://github.com/dcneiner/Downloadify – scunliffe Apr 22 '14 at 12:39
  • A don't see how's that an answer to my question. I've read the "documentation", however my question was if the download can be triggered from javascript. That's unfortunately [impossible](https://github.com/dcneiner/Downloadify/issues/20) - the Downloadify button must be clicked. – Tomáš Zato Apr 22 '14 at 12:46
  • The click is required, but downloadify is not! – DUzun Aug 14 '14 at 14:01
3

As far as I know, this is not possible: This is why Downloadify was created.

You could try linking to a data:URL containing CSV data, but there will be cross-browser trouble.

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
3
function export(exportAs) {
    var csvText = tableRowsToCSV(this.headTable.rows);­
    csvText += tableRowsToCSV(this.bodyTable.rows);­
    //open the iframe doc for writing
    var expIFrame;
    if (strBrowser == "MSIE") expIFrame = document.exportiframe;
    else expIFrame = window.framesexportiframe;
    var doc = expIFrame.document;
    doc.open('text/plain', 'replace');
    doc.charset = "utf-8";
    doc.write(csvText);
    doc.close();
    var fileName = exportAs + ".txt";
    doc.execCommand("SaveAs", null, fileName);
}

function tableRowsToCSV(theRows) {
    var csv = "";
    var csvRow = "";
    var theCells;
    var cellData = "";
    for (var r = 0; r < theRows.length; r++) {
        theCells = theRows.item(r).cells;
        for (var c = 0; c < theCells.length; c++) {
            cellData = "";
            cellData = theCells.item(c).innerText;
            if (cellData.indexOf(",") != -1) cellData = "'" + cellData + "'";
            if (cellData != "") csvRow += "," + cellData;
        }
        if (csvRow != "") csvRow = csvRow.substring(1, csvRow.length);­
        csv += csvRow + "\n";
        csvRow = "";
    }
    return csv;
}

I found this code elsewhere, here, previously

Kijewski
  • 25,517
  • 12
  • 101
  • 143
Blowsie
  • 40,239
  • 15
  • 88
  • 108
2

If your users have up to date browsers, the new Blob object could help you.

Based on the example here https://developer.mozilla.org/en/docs/DOM/Blob ("Blob constructor example usage"), you could do something like the following:

var typedArray = "123,abc,456"; //your csv as a string
var blob = new Blob([typedArray], {type: "text/csv"});
var url = URL.createObjectURL(blob);
var a = document.querySelector("#linktocsv"); // the id of the <a> element where you will render the download link
a.href = url;
a.download = "file.csv";
Joe Sarre
  • 348
  • 2
  • 8
2

HTML:

<a href="javascript:onDownload();">Download</a>

JavaScript:

function onDownload() {
    document.location = 'data:Application/octet-stream,' +
                         encodeURIComponent(dataToDownload);
}

Taken from How to Download Data as a File From JavaScript

Sneg
  • 1,039
  • 1
  • 11
  • 15
  • 1
    This is a simple solution, but as mentioned on the original source, it is not known yet of a way to give the download file a name. If anyone knows the solution to this problem, it would be appreciated. – Bruno Finger Mar 03 '15 at 13:57
2

The most comprehensive solution I have run across is using FileSaver.js, handling many potential cross-browser issues for you with fallbacks.

It takes advantage of the Blob object as other posters have done, and the creator even creates a Blob.js polyfill in case you need to support browser versions that don't support Blob

Andrew Ho
  • 583
  • 3
  • 14