javascript - 如何使链接/按钮可下载？

Question

所以情况是这样的：我有一个动态网页。有一个带有“选择”的表单，后跟一个链接（或按钮）。当用户点击链接时：

1. 如果选择选项是“显示”，则将显示数据（通过 JQuery 通过 AJAX 提供）。这已经完成了——没有问题。

2. 如果选项是下载，那么如何通过单击链接（或按钮）使数据可下载？？？？

在“下载”选项的情况下，从 AJAX 返回的结果只是 CSV 文本。它不是一个文件，只是一个 javascript 字符串。我需要做什么才能将其变成可下载的文件？

Answer 1

试试这个：http: //jsfiddle.net/vpnQe/

随意玩，希望对您的需求有所帮助:)

代码

var URL = window.webkitURL || window.URL;
var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder || window.BlobBuilder;

var url;

$("button").click(function() {
    if (url) URL.revokeObjectURL(url);
    var bb = new BlobBuilder();
    bb.append("it works!");
    var file = bb.getBlob("text/plain");
    url = URL.createObjectURL(file);
    $("a[download]").attr("href", url);

    var evt = document.createEvent('MouseEvents');
    evt.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
    $("a[download]")[0].dispatchEvent(evt);
});​

HTML

<article>
    <button type="button">create url, put it in below link, and click it</button><br/>
    <a download="test.txt">Download as text.txt</a>
</article>
<footer>
<ul>
    <li><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/window.URL.createObjectURL">window.URL.createObjectURL</a></li>
    <li><a href="http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download">a[download]</a></li>
</ul>
</footer>​

Answer 2

我建议您在选择“下载”选项时打开一个新窗口，并在服务器端使用适当的标题告诉浏览器该内容应该下载到文件中，而不是在窗口中显示。中的标头主要取决于您要下载的内容，例如使用 PHP 的 CSV（因为我不知道您使用哪种服务器端语言）

<?php
header("Content-type: application/octet-stream");
header("Content-Disposition: attachment; filename=\"my-data.csv\"");

// output the content of your file here

?>

Answer 3

你应该看看这个例子。

http://drupal.org/node/417866

如果您正在运行 Apache，它将改变每个目录的控制方式，因此您不必将其放入代码中。您只需将其放在 .htaccess 控制信息传递给客户端的方式的位置。