Html 如何使 Safari 和 IE 下载图像而不是在新页面中打开？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18578473/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make Safari and IE download image instead of opening in a new page?
提问by Sakari Niittymaa
In Firefox and Chrome this link property "download=img.jpg" works fine and shows the download window instead of a new tab or page.
在 Firefox 和 Chrome 中，此链接属性“download=img.jpg”工作正常，并显示下载窗口而不是新选项卡或页面。
<a href="img.jpg" download="img.jpg">Download Image</a>
But in Safari and IE this link gives me a new page.
但是在 Safari 和 IE 中，这个链接给了我一个新页面。
So what is a simple and effective workflow to handle this with Safari and IE browsers?
那么，使用 Safari 和 IE 浏览器处理这个问题的简单有效的工作流程是什么？
采纳答案by Nick Kuznia
Are you working on an Apache server? If so, you can just add this to your .htaccess file:
你在 Apache 服务器上工作吗？如果是这样，您可以将其添加到您的 .htaccess 文件中：
RewriteCond %{REQUEST_FILENAME} -f
RewriteCond %{QUERY_STRING} fdl=1
RewriteRule .? - [T=application/octet-stream]
Checks to see it's a file Checks if parameter fdl=1 is in querystring Output as octet-stream/force download
检查以查看它是一个文件 检查参数 fdl=1 是否在查询字符串中 输出为八位字节流/强制下载
Now when you want the browser to start downloading anything in that site, just put the parameter on the url:
现在，当您希望浏览器开始下载该站点中的任何内容时，只需将参数放在 url 上：
<a href="img.jpg?fdl=1">Download Image</a>
To do the same thing on a IIS windows server add the outbound rule to the web.config:
要在 IIS Windows 服务器上执行相同的操作，请将出站规则添加到 web.config：
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<outboundRules>
<rule name="Force Download">
<match serverVariable="RESPONSE_Content_Disposition" pattern=".?" negate="false" />
<action type="Rewrite" value="application/octet-stream" replace="true" />
<conditions>
<add input="{QUERY_STRING}" pattern="fdl=1" />
</conditions>
</rule>
</outboundRules>
</rewrite>
</system.webServer>
</configuration>
EDIT (10/4/2016):
编辑（10/4/2016）：
Looks like the downloadattribute is still not fully adoptedby all the browsers.
看起来该download属性仍未被所有浏览器完全采用。
For a JavaScript / browser based implementation you could look at FileSaver.jswhich is a polyfill for saving functionality in browsers that don't support it. It doesn't have perfect coverage though.
对于基于 JavaScript / 浏览器的实现，您可以查看FileSaver.js，它是一个 polyfill，用于在不支持的浏览器中保存功能。虽然它没有完美的覆盖。
回答by mgreca
This is a way to do it in IE with JavaScript. However, I can't find a solution for Safari yet
这是一种在 IE 中使用 JavaScript 实现的方法。但是，我还找不到 Safari 的解决方案
var canvas = document.createElement('canvas');
var img = document.createElement('img');
img.onload = function(e) {
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext('2d');
context.drawImage( img, 0, 0, img.width, img.height);
window.navigator.msSaveBlob(canvas.msToBlob(),'image.jpg');
}
img.src = 'img.jpg;
回答by SITDGNymall
The easiest is to use a Server-side language like PHP. It's really discussed more in depth on this page, including some trial code for manipulating headers and such. Unfortunately, these are the only solutions until IE and Safari catch up.
最简单的方法是使用像 PHP 这样的服务器端语言。此页面上确实对其进行了更深入的讨论，包括一些用于操作标头等的试验代码。不幸的是，在 IE 和 Safari 赶上之前，这些是唯一的解决方案。
Refrence:
参考：
回答by JaffaTheCake
navigator.msSaveBlob(blob, filename)
https://msdn.microsoft.com/sv-se/library/windows/apps/hh772331
https://msdn.microsoft.com/sv-se/library/windows/apps/hh772331
Unfortunately I don't know a way to do it in Safari.
不幸的是，我不知道如何在 Safari 中做到这一点。
