web-dev-qa-db-fra.com

Télécharger un blob à partir de l'URL HTTP dans IE 11

Ma page génère une URL comme celle-ci: blob:http%3A//localhost%3A8383/568233a1-8b13-48b3-84d5-cca045ae384f, un blob contenant des données de fichier. Je télécharge ceci en tant que fichier dans tous les navigateurs, à l'exception de IE 11. Comment puis-je télécharger ce blob dans IE 11? Un nouvel onglet devient ouvert et un rafraîchissement continu se produit.

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 non pris en charge par URL.createObjectURL ()

Travaille pour moi.

IE11 je suis usage

window.navigator.msSaveOrOpenBlob(blob, fileName);

Ou, si vérifier la condition.

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

En savoir plus: Correction de la fonction URL.createObjectURL () ne fonctionne pas dans IE 11

Démo: JSFiddle

8
bamossza

La réponse de Fidel90 fonctionne correctement dans IE 11 après avoir remplacé la partie spécifique de IE par ceci:

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

Dans IE, essayez window.navigator.saveBlob(fileURL,name);.

Pour plus d'informations, consultez la documentation à l'adresse MSDN .

Dans le passé, j'ai créé le polyfill suivant très pratique pour vérifier IE et utiliser le téléchargement via href. Peut-être que ça va vous aider (ou aider les autres):

//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();
            }
        });

Vous pouvez ensuite l'utiliser n'importe où dans votre application aussi simplement que:

window.saveAs(blobData, fileName);
2
Fidel90