webentwicklung-frage-antwort-db.com.de

Laden Sie einen Blob von der HTTP-URL in herunter IE 11

Meine Seite generiert eine URL wie folgt: blob:http%3A//localhost%3A8383/568233a1-8b13-48b3-84d5-cca045ae384f, Blob mit Dateidaten. Ich lade dies als Datei in jedem Browser außer IE 11 herunter. Wie kann ich diesen Blob in IE 11 herunterladen? Eine neue Registerkarte wird geöffnet und eine kontinuierliche Aktualisierung wird ausgeführt.

var file = new Blob([data], { type: 'application/octet-stream' });
var reader = new FileReader();
reader.onload = function (e) {
    var text = reader.result;
}
reader.readAsArrayBuffer(file);
var fileURL = URL.createObjectURL(file);
var filename = fileURL.replace(/^.*[\\\/]/, '');
var name = filename + '.doc';

var a = $("<a style='display: none;'/>");
a.attr("href", fileURL);
a.attr("download", name);
$("body").append(a);
a[0].click();
a.remove();
javascriptjqueryangularjsblob
7
Jeff Dean

IE11 unterstützt URL.createObjectURL () nicht

Arbeite für mich.

IE11 werde ich verwenden

window.navigator.msSaveOrOpenBlob(blob, fileName);

Oder wenn die Bedingung überprüft wird.

var blob = 'Blob Data';
if(window.navigator.msSaveOrOpenBlob) {

    // IE11
    window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {

    // Google chome, Firefox, ....
    var url = (window.URL || window.webkitURL).createObjectURL(blob);
    $('#filedownload').attr('download', fileName);
    $('#filedownload').attr('href', url);  
    $('#filedownload')[0].click();
}

Lesen Sie mehr: Feste URL.createObjectURL () - Funktion funktioniert nicht in IE 11

Demo: JSFiddle

8
bamossza

Die Antwort von Fidel90 funktioniert in IE 11 gut, nachdem der IE-spezifische Teil folgendermaßen geändert wurde:

(!window.navigator.msSaveBlob ? false : function (blobData, fileName) {
      return window.navigator.msSaveBlob(blobData, fileName);
})
4
zsivjos

In IE versuchen Sie window.navigator.saveBlob(fileURL,name);.

Weitere Informationen finden Sie in der Dokumentation unter MSDN .

In der Vergangenheit habe ich die folgende wirklich praktische Polyfill erstellt, um IE zu überprüfen und das Herunterladen über href zu verwenden. Vielleicht hilft es Ihnen (oder anderen):

//check for native saveAs function
    window.saveAs = window.saveAs || window.webkitSaveAs || window.mozSaveAs || window.msSaveAs ||
        //(msIE) save Blob API
        (!window.navigator.saveBlob ? false : function (blobData, fileName) {
            return window.navigator.saveBlob(blobData,fileName);
        }) ||
        //save blob via a href and download
        (!window.URL ? false : function (blobData, fileName) {
            //create blobURL
            var blobURL = window.URL.createObjectURL(blobData),
                deleteBlobURL = function () {
                    setTimeout(function () {
                        //delay deleting, otherwise firefox wont download anything
                        window.URL.revokeObjectURL(blobURL);
                    }, 250);
                };

            //test for download link support
            if ("download" in document.createElement("a")) {
                //create anchor
                var a = document.createElement("a");
                //set attributes
                a.setAttribute("href", blobURL);
                a.setAttribute("download", fileName);
                //create click event
                a.onclick = deleteBlobURL;

                //append, trigger click event to simulate download, remove
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            }
            else {
                //fallback, open resource in new tab
                window.open(blobURL, "_blank", "");
                deleteBlobURL();
            }
        });

Sie können dies an beliebiger Stelle in Ihrer App verwenden:

window.saveAs(blobData, fileName);
2
Fidel90