如何使链接/按钮可下载?

时间:2012-08-06 23:49:22

标签: javascript jquery html download

所以情况如下: 我有一个动态网页。有一个表格用"选择",然后是一个链接(或一个按钮)。  当用户点击链接时:

  1. 如果选择选项是"显示",则将显示数据(通过JQuery通过AJAX提供)。这是完成, - 没有任何问题。

  2. 如果选项是下载,那么如何通过点击链接(或按钮)来下载数据????

  3. 从AJAX返回的结果只是CSV文本,如果是"下载"选项。它不是一个文件,只是一个javascript字符串。如何将其转换为可下载的文件?

3 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:0)

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

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

// output the content of your file here

?>

答案 2 :(得分:0)

你应该看看这个例子。

http://drupal.org/node/417866

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