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
Libérer: 2024-12-14 08:00:19
original
306 Les gens l'ont consulté

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);
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal