Javascript：从页面内容下载数据到文件 [英] Javascript: Download data to file from content within the page
问题描述
设置如下：
我有一个主页，其中显示了使用逗号分隔值从页面中构建的图。我想给用户以cvs文件的形式下载数据，而无需再次联系服务器。 （因为数据已经存在）
这有可能吗？我更喜欢纯粹的JavaScript解决方案。
到目前为止，我发现： http://pixelgraphics.us/downloadify/test.html ，但它涉及到我想避免的Flash。
我以前没有想过这个问题。我很抱歉双重发布，但似乎我使用了错误的关键字或某些东西 - 我没有在这些论坛中找到解决方案。
更新：
时间肯定会改变东西;-)当我第一次回答这个问题 IE8 是最新的IE浏览器（2010年11月），因此没有跨浏览器的方式来完成此操作，无需往返服务器，或使用需要Flash的工具。
@ Zectburno的答案将为您提供您现在所需要的，但是对于历史背景知道哪些IE浏览器支持哪些功能。
- 在IE8和IE9中未定义btoa（）
- Blob在IE10 + / li>
确保在需要支持的浏览器中进行测试。即使其他答案中的Blob示例应该在IE10 +中工作，这对我来说只需点击链接就不起作用（浏览器不做任何事情，没有错误）...只有当我右键单击并将目标保存为file.csv，那么导航到该文件并双击它可以打开该文件。
在这个JSFiddle中测试两种方法（btoa / Blob）。
（这里是代码）
<！doctype html>
< html>
< head>
< / head>
< body>
< a id =atarget =_ blank>下载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 =a2download =Download.csvtype =text / csv>下载CSV（通过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>
原始答案：
$ b $我不认为有可用的选项。
我只是调整你的代码，如果检测到Flash 10+（截至2009年9月的93％饱和度）在用户系统上提供了Downloadify选项，否则后退到服务器端请求。
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.
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.
这篇关于Javascript：从页面内容下载数据到文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
