[removed] Download data to file from content withi

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.

标签： javascript file download local

8条回答

男人必须洒脱

2楼-- · 2019-01-22 03:37

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>

0人赞添加讨论(0) 举报

霸刀☆藐视天下

3楼-- · 2019-01-22 03:37

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";

0人赞添加讨论(0) 举报

戒情不戒烟

4楼-- · 2019-01-22 03:38

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.

0人赞添加讨论(0) 举报

你好瞎i

5楼-- · 2019-01-22 03:38

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.

0人赞添加讨论(0) 举报

Fickle 薄情

6楼-- · 2019-01-22 03:39

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");

0人赞添加讨论(0) 举报

你好瞎i

7楼-- · 2019-01-22 03:39

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

0人赞添加讨论(0) 举报

1 2 下一页

[removed] Download data to file from content withi

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间