Javascript:从页面内的内容下载数据到文件 [英] Javascript: Download data to file from content within the page
问题描述
设置如下:我有一个主页，我在其中显示了一个图表，该图表是使用页面内的逗号分隔值构建的.我想让用户无需再次联系服务器就可以将数据下载为 cvs 文件.(因为数据已经存在)这有可能吗?我更喜欢纯 JavaScript 解决方案.
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.
到目前为止我发现:http://pixelgraphics.us/downloadify/test.html 但它涉及我想避免的闪光.
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.
推荐答案
更新:
时间肯定会改变事情;-) 当我第一次回答这个问题时，IE8 是可用的最新 IE 浏览器(2010 年 11 月)，因此如果没有往返服务器，或使用需要 Flash 的工具.
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 的回答 将为您提供您现在需要的东西，但是对于历史背景，请注意哪些 IE 浏览器支持哪些功能.
@Zectburno's answer will get you what you need now, however for historical context be aware of which IE browsers support which feature.
- btoa() 在 IE8 和 IE9 中未定义
- Blob 在 IE10+ 中可用
请务必在您需要支持的浏览器中进行测试.即使另一个答案中的 Blob 示例应该在 IE10+ 中工作，但仅单击链接对我不起作用(浏览器什么也不做，没有错误)......只有当我右键单击并将目标另存为file.csv"然后导航到文件并双击它可以打开文件.
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.
在此 JSFiddle 中测试两种方法 (btoa/Blob).(这是代码)
<!doctype html>
<html>
<head>
</head>
<body>
<a id="a" target="_blank">Download CSV (via btoa)</a>
<script>
var csv = "a,b,c
1,2,3
";
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
1,2,3
";
var data = new Blob([csv]);
var a2 = document.getElementById("a2");
a2.href = URL.createObjectURL(data);
</script>
</body>
</html>
原答案:
我认为没有可用的选项.
I don't think there is an option available for this.
如果检测到 Flash 10+，我会调整您的代码(截至 2009 年 9 月的饱和度为 93%) 在用户系统上，提供 Downloadify 选项，否则回退到服务器端请求.
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.
这篇关于Javascript:从页面内的内容下载数据到文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
