Maison >interface Web >js tutoriel >Comment puis-je déclencher des téléchargements de fichiers avec des requêtes Ajax ?

Comment puis-je déclencher des téléchargements de fichiers avec des requêtes Ajax ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-12-19 14:56:09897parcourir

How Can I Trigger File Downloads with Ajax Requests?

Téléchargement de fichiers avec des requêtes Ajax

La mise en œuvre d'une fonctionnalité permettant de télécharger des fichiers en cliquant sur un bouton à l'aide d'Ajax peut rencontrer des défis. Explorons une solution pour surmonter ces obstacles.

Tentative initiale

Une première tentative pour y parvenir consiste à créer une XMLHttpRequest et à envoyer une requête GET à un script PHP, comme montré ci-dessous :

javascript:
var xhr = new XMLHttpRequest();
xhr.open("GET", "download.php");
xhr.send();

download.php:
<?
header("Cache-Control: public");
header("Content-Description: File Transfer");
header("Content-Disposition: attachment; filename= file.txt");
header("Content-Transfer-Encoding: binary");    
readfile("file.txt");
?>

Limitations

Cependant, cette méthode échoue en raison des contraintes du navigateur. Les requêtes Ajax ne peuvent pas déclencher directement l'invite de téléchargement ; au lieu de cela, il faut accéder au fichier pour que cela se produise.

Solution

Deux approches sont disponibles :

1. Utilisation de window.location et Fallback

Utilisez la propriété window.location pour accéder au script de téléchargement, déclenchant le téléchargement :

$.ajax({
    url: 'download.php',
    type: 'POST',
    success: function() {
        window.location = 'download.php';
    }
});

2. Attribut de téléchargement HTML5

Pour les navigateurs modernes, l'attribut de téléchargement HTML5 peut être utilisé :

<a href="download.php" download>
  Download File
</a>

Remarque :

- L'attribut de téléchargement n'est pris en charge que dans Chrome, Firefox et les versions ultérieures d'Internet Explorer.

- Assurez-vous que le fichier à télécharger provient de la même origine que la page hôte.

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