logo标签列表

HTML5 <a download> 强制“另存为”对话框

javascripthtml
3

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

你好！有没有办法在没有.htaccess的情况下强制保存图片并出现“另存为”对话框？

嘿，你的标题中拼错了“as”。最好修正一下，否则可能会被人举报。 - Anish Goyal
3
@AnishGoyal 谢谢，我有点困了。 - Унгамист Долматов
可能是强制浏览器在单击时下载图像文件的重复问题。 - jarodsmk
1
这是一个浏览器（Chrome？）功能。您的用户可以根据自己的意愿进行配置。https://i.stack.imgur.com/BvOD8.png即使FileSaver.js也无能为力... - Kaiido
@УнгамистДолматов，是的，当然可以，但您无法控制用户浏览器上的此行为，这是他们的选择，我们无法强制执行... - Kaiido
显示剩余3条评论
4个回答
3

这是一个浏览器（Chrome？）的功能。

您的用户可以根据自己的意愿进行配置。

Chrome设置截图

无论是您还是FileSaver.js都无法对此进行任何操作...

-1

通过@Kaiido的评论解决：

这是浏览器（Chrome？）的功能。您的用户可以根据自己的意愿进行配置。i.stack.imgur.com/BvOD8.png，即使FileSaver.js也无能为力...

大多数基于Chrome的浏览器（在我的情况下是Opera）默认启用此选项。

很好，很高兴你解决了它。但如果默认情况下启用了该选项，为什么它没有在保存之前询问你呢？ - jarodsmk
-1

源自文章：如何强制浏览器在单击时下载图像文件

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

您可以尝试：

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

（感谢@DrowsySaturn的答案） 值得一提的是，由于这是JS，一些旧浏览器不支持此功能。
由于每个浏览器都有自己处理链接的方式，通常浏览器会尝试显示图像，如果在a标签上指定了URL，则不会自动下载它们。这旨在通过HTML5中的download属性进行纠正，但显然有些浏览器尚未实施（而有些可能永远不会）。
PS：请先搜索您的问题，以防止重复！
1
你试过测试它吗？https://jsfiddle.net/ezsk8bvb/仍然无法运行“另存为”对话框。 - Унгамист Долматов
@УнгамистДолматов 您使用什么浏览器和版本？ https://jsfiddle.net/ezsk8bvb/1/ 对我来说是可以运行的（Chrome 57.0.2987.110（64位））。 - jarodsmk
1
你把一个特定链接是否代表要下载的文件和应用程序是否能强制出现“另存为”对话框的问题混淆了（它不能）。 - user663031
-1

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

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

浏览器如何知道它是图像而不是其他内容。服务器发送一个标头来说明这一点。在 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;
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接