Maison > interface Web > js tutoriel > Comment puis-je télécharger un fichier à l'aide de JavaScript ou de jQuery sans recharger la page ?

Comment puis-je télécharger un fichier à l'aide de JavaScript ou de jQuery sans recharger la page ?

Barbara Streisand
Libérer: 2024-12-15 06:47:15
original
461 Les gens l'ont consulté

How Can I Download a File Using JavaScript or jQuery Without Reloading the Page?

Télécharger un fichier à l'aide de JavaScript/jQuery sans remplacer le contenu de la page

Lorsque l'utilisateur clique sur un lien hypertexte, il ouvre généralement le contenu correspondant dans la page Web actuelle. Cependant, il existe des scénarios dans lesquels vous devez déclencher manuellement un téléchargement de fichier sans remplacer le contenu de la page.

Pour y parvenir, vous pouvez utiliser deux approches principales :

1. Utilisation d'un iFrame invisible :

Créez un élément iframe invisible dans votre HTML :

<iframe>
Copier après la connexion

Ensuite, utilisez JavaScript pour définir l'attribut "src" de l'iFrame sur l'URL du fichier :

function Download(url) {
  document.getElementById('my_iframe').src = url;
}
Copier après la connexion

Pour empêcher le navigateur d'interpréter certains fichiers (par exemple HTML, texte) comme des pages Web et les forcer à être téléchargés, vous devrez peut-être définir leur type MIME sur "application/x-please-download-me" ou "application/octet-stream" côté serveur.

2. Ouverture du fichier dans un nouvel onglet :

Pour ouvrir le téléchargement dans un nouvel onglet, vous pouvez modifier l'attribut cible du lien hypertexte :

<a href="file.pdf" target="_blank">Download</a>
Copier après la connexion

Vous pouvez également utiliser jQuery pour définir dynamiquement l'attribut target :

$('a#someID').attr({target: '_blank', href: 'file.pdf'});
Copier après la connexion

Lorsque l'utilisateur clique sur le lien hypertexte, l'attribut target garantit que le fichier est téléchargé dans un nouvel onglet ou fenêtre.

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