html5 <a 下载> 强制“另存为”对话框
Posted
技术标签:
【中文标题】html5 <a 下载> 强制“另存为”对话框【英文标题】：html5 <a download> force "save as" dialogue 【发布时间】：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 对此也无能为力... 【参考方案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）默认启用此选项。
【讨论】：
酷，很高兴你解决了它。如果默认情况下启用了该选项，为什么它之前不要求您保存？以上是关于html5 <a 下载> 强制“另存为”对话框的主要内容，如果未能解决你的问题，请参考以下文章
强制打开“另存为...”弹出窗口在文本链接处打开单击以获取 HTML 中的 PDF
用“Content-Disposition:attachment;”强制弹出“另存为”对话框后，JS失效