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.

Exemple de code :

L'exemple suivant montre comment utiliser cette astuce pour enregistrer un objet JSON dans un fichier portant le nom "my-download.json":

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 les formats de fichiers peuvent ne pas être pris en charge par le navigateur et entraîner un échec de téléchargement. Par exemple, il a été observé que l'enregistrement de fichiers JSON avec une extension .txt fonctionne.

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!