Maison > interface Web > js tutoriel > Comment télécharger des URL de données en JavaScript : une solution Chrome et Firefox ?

Comment télécharger des URL de données en JavaScript : une solution Chrome et Firefox ?

Barbara Streisand
Libérer: 2024-11-27 02:54:14
original
722 Les gens l'ont consulté

How to Download Data URLs in JavaScript: A Chrome and Firefox Solution?

Téléchargement d'URL de données en JavaScript

En essayant de créer un utilitaire de compression/décompression basé sur JavaScript, vous avez rencontré un problème avec télécharger des fichiers codés dans des URL de données. Bien que cette approche fonctionne dans Firefox, elle échoue dans Chrome.

Le dilemme de Chrome

Chrome ne prend pas en charge le téléchargement direct d'URL de données. Au lieu de cela, il les intègre sous forme d'images lorsqu'ils sont référencés à l'aide de balises img. Cela pose un problème pour les formats de fichiers non image.

Une solution de contournement

Heureusement, il existe une solution de contournement pour activer les téléchargements d'URL de données dans Chrome et Firefox. La solution consiste à créer un élément temporaire, à définir son attribut de téléchargement sur le nom de fichier souhaité et à attribuer l'URL des données à son attribut href.

Exemple de code

Ce qui suit La fonction JavaScript, downloadURI, implémente ceci solution de contournement :

function downloadURI(uri, name) {
  var link = document.createElement("a");
  link.download = name;
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  delete link;
}
Copier après la connexion

Utilisation

Pour utiliser cette fonction, fournissez l'URL des données et le nom du fichier de téléchargement souhaité comme arguments :

downloadURI("data:text/html,HelloWorld!", "helloWorld.txt");
Copier après la connexion

Cette approche entraînera une boîte de dialogue de téléchargement dans Chrome et Firefox, permettant aux utilisateurs d'enregistrer le fichier sous le nom de fichier spécifié.

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