html5 <a 下载> 强制“另存为”对话框答案

【问题标题】：html5 <a download> force "save as" dialoguehtml5 <a 下载> 强制“另存为”对话框
【发布时间】：2017-03-23 04:03:31
【问题描述】：

<html>
  <body>
    <a href="https://www.google.com.ua/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" download> download</a>
  </body>
</html>

你好！有什么建议可以强制使用不带 .htaccess 的图像进行另存为对话？

【问题讨论】：

嘿，你在标题中拼错了“as”。可能想解决这个问题，如果你不这样做，有人可能会标记你的问题。
@AnishGoyal ty，我有点困了
@JaromandaX 它看起来像太重的解决方案
force browser to download image files on click的可能重复
这是一个浏览器 (chrome ? ) 功能。您的用户可以根据需要对其进行配置。 i.stack.imgur.com/BvOD8.png 甚至 FileSaver.js 对此也无能为力...

标签： javascript html

【解决方案1】：

这是一个浏览器 (chrome ? ) 功能。

您的用户可以根据需要对其进行配置。

您甚至 FileSaver.js 都无能为力...

【讨论】：

【解决方案2】：

改编自帖子： force browser to download image files on click

由于 html5 的“下载”属性仍然只适用于兼容的浏览器。（根据@RichardParnaby-King 的answer）

你可以试试：

var link = document.createElement('a');
link.href = 'images.jpg';
link.download = 'Download.jpg';
document.body.appendChild(link);
link.click();

（感谢@DrowsySaturn 的answer）还值得一提的是，由于是JS，一些老版本的浏览器是不支持的。

由于每个浏览器都有自己处理链接的方式，通常浏览器会在标签上的 URL 指定时显示图像，而不是自动下载它们。这旨在通过download attribute in HTML5 进行纠正，但显然有些浏览器尚未实现（有些可能永远不会实现）。

PS：请先尝试搜索您的问题，以防止重复！

【讨论】：

你试过测试吗？ jsfiddle.net/ezsk8bvb 仍然没有运行“另存为”对话框。
@УнгамистДолматов 您使用什么浏览器和版本？ jsfiddle.net/ezsk8bvb/1 为我工作（Chrome 57.0.2987.110（64 位））。
您混淆了特定链接是否代表要下载的文件的问题，以及应用程序是否可以强制“另存为...”对话框（它不能）的问题。

【解决方案3】：

最可靠的方法是在服务器端强制它。

为方便起见，浏览器会以特定方式自动处理特定内容。特别是，浏览器将通过内联显示图像来自动处理图像，这是您要避免的。

浏览器如何知道这是一张图片，而不是其他一些内容。服务器发送一个标头来说明这一点。对于 png 图片，服务器会发送如下内容：

Content-Type: image/png.

诀窍是让服务器也发送处理内容的首选方法。在您的情况下，您需要这样的标题：

Content-disposition: attachment; filename=…

这将告诉浏览器下载它。

执行此操作的简单 PHP 脚本如下所示：

//  assuming png
$filename=@_GET['filename'];
$data=file_get_contents($filename);
header("Content-disposition: attachment; filename=$filename");
header('Content-type: image/png');
print $data;

【讨论】：

【解决方案4】：

由@Kaiido的评论解决：

这是一个浏览器 (chrome ? ) 功能。您的用户可以将其配置为他希望。 i.stack.imgur.com/BvOD8.png 甚至 FileSaver.js 都做不到关于它的任何东西......

大多数基于 chrome 的浏览器（在我的例子中是 Opera）默认启用此选项。

【讨论】：

酷，很高兴你解决了它。如果默认情况下启用了该选项，为什么它之前不要求您保存？