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

【问题标题】：jQuery download a zipfile from a button?jQuery从一个按钮下载一个zip文件？
【发布时间】：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?
})

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

【问题讨论】：

标签： jquery button zipfile

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

});

【讨论】：