jQuery从一个按钮下载一个zip文件？

Posted 2023-03-06

【中文标题】jQuery从一个按钮下载一个zip文件？

【英文标题】：jQuery download a zipfile from a button?

【发布时间】：2010-05-20 23:23:41

【问题描述】：

很尴尬我花了多少时间试图从一个按钮下载一个 zip 文件....

<button type='button' id='button-download'>download zipfile</button>


$("#button-download").live("click", function() 
    $.get("http://localhost/admin/zip/002140.zip"); // doesn't work?
)

我在这里需要一些防弹的东西，所以我在这里问，谢谢。

【参考方案1】：

使用普通的：

<a href="http://localhost/admin/zip/002140.zip" id="button-download">download zipfile</a>

链接。然后它会在没有 javascript 可用的情况下正常工作（甚至“防弹”）。它还提供了用户可能期望从下载链接中获得的更多传统功能，例如右键单击另存为或拖放。

您当然可以使用 CSS 使其看起来像一个按钮而不是一个链接。但它实际上是一个链接。所以应该是这样标记的。

【讨论】：

谢谢 我用这个作为“下载问题？”下的备份。它在 JavaScript 中，但它是一个管理面板，我的用户需要在任何地方启用 JavaScript。

【参考方案2】：

您应该设置location.href 属性以引起导航：

$("#button-download").live("click", function() 
  location.href = "http://localhost/admin/zip/002140.zip";
);

您还可以有一个简单的<a> 元素，其样式就像一个按钮，这样即使禁用了 JavaScript 的用户也可以下载该文件。

【讨论】：

天哪，location.href，该睡觉了！

实际上我有一个问题，当使用这个或 window.location 时，我丢失了由 jQuery 创建的 DOM。这不是问题，但更糟糕的是页面变为-1，比如点​​击后退按钮？ WTF??

如果你在这篇文章发布 5 年后访问这里，.live() 在 jquery 1.9 中被删除，所以使用 .on()。 （感谢下面的 PaparazzoKid）

【参考方案3】：

这是发送一个 AJAX 请求。

我没有尝试过，但理论上它应该可以工作。如果您尝试转到已下载文件的位置，它会提示您下载而不是带您到该页面。

<button type='button' id='button-download'>download zipfile</button>


$("#button-download").live("click", function() 
    window.location = "http://localhost/admin/zip/002140.zip";
)

【讨论】：

对于未来的冲浪者，请使用 .on() 而不是 .live()。 .live() 在 jQuery 1.9 中被移除。

【参考方案4】：

聚会迟到了，但我想我会像其他人一样分享我的解决方案。

您可以两全其美；一个简单的 html 链接和一个 JS 函数，不丢失非 JS 用户。

<a id="download" href="http://www.example.com/download.zip">Download</a>

$("#download").on("click", function(e) 

    // cancel the link's original functionality
    e.preventDefault();

    // do something before downloading
    alert("Thanks for downloading!");

    // download file
    location.href = "http://www.example.com/download.zip";

);