如何使 Safari 和 IE 下载图像而不是在新页面中打开?

问题描述：

在 Firefox 和 Chrome 中，此链接属性download=img.jpg"工作正常并显示下载窗口而不是新选项卡或页面.

In Firefox and Chrome this link property "download=img.jpg" works fine and shows the download window instead of a new tab or page.

<a href="img.jpg" download="img.jpg">Download Image</a>

但是在 Safari 和 IE 中，这个链接给了我一个新页面.

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?

答

您是否在 Apache 服务器上工作?如果是这样，您可以将其添加到您的 .htaccess 文件中:

Are you working on an Apache server? If so, you can just add this to your .htaccess file:

RewriteCond %{REQUEST_FILENAME} -f
RewriteCond %{QUERY_STRING} fdl=1
RewriteRule .? - [T=application/octet-stream]

检查它是一个文件检查参数 fdl=1 是否在查询字符串中输出为八位字节流/强制下载

Checks to see it's a file Checks if parameter fdl=1 is in querystring Output as octet-stream/force download

现在，当您希望浏览器开始下载该站点中的任何内容时，只需将参数放在 url 上:

Now when you want the browser to start downloading anything in that site, just put the parameter on the url:

<a href="img.jpg?fdl=1">Download Image</a>

要在 IIS Windows 服务器上执行相同的操作，请将出站规则添加到 web.config:

To do the same thing on a IIS windows server add the outbound rule to the 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>

编辑(10/4/2016):

看起来 download 属性仍然被没有完全采用所有浏览器.

Looks like the download attribute is still not fully adopted by all the browsers.

对于基于 JavaScript/浏览器的实现，您可以查看 FileSaver.js 这是一个polyfill 用于在不支持的浏览器中保存功能.虽然它没有完美的覆盖范围.

For a JavaScript / browser based implementation you could look at FileSaver.js which is a polyfill for saving functionality in browsers that don't support it. It doesn't have perfect coverage though.

如何使 Safari 和 IE 下载图像而不是在新页面中打开?

相关推荐