Maison > interface Web > js tutoriel > Comment puis-je contrôler le nom du fichier lors du téléchargement de blobs en JavaScript ?

Comment puis-je contrôler le nom du fichier lors du téléchargement de blobs en JavaScript ?

DDD
Libérer: 2024-12-09 12:23:14
original
765 Les gens l'ont consulté

How Can I Control the Filename When Downloading Blobs in JavaScript?

Nom de fichier personnalisé pour les téléchargements Blob en JavaScript

Lors du téléchargement forcé d'un fichier Blob via window.location, le nom de fichier attribué peut être une chaîne aléatoire . Pour personnaliser ce nom de fichier, une solution de contournement impliquant un élément caché est utilisée.

Mise en œuvre

FileSaver.js propose une approche qui implique :

  1. Création d'un fichier
  2. Définir son attribut href sur l'URL du blob.
  3. Définir son attribut de téléchargement sur le nom de fichier souhaité.
  4. Cliquer sur l'élément élément.

Exemple

L'exemple simplifié suivant illustre la technique :

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

Notes

  • Les navigateurs plus anciens peuvent ne pas prendre en charge le téléchargement attribut.
  • Certains formats de fichiers peuvent être considérés comme non sécurisés et déclencher des échecs de téléchargement. Il est recommandé d'enregistrer les fichiers JSON avec une extension .txt.

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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal