Comment puis-je personnaliser les noms de fichiers Blob lors du téléchargement directement en JavaScript ?

Personnalisation du nom de fichier Blob pour les téléchargements directs en JavaScript

Introduction

Lors de l'utilisation de window.location pour forcer le téléchargement d'un fichier blob en JavaScript, le nom du fichier téléchargé est automatiquement généré. Pour personnaliser ce nom de fichier, des étapes supplémentaires sont nécessaires.

Solution avec l'astuce FileSaver.js

Une solution de contournement consiste à utiliser une technique similaire à celle employée par FileSaver.js :

1. Créer un
2. Attribuez l'URL du blob à l'attribut href.
3. Définissez le nom de fichier souhaité à l'aide de l'attribut de téléchargement.
4. Lancez le téléchargement en cliquant sur le bouton tag.

Exemple simplifié

function saveData(data, fileName) {
  var json = JSON.stringify(data),
      blob = new Blob([json], {type: "octet/stream"}),
      url = window.URL.createObjectURL(blob);
  var a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";
  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);

Utilisation de FileSaver.js

Alors que la méthode ci-dessus peut fonctionne, il est recommandé d'utiliser la bibliothèque FileSaver.js, plus robuste, pour l'enregistrement des fichiers dans JavaScript :

import { saveAs } from 'file-saver';

var json = JSON.stringify(data),
    filename = "my-download.json";

var blob = new Blob([json], {type: "octet/stream"});
saveAs(blob, filename);

Considérations

• Les navigateurs plus anciens peuvent ne pas prendre en charge l'attribut de téléchargement, car il s'agit d'une fonctionnalité HTML5.
• Certaines les formats de fichiers peuvent être considérés comme non sécurisés et bloquer le téléchargement. L'enregistrement des fichiers JSON avec l'extension .txt peut atténuer ce problème.

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!