Как сделать Safari и IE загружать изображение вместо открытия на новой странице?

В Firefox и Chrome свойство этой ссылки "download = img.jpg" отлично работает и отображает окно загрузки вместо новой вкладки или страницы.

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

Но в Safari и IE эта ссылка дает мне новую страницу.

Итак, что представляет собой простой и эффективный рабочий процесс для обработки этого браузера Safari и IE?

Ответы

Ответ 1

Вы работаете на сервере Apache? Если это так, вы можете просто добавить это в свой файл .htaccess:

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

Проверяет, есть ли файл Проверяет, находится ли параметр fdl = 1 в querystring Вывод как октет-поток/сила скачать

Теперь, когда вы хотите, чтобы браузер начал загружать что-либо на этом сайте, просто поместите параметр на URL:

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

Чтобы сделать то же самое на сервере окон IIS, добавьте исходящее правило в 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):

Похоже, что атрибут download по-прежнему не полностью принят всеми браузерами.

Для реализации на основе JavaScript/браузера вы можете посмотреть FileSaver.js, который является polyfill для сохранения функциональности в браузерах, которые не Не поддерживайте его. Тем не менее, у него нет идеального покрытия.

Ответ 3

Это способ сделать это в 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;

Ответ 4

Самый простой способ - использовать серверный язык, такой как PHP. Он действительно более подробно обсудил эту страницу, в том числе пробный код для манипулирования заголовками и т.д. К сожалению, это единственные решения, пока IE и Safari не догонят.

Refrence: