Sim*_*mon 22 javascript file local download
设置如下:我有一个主页,我在其中显示使用页面内的逗号分隔值构建的图表.我想让用户可以将数据作为cvs文件下载,而无需再次联系服务器.(因为数据已经存在)这有可能吗？我更喜欢纯JavaScript解决方案.
到目前为止,我已经发现:http://pixelgraphics.us/downloadify/test.html但它涉及闪存,我想避免.
我无法想象以前没有问过这个问题.我很抱歉双重发帖,但似乎我使用了错误的关键字或其他东西 - 我在这些论坛中找不到解决方案.
Zec*_*umo 28
在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>
Yas*_*azk 18
简单方案:
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();
}
用法
download("csv_data_here", "filename.csv", "text/csv");
更新:
时间当然变化的东西;-)当我第一次回答了这个问题IE8是可用的最新IE浏览器(2010年11月),因此,没有跨浏览器的方式来做到这一点无需往返于服务器,或者使用需要闪光灯的工具.
@ Zectburno的回答会让你,你现在需要的,但是,对于历史背景了解其中的IE浏览器都支持该功能.
请务必在您需要支持的浏览器中进行测试.即使其他答案中的Blob示例应该在IE10 +中工作,但它对我来说不起作用只需单击链接(浏览器什么都不做,没有错误)...只有当我右键单击并将目标保存为"file.csv"然后导航到该文件并双击它我可以打开该文件.
在这个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\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>
原答案:
我认为没有可供选择的选项.
我只是调整您的代码,以便在用户系统上检测到Flash 10+(截至2009年9月的93%饱和度)时,提供Downloadify选项,否则回退到服务器端请求.