Pobierz atrybut w tagu A, który nie działa w IE

Question

Z poniższego kodu tworzę dynamiczny znacznik zakotwiczenia, który pobiera plik. Ten kod działa dobrze w Chrome, ale nie w IE. Jak mogę dostać tę pracę

<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

Program Internet Explorer nie obsługuje obecnie atrybutów Download na znacznikach A.

Zobacz http://caniuse.com/download i http://status.modern.ie/adownloadattribute; ten ostatni wskazuje, że funkcja jest "pod uwagę" dla IE12.

Answer 2

Dołącz dziecko, a potem kliknij

Albo można użyć window.location = „url”;

Answer 3

Jak wspomniano we wcześniejszej odpowiedzi, atrybut pobierania nie jest obsługiwany w IE. Jako obejście możesz użyć iFrame do pobrania pliku. Oto przykładowy fragment kodu.

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

Jako budowy 10547+, przeglądarka Microsoft Edge jest obecnie wsparcie atrybut download na a tagów.

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

Krawędź Zaktualizowane funkcje: https://dev.windows.com/en-us/microsoft-edge/platform/changelog/desktop/10547/

A [pobierz] standard: http://www.w3.org/html/wg/drafts/html/master/links.html#attr-hyperlink-download

Answer 5

Stare pytanie, ale myślałem, że dodać nasze rozwiązanie. Oto kod użyty w moim ostatnim projekcie. Nie jest doskonały, ale przeszedł kontrolę jakości we wszystkich przeglądarkach i 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(); 
    } 
} 

Używanie specyficznego dla MS interfejsu API działało najlepiej dla nas w IE. Zwróć też uwagę, że niektóre przeglądarki wymagają, aby kotwica faktycznie znajdowała się w DOM, aby atrybut atrybucji działał, podczas gdy Chrome na przykład nie. Ponadto znaleźliśmy kilka niespójności w działaniu Blobów w różnych przeglądarkach. Niektóre przeglądarki mają również limit eksportu. Pozwala to na największy możliwy eksport CSV w każdej przeglądarce afaik.

Answer 6

Ten fragment kodu pozwala na zapisywanie kropli w pliku w IE, Edge i innych nowoczesnych przeglądarkach.

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

Dla IE i EDGE użytku: msSaveBlob

Answer 7

w moim przypadku, ponieważ nie jest to wymóg, aby wspierać korzystanie z IE 11 (wersja 11.0.9600.18665), skończyło się za pomocą rozwiązania dostarczonego przez @Henners na jego komentarz:

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

Jest to bardzo proste i praktyczne.

Najwyraźniej to rozwiązanie zostało znalezione w funkcji Javascript download utworzonej przez dandavis.