html5 <a download=""> force &#34;save as&#34; dialogue

时间:2017-03-23 04:03:31

标签: javascript html5

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

Hello! Any suggestions to force save-as dialogue for image w/o .htaccess?

4 个答案:

答案 0 :(得分:3)

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

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

Screenshot of Chrome's settings

你甚至FileSaver.js都无法做任何事情......

答案 1 :(得分:-1)

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

由于html5'download'属性仍然只适用于兼容的浏览器。 (根据@ 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:首先尝试搜索您的问题,以防止重复!

答案 2 :(得分:-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;

答案 3 :(得分:-1)

@Kaiido评论解决:

  

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

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