如何使链接/按钮可下载

How to make link/button downloadable?

本文关键字：下载 按钮 何使 链接      更新时间：2023-09-26

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

  1. 如果选择选项是"显示"，则将显示数据（通过 AJAX 通过 JQuery 馈送）。这是完成的，--没有探针。

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

从 AJAX 返回的结果只是 CSV 文本，以防"下载"选项。它不是一个文件，只是一个javascript字符串。我需要做什么才能将其转换为可下载的文件？

试试这个： 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>​

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

<?php
header("Content-type: application/octet-stream");
header("Content-Disposition: attachment; filename='"my-data.csv'"");
// output the content of your file here
?>

你应该看看这个例子。

http://drupal.org/node/417866

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

相关文章：