JavaScript blob nom de fichier sans lien

Question

Comment définir le nom d'un fichier blob en JavaScript lors du téléchargement forcé à travers 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 rafraîchissement de la page qui ressemble à :

bfefe410-8d9c-4883-86c5-d76c50a24a1d

Je veux définir le nom de fichier comme my-download.json à la place.

Answer 1

La seule méthode que je connaisse est le truc utilisé par FileSaver.js :

1. Créez une balise cachée.
   • Définissez son attribut href sur l'URL du blob.3. Définissez son attribut download sur le nom de fichier.
2. Cliquez sur la balise .

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 FileSaver.js à la place.

Notes

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

Answer 2

Je voulais simplement ajouter des informations complémentaires à la réponse acceptée avec prise en charge pour Internet Explorer (du moins pour les versions les plus récentes) et pour nettoyer le code en utilisant jQuery :

$(document).ready(function() {
    saveFile("Exemple.txt", "data:attachment/text", "Bonjour tout le monde.");
});

function saveFile (nom, type, données) {
    if (données !== null && navigator.msSaveBlob)
        return navigator.msSaveBlob(new Blob([données], { type: type }), nom);
    var a = $("");
    var url = window.URL.createObjectURL(new Blob([données], {type: type}));
    a.attr("href", url);
    a.attr("download", nom);
    $("body").append(a);
    a[0].click();
    window.URL.revokeObjectURL(url);
    a.remove();
}

Voici un exemple sur Fiddle. Bon courage.

Answer 3

Même principe que les solutions ci-dessus. Mais j'ai eu des problèmes avec Firefox 52.0 (32 bits) où les grands fichiers (>40 MBytes) sont tronqués à des positions aléatoires. La réorganisation 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

Answer 4

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

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

Export data to JSON

Answer 5

Ceci est ma solution. De mon point de vue, vous ne pouvez pas contourner le .

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

Exporter les données vers un fichier json