如何使链接/按钮可下载？答案

【问题标题】：How to make link/button downloadable?如何使链接/按钮可下载？
【发布时间】：2012-08-06 23:49:22
【问题描述】：

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

如果选择选项是“显示”，则将显示数据（通过 JQuery 通过 AJAX 提供）。这已经完成了——没有问题。
如果选项是下载，那么如何通过点击链接（或按钮）使数据可下载？？？？

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

【问题讨论】：

标签： javascript jquery html download

【解决方案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>

【讨论】：

我从没想过只用 JS 就可以做到这一点 :)
@haynar :) JQuery = "Jumbo Quality ery awesomness" 在浏览器端或与后端的任何通信，它都会实现，`:)~
这是一个使用数据 URL 的非常酷的解决方案，显然只适用于现代浏览器。
@Strelok oh man :)) 大声笑不要开始人们会为 IE 6 争论的辩论 :))

【解决方案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

?>

【讨论】：

【解决方案3】：

你应该看看这个例子。

http://drupal.org/node/417866

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

【讨论】：