Comment définir un nom de fichier personnalisé lors du téléchargement d'un fichier Blob en JavaScript ?

JavaScript : définition du nom de fichier pour le fichier Blob pour un téléchargement direct

Lors du téléchargement d'un fichier blob en JavaScript à l'aide de window.location, le fichier est généralement enregistré avec un nom générique. Pour définir un nom de fichier personnalisé, il est nécessaire d'employer une technique spécifique qui consiste à créer un nom tag.

Dans l'exemple de code original :

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

Ce code télécharge un fichier nommé :

bfefe410-8d9c-4883-86c5-d76c50a24a1d

Pour définir le nom de fichier comme my-download.json, suivez ces étapes :

1. Créez un fichier et ajoutez-le au document :

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

2. Définissez la balise l'attribut href de la balise à l'URL du blob et l'attribut download au nom de fichier souhaité :

a.href = url;
a.download = "my-download.json";

3. Déclenchez le téléchargement en cliquant sur le bouton tag :

a.click();

4. Révoquer l'URL du blob pour empêcher tout nouvel accès :

window.URL.revokeObjectURL(url);

Exemple Implémentation :

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

Remarques :

• Les navigateurs plus anciens peuvent ne pas prendre en charge l'attribut de téléchargement.
• Certains formats de fichiers ( par exemple, JSON) devra peut-être être enregistré avec une extension différente (par exemple, txt) pour éviter les problèmes de sécurité restrictions.
• Envisagez d'utiliser une bibliothèque comme FileSaver.js pour une solution plus robuste et fiable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!