javascript - 在链接后执行 "thanks_for_downloading.html"+ "Save file..."的标准方法？

Question

让我们看看 FireFox。

他们有一个很棒的号召性用语按钮:“Firefox 3.6 - 免费下载”

您单击它，它会将您链接到一个新页面:“感谢您下载 Firefox!您的下载将在几秒钟后开始。”

然后几秒钟后弹出:“FIREFOX.exe - 你想保存还是丢弃这个文件？”

这是网络上应用程序的标准下载行为。如何以最简单的方式完成？

Answer 1

这有两个部分:

1. 强制浏览器下载文件，而不是尝试显示文件(使用 .exe 没问题，但您可能还想对图像、电影或 HTML 文件执行此操作)。
2. 提示浏览器下载文件。

假设我们只想让浏览器下载文件，而不想更改页面。我们可以像这样创建一个链接，它会按预期工作:

<a href="/download.zip">Download File</a>

您的浏览器可能不知道如何处理 zip 文件，因此它将“download.zip”直接下载到以 URL 中的文件名命名的文件中。但是，如果您想下载 JPG，这是行不通的:

<a href="/images/sunset.jpg">Save this Sunset!</a>

您的浏览器知道如何显示 JPEG，因此它会重定向页面并显示 JPEG。现在我们需要告诉浏览器不要显示它，而是下载它。为此，我们必须在服务器的响应中向它发送一些特定的 HTTP header 。

Apache 可以通过在 .htaccess 中指定 header 来处理这个问题，但我将远离特定技术，选择只讨论该机制。

因此我们将以下 header 与图像一起发送到浏览器:

Content-disposition: attachment; filename=the_sunset_of_a_lifetime.jpg;

第一个 header ，content-disposition , 告诉您的浏览器我们希望该文件是一个附件，或者换句话说，它应该被保存，而不是显示。 filename属性告诉它用于保存文件的名称(而不是“sunset.jpg”，文件将被命名为“the_sunset_of_a_lifetime.jpg”)。

现在，下载“sunset.jpg”文件的链接如我们所愿。但是，我们如何在用户不单击链接的情况下让浏览器下载它，以便我们可以显示“谢谢”页面并提示下载开始？一个简单的<meta>标签可以做到这一点，告诉浏览器在设定的时间段后重定向页面:

<meta http-equiv="refresh" content="2;url=/images/sunset.jpg">

当您的“谢谢”页面加载时带有 head 中的元标记，它将等待 2 秒，然后尝试加载图像。它将获取我们在上一步中设置的标题，并下载它而不是显示它，用户将像我们希望的那样停留在页面上。