Nom de fichier blob JavaScript sans lien

Comment définir le nom d'un fichier blob en JavaScript lorsque vous forcez son téléchargement via window.location?

function newFile(data) {
    var json = JSON.stringify(data);
    var blob = new Blob([json], {type: "octet/stream"});
    var url  = window.URL.createObjectURL(blob);
    window.location.assign(url);
}

L'exécution du code ci-dessus télécharge un fichier instantanément sans actualisation de la page qui ressemble à:

bfefe410-8d9c-4883-86c5-d76c50a24a1d

Je veux plutôt définir le nom de fichier comme my-download.json .

Le seul moyen dont je suis conscient est l'astuce utilisée par FileSaver.js :

1. Créez une <a>balise masquée .
2. Définissez son hrefattribut sur l'URL de l'objet blob.
3. Définissez son downloadattribut sur le nom de fichier.
4. Cliquez sur l' <a>étiquette.

Voici un exemple simplifié ( jsfiddle ):

var saveData = (function () {
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    return function (data, fileName) {
        var json = JSON.stringify(data),
            blob = new Blob([json], {type: "octet/stream"}),
            url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = fileName;
        a.click();
        window.URL.revokeObjectURL(url);
    };
}());

var data = { x: 42, s: "hello, world", d: new Date() },
    fileName = "my-download.json";

saveData(data, fileName);

J'ai écrit cet exemple juste pour illustrer l'idée, dans le code de production, utilisez plutôt FileSaver.js.

Remarques

• Les navigateurs plus anciens ne prennent pas en charge l'attribut "download", car il fait partie de HTML5.
• Certains formats de fichiers sont considérés comme non sécurisés par le navigateur et le téléchargement échoue. L'enregistrement de fichiers JSON avec l'extension txt fonctionne pour moi.

Je voulais juste développer la réponse acceptée avec la prise en charge d'Internet Explorer (la plupart des versions modernes, de toute façon), et ranger le code en utilisant jQuery:

$(document).ready(function() {
    saveFile("Example.txt", "data:attachment/text", "Hello, world.");
});

function saveFile (name, type, data) {
    if (data !== null && navigator.msSaveBlob)
        return navigator.msSaveBlob(new Blob([data], { type: type }), name);
    var a = $("<a style='display: none;'/>");
    var url = window.URL.createObjectURL(new Blob([data], {type: type}));
    a.attr("href", url);
    a.attr("download", name);
    $("body").append(a);
    a[0].click();
    window.URL.revokeObjectURL(url);
    a.remove();
}

Voici un exemple de violon . Godspeed .

Même principe que les solutions ci-dessus. Mais j'ai eu des problèmes avec Firefox 52.0 (32 bits) où de gros fichiers (> 40 Mo) sont tronqués à des positions aléatoires. La reprogrammation de l'appel de revokeObjectUrl () résout ce problème.

function saveFile(blob, filename) {
  if (window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(blob, filename);
  } else {
    const a = document.createElement('a');
    document.body.appendChild(a);
    const url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = filename;
    a.click();
    setTimeout(() => {
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    }, 0)
  }
}

exemple jsfiddle

En retard, mais comme j'ai eu le même problème j'ajoute ma solution:

function newFile(data, fileName) {
    var json = JSON.stringify(data);
    //IE11 support
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        let blob = new Blob([json], {type: "application/json"});
        window.navigator.msSaveOrOpenBlob(blob, fileName);
    } else {// other browsers
        let file = new File([json], fileName, {type: "application/json"});
        let exportUrl = URL.createObjectURL(file);
        window.location.assign(exportUrl);
        URL.revokeObjectURL(exportUrl);
    }
}

saveFileOnUserDevice = function(file){ // content: blob, name: string
        if(navigator.msSaveBlob){ // For ie and Edge
            return navigator.msSaveBlob(file.content, file.name);
        }
        else{
            let link = document.createElement('a');
            link.href = window.URL.createObjectURL(file.content);
            link.download = file.name;
            document.body.appendChild(link);
            link.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));
            link.remove();
            window.URL.revokeObjectURL(link.href);
        }
    }

Exemple fonctionnel d'un bouton de téléchargement, pour enregistrer une photo de chat à partir d'une URL sous le nom "cat.jpg":

HTML:

<button onclick="downloadUrl('https://i.imgur.com/AD3MbBi.jpg', 'cat.jpg')">Download</button>

JavaScript:

function downloadUrl(url, filename) {
  let xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.responseType = "blob";
  xhr.onload = function(e) {
    if (this.status == 200) {
      const blob = this.response;
      const a = document.createElement("a");
      document.body.appendChild(a);
      const blobUrl = window.URL.createObjectURL(blob);
      a.href = blobUrl;
      a.download = filename;
      a.click();
      setTimeout(() => {
        window.URL.revokeObjectURL(blobUrl);
        document.body.removeChild(a);
      }, 0);
    }
  };
  xhr.send();
}

window.location.assign n'a pas fonctionné pour moi. il télécharge bien mais télécharge sans extension pour un fichier CSV sur la plate-forme Windows. Ce qui suit a fonctionné pour moi.

    var blob = new Blob([csvString], { type: 'text/csv' });
    //window.location.assign(window.URL.createObjectURL(blob));
    var link = window.document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    // Construct filename dynamically and set to link.download
    link.download = link.href.split('/').pop() + '.' + extension; 
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

C'est ma solution. De mon point de vue, vous ne pouvez pas contourner le <a>.

function export2json() {
  const data = {
    a: '111',
    b: '222',
    c: '333'
  };
  const a = document.createElement("a");
  a.href = URL.createObjectURL(
    new Blob([JSON.stringify(data, null, 2)], {
      type: "application/json"
    })
  );
  a.setAttribute("download", "data.json");
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

<button onclick="export2json()">Export data to json file</button>