在 Firefox 和 Chrome 中,此链接属性“download=img.jpg”工作正常,并显示下载窗口而不是新标签或页面。
<a href="img.jpg" download="img.jpg">Download Image</a>
但在 Safari 和 IE 中,这个链接给了我一个新页面。
那么使用 Safari 和 IE 浏览器处理这个问题的简单有效的工作流程是什么?
在 Firefox 和 Chrome 中,此链接属性“download=img.jpg”工作正常,并显示下载窗口而不是新标签或页面。
<a href="img.jpg" download="img.jpg">Download Image</a>
但在 Safari 和 IE 中,这个链接给了我一个新页面。
那么使用 Safari 和 IE 浏览器处理这个问题的简单有效的工作流程是什么?
你在 Apache 服务器上工作吗?如果是这样,您可以将其添加到您的 .htaccess 文件中:
RewriteCond %{REQUEST_FILENAME} -f
RewriteCond %{QUERY_STRING} fdl=1
RewriteRule .? - [T=application/octet-stream]
检查它是否是一个文件 检查参数 fdl=1 是否在查询字符串中 输出为八位字节流/强制下载
现在,当您希望浏览器开始下载该站点中的任何内容时,只需将参数放在 url 上:
<a href="img.jpg?fdl=1">Download Image</a>
要在 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>
编辑(2016 年 10 月 4 日):
看起来该download
属性仍未被所有浏览器完全采用。
对于基于 JavaScript / 浏览器的实现,您可以查看FileSaver.js,它是一种用于在不支持它的浏览器中保存功能的 polyfill。虽然它没有完美的覆盖范围。
这是一种在 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;
最简单的是使用像 PHP 这样的服务器端语言。在此页面上确实对其进行了更深入的讨论,包括一些用于操作标头等的试用代码。不幸的是,在 IE 和 Safari 赶上之前,这些是唯一的解决方案。
参考:
navigator.msSaveBlob(blob, filename)
https://msdn.microsoft.com/sv-se/library/windows/apps/hh772331
不幸的是,我不知道如何在 Safari 中做到这一点。