html - link - Descargar atributo en una etiqueta que no funciona en IE

todas las etiquetas de html y sus atributos pdf

Question

Desde el siguiente código, estoy creando una etiqueta dinámica de anclaje que descarga un archivo. Este código funciona bien en Chrome pero no en IE. ¿Cómo puedo hacer que esto funcione?

<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>

Answer 1

A partir de la versión 10547+, el navegador Microsoft Edge ahora admite el atributo de download en a etiqueta.

<a href="download/image.png" download="file_name.png">Download Image</a>

Actualización de las características de Edge: https://dev.windows.com/en-us/microsoft-edge/platform/changelog/desktop/10547/

un estándar [de descarga]: http://www.w3.org/html/wg/drafts/html/master/links.html#attr-hyperlink-download

Answer 2

Añada primero al niño y luego haga clic

O puede usar window.location = ''url'';

Answer 3

Como se mencionó en la respuesta anterior, el atributo de descarga no es compatible con IE. Como alternativa, puede usar iFrames para descargar el archivo. Aquí hay un fragmento de código de muestra.

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);

}

Answer 4

En mi caso, dado que existe un requisito para admitir el uso de IE 11 (versión 11.0.9600.18665), terminé usando la solución provista por Henners en su comentario:

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

Es bastante simple y práctico.

Aparentemente, esta solución se encontró en la función de github.com/rndme/download/blob/master/download.js#L143 JavaScript creada por dandavis .

Answer 5

Este fragmento de código permite guardar blob en el archivo en IE, Edge y otros navegadores modernos.

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);

Para el uso de IE y Edge: msSaveBlob

Answer 6

Internet Explorer actualmente no admite el atributo Download en etiquetas A

Ver http://caniuse.com/download y http://status.modern.ie/adownloadattribute ; el último indica que la característica es "En consideración" para IE12.

Answer 7

Una vieja pregunta, pero pensé que agregaría nuestra solución. Aquí está el código que utilicé en mi último proyecto. No es perfecto, pero aprobó el control de calidad en todos los navegadores e 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();
  }
}

El uso de la API ms específica funcionó mejor para nosotros en IE. También tenga en cuenta que algunos navegadores requieren que el anclaje esté realmente en el DOM para que funcione el atributo de descarga, mientras que Chrome, por ejemplo, no funciona. Además, encontramos algunas inconsistencias con la forma en que Blobs funciona en varios navegadores. Algunos navegadores también tienen un límite de exportación. Esto permite la mayor exportación de CSV posible en cada navegador afaik.