Maison >interface Web >js tutoriel >Comment puis-je forcer un nom de fichier spécifique lors du téléchargement d'un fichier Blob en JavaScript ?

Comment puis-je forcer un nom de fichier spécifique lors du téléchargement d'un fichier Blob en JavaScript ?

Susan Sarandon
Susan Sarandonoriginal
2024-12-14 08:00:19306parcourir

How Can I Force a Specific Filename When Downloading a Blob File in JavaScript?

Définition du nom du fichier Blob pour les téléchargements forcés en JavaScript

Lors du téléchargement d'un fichier Blob directement via window.location, le nom de fichier par défaut est aléatoire chaîne. Cependant, vous souhaiterez peut-être définir un nom de fichier personnalisé pour le rendre plus informatif.

Pour y parvenir, vous ne pouvez pas vous fier uniquement à la méthode window.location. Au lieu de cela, vous devrez suivre les étapes suivantes :

  1. Créer un fichier
  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. Déclenchez un clic sur l'élément élément.

Voici un exemple qui simplifie le processus :

const saveData = (function () {
  const a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";
  return (data, fileName) => {
    const json = JSON.stringify(data);
    const blob = new Blob([json], { type: "octet/stream" });
    const url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = fileName;
    a.click();
    window.URL.revokeObjectURL(url);
  };
})();

const data = { x: 42, s: "hello, world", d: new Date() };
const 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 peuvent être restreints par le navigateur, provoquant des échecs de téléchargement. Pensez à utiliser une extension de fichier différente (.txt pour JSON, par exemple).

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn