Maison >interface Web >js tutoriel >Comment déclencher des téléchargements de fichiers à l'aide de boutons HTML ou JavaScript ?

Comment déclencher des téléchargements de fichiers à l'aide de boutons HTML ou JavaScript ?

Linda Hamilton
Linda Hamiltonoriginal
2024-12-03 05:37:09343parcourir

How to Trigger File Downloads Using HTML Buttons or JavaScript?

Déclenchement des téléchargements de fichiers à partir de boutons HTML ou JavaScript

Dans le développement Web, il est souvent nécessaire de fournir aux utilisateurs la possibilité de télécharger des fichiers. Alors que le HTML La balise d'ancrage avec un attribut href est souvent utilisée à cette fin, vous pouvez rencontrer des situations où vous souhaitez déclencher le téléchargement à l'aide d'un bouton ou de JavaScript.

Méthode 1 : Utiliser l'attribut de téléchargement HTML5

Pour déclencher un téléchargement de fichier à l'aide d'un bouton HTML, vous pouvez utiliser l'attribut de téléchargement HTML5. Cet attribut spécifie le nom de fichier à utiliser lors de l'enregistrement du fichier et fonctionne à la fois avec et éléments.

<button type="button" download="file.doc">Download!</button>

Méthode 2 : Déclenchement du téléchargement via JavaScript

Vous pouvez également déclencher le téléchargement d'un fichier par programme à l'aide de JavaScript. Cependant, cette méthode nécessite une approche légèrement différente. Au lieu d'utiliser l'attribut href, vous pouvez définir la propriété location.href de l'objet window sur l'URL du fichier et ajouter le nom de fichier à l'attribut download de l'élément a.

$("#fileRequest").click(function() {
  location.href = "file.doc";
  $("a").attr("download", "proposed_file_name");
});

Considérations supplémentaires

  • N'oubliez pas que le chemin du fichier doit être sur la même origine que la page (c'est-à-dire partager le même domaine, sous-domaine, protocole et port).
  • Si le nom de fichier n'est pas spécifié, le nom de fichier par défaut du fichier en cours de téléchargement sera utilisé.
  • L'attribut de téléchargement est pris en charge par la plupart des navigateurs modernes, bien que son comportement peut varier légèrement.

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