Comment définir un nom de fichier personnalisé pour les téléchargements Blob en JavaScript ?

Définition d'un nom de fichier blob personnalisé en JavaScript

Lorsque vous travaillez avec des blobs en JavaScript, vous pouvez rencontrer une situation dans laquelle vous devez spécifier un nom de fichier blob personnalisé. nom de fichier au lieu de celui généré aléatoirement par défaut. Ceci est particulièrement utile lorsque vous souhaitez fournir un nom de fichier significatif pour les téléchargements ou les exportations de données.

Problème : attribution d'un nom de fichier Blob personnalisé

L'extrait de code suivant crée un blob et tente de le télécharger via window.location, mais le fichier téléchargé a un nom aléatoire comme "bfefe410-8d9c-4883-86c5-d76c50a24a1d":

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

Solution : Utiliser l'astuce de la balise A

La seule méthode connue pour attribuer un nom de fichier personnalisé à un blob en JavaScript implique une astuce utilisant un tag :

1. Créer un
2. Définissez son attribut href sur l'URL du blob.
3. Définissez son attribut de téléchargement sur le nom de fichier souhaité.
4. Cliquez sur la balise tag par programme.

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