Загрузить атрибут тега A, который не работает в IE

Из следующего кода я создаю динамический тег привязки, который загружает файл. Этот код хорошо работает в Chrome, но не в IE. Как я могу получить эту работу

<div id="divContainer">
    <h3>Sample title</h3>
</div>
<button onclick="clicker()">Click me</button>

<script type="text/javascript">

    function clicker() {
        var anchorTag = document.createElement('a');
        anchorTag.href = "http://cdn1.dailymirror.lk/media/images/finance.jpg";
        anchorTag.download = "download";
        anchorTag.click();


        var element = document.getElementById('divContainer');
        element.appendChild(anchorTag);
    }

</script>

Ответы

Ответ 2

В моем случае, поскольку есть требование поддержать использование IE 11 (версия 11.0.9600.18665), я в конечном итоге использовал решение, предоставленное @Henners в его комментарий:

// IE10+ : (has Blob, but not a[download] or URL)
if (navigator.msSaveBlob) {
    return navigator.msSaveBlob(blob, fileName);
}

Это довольно просто и практично.

По-видимому, это решение было найдено в Javascript download, созданной dandavis.

Ответ 3

Старый вопрос, но я подумал, что добавлю наше решение. Вот код, который я использовал в своем последнем проекте. Это не идеально, но он прошел QA во всех браузерах и IE9 +.

downloadCSV(data,fileName){
  var blob = new Blob([data], {type:  "text/plain;charset=utf-8;"});
  var anchor = angular.element('<a/>');

  if (window.navigator.msSaveBlob) { // IE
    window.navigator.msSaveOrOpenBlob(blob, fileName)
  } else if (navigator.userAgent.search("Firefox") !== -1) { // Firefox
    anchor.css({display: 'none'});
    angular.element(document.body).append(anchor);

    anchor.attr({
      href: 'data:attachment/csv;charset=utf-8,' + encodeURIComponent(data),
      target: '_blank',
      download: fileName
    })[0].click();

    anchor.remove();
  } else { // Chrome
    anchor.attr({
      href: URL.createObjectURL(blob),
      target: '_blank',
      download: fileName
    })[0].click();
  }
}

Использование специфицированного API ms наилучшим образом подходит для нас в IE. Также обратите внимание, что некоторым браузерам требуется, чтобы якорь фактически находился в DOM для использования атрибута загрузки, в то время как Chrome, например, этого не делает. Кроме того, мы обнаружили некоторые несоответствия в том, как Blobs работают в разных браузерах. Некоторые браузеры также имеют ограничение на экспорт. Это позволяет максимально возможный экспорт CSV в каждом браузере afaik.

Ответ 5

Этот фрагмент кода позволяет сохранять blob в файле в IE, Edge и других современных браузерах.

var request = new XMLHttpRequest();
request.onreadystatechange = function() {

    if (request.readyState === 4 && request.status === 200) {

        // Extract filename form response using regex
        var filename = "";
        var disposition = request.getResponseHeader('Content-Disposition');
        if (disposition && disposition.indexOf('attachment') !== -1) {
            var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
            var matches = filenameRegex.exec(disposition);
            if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
        }

        if (window.navigator.msSaveOrOpenBlob) { // for IE and Edge
            window.navigator.msSaveBlob(request.response, filename);
        } else {
            // for modern browsers
            var a = document.createElement('a');
            a.href = window.URL.createObjectURL(request.response);
            a.download = filename;
            a.style.display = 'none';
            document.body.appendChild(a);
            a.click();
        }
    }

    button.disabled = false;
    dragArea.removeAttribute('spinner-visible');
    // spinner.style.display = "none";

};
request.open("POST", "download");
request.responseType = 'blob';
request.send(formData);

Для использования IE и Edge: msSaveBlob

Ответ 6

Используйте мою функцию

Это привязать ваш атаг для загрузки файла в IE

function MS_bindDownload(el) {
    if(el === undefined){
        throw Error('I need element parameter.');
    }
    if(el.href === ''){
        throw Error('The element has no href value.');
    }
    var filename = el.getAttribute('download');
    if (filename === null || filename === ''){
        var tmp = el.href.split('/');
        filename = tmp[tmp.length-1];
    }
    el.addEventListener('click', function (evt) {
        evt.preventDefault();
        var xhr = new XMLHttpRequest();
        xhr.onloadstart = function () {
            xhr.responseType = 'blob';
        };
        xhr.onload = function () {
            navigator.msSaveOrOpenBlob(xhr.response, filename);
        };
        xhr.open("GET", el.href, true);
        xhr.send();
    })
}

Ответ 7

Сначала добавьте дочерний элемент, а затем нажмите

Или вы можете использовать window.location = 'url';

Ответ 8

Как упоминалось в более раннем ответе, атрибут загрузки не поддерживается в IE. Как работа, вы можете использовать iFrames для загрузки файла. Вот пример фрагмента кода.

function downloadFile(url){
    var oIframe = window.document.createElement('iframe');
    var $body = jQuery(document.body);
    var $oIframe = jQuery(oIframe).attr({
        src: url,
        style: 'display:none'
    });
    $body.append($oIframe);

}

Ответ 9

Отсюда я скопировал код, обновил его для ES6 и ESLint и добавил в свой проект.

Вы можете сохранить код в download.js и использовать его в своем проекте следующим образом:

import Download from './download'
Download('/somefile.png', 'somefile.png')

Обратите внимание, что он поддерживает dataURL (из объектов canvas) и многое другое... подробности см. на странице https://github.com/rndme.