web-dev-qa-db-fra.com

Liens ouverts créés par createObjectURL dans IE11

Pourquoi ne pouvez-vous pas ouvrir le lien dans la démo suivante:
http://html5-demos.appspot.com/static/a.download.html

Vous ne pouvez même pas cliquer avec le bouton droit de la souris et l'ouvrir dans un nouvel onglet/fenêtre. Y a-t-il des paramètres dans le navigateur que je dois personnaliser?

javascripthtmlinternet-explorerblob
56
user648340

Cette démo utilise une URL Blob qui n'est pas prise en charge par IE en raison de restrictions de sécurité.

IE possède sa propre API pour la création et le téléchargement de fichiers, appelée msSaveOrOpenBlob.

Voici ma solution multi-navigateur qui fonctionne sur IE, Chrome et Firefox:

function createDownloadLink(anchorSelector, str, fileName){
    if(window.navigator.msSaveOrOpenBlob) {
        var fileData = [str];
        blobObject = new Blob(fileData);
        $(anchorSelector).click(function(){
            window.navigator.msSaveOrOpenBlob(blobObject, fileName);
            window.navigator.msSaveOrOpenBlob(blobObject, fileName);
        });
    } else {
        var url = "data:text/plain;charset=utf-8," + encodeURIComponent(str);
        $(anchorSelector).attr("download", fileName);
        $(anchorSelector).attr("href", url);
    }
}

$(function () {
    var str = "hi,file";
    createDownloadLink("#export", str, "file.txt");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="export" class="myButton" download="" href="#">export</a>
100
dinesh ygv

Voici la fonction pour télécharger n'importe quel fichier en tant que blob. (testé sur IE et non-IE)

var download_csv_using_blob = function (file_name, content) {
    var csvData = new Blob([content], { type: 'text/csv' });
    if (window.navigator && window.navigator.msSaveOrOpenBlob) { // for IE
        window.navigator.msSaveOrOpenBlob(csvData, file_name);
    } else { // for Non-IE (chrome, firefox etc.)
        var a = document.createElement("a");
        document.body.appendChild(a);
        a.style = "display: none";
        var csvUrl = URL.createObjectURL(csvData);
        a.href =  csvUrl;
        a.download = file_name;
        a.click();
        URL.revokeObjectURL(a.href)
        a.remove();
    }
};

Remarque: veuillez modifier le type de votre fichier, si nécessaire.

33
Souvik

Si les données proviennent d'Ajax, vous pouvez ajouter

if (window.navigator.msSaveOrOpenBlob)
 xhttp.responseType = "arraybuffer";
else
 xhttpGetPack.responseType = "blob";

///////////////////////////////////////////////////////

var a = document.createElement("a");
document.body.appendChild(a);
a.style.display = "none";

// IE
if (window.navigator.msSaveOrOpenBlob)
{
  a.onclick = ((evx) => 
  {
      var newBlob = new Blob([new Uint8Array(xhttpGetPack.response)]);
      window.navigator.msSaveOrOpenBlob(newBlob, "myfile.ts");
  });
  a.click();
}
else //Chrome and safari
{
  var file = URL.createObjectURL(xhttpGetPack.response);
  a.href = file;
  a["download"] = "myFile.ts";
  a.click();
  window.URL.revokeObjectURL(file);
}
2
Pedro Fabián More Barrios
        //File Object return in ajax Success in data variable
         var blob = new Blob([data]);
         if (navigator.appVersion.toString().indexOf('.NET') > 0) //For IE
          {
            window.navigator.msSaveOrOpenBlob(blob, "filename.ext");
          }
          else if (navigator.userAgent.toLowerCase().indexOf('firefox') >-1) 
              {
                var link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = "filename.ext";
                document.body.appendChild(link);//For FireFox <a> tag event 
                //not working
                link.click();
            }
          else
          {
                var link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = "filename.ext" 
                link.click();
          }
1
Arti Gaikwad