Comment télécharger et ouvrir un fichier PDF à l’aide d’Ajax ?

Téléchargement et ouverture d'un fichier PDF à l'aide d'Ajax

Dans le développement Web, il est courant de générer des fichiers de manière dynamique et de les télécharger sur le client. La gestion des téléchargements de fichiers à l'aide d'Ajax peut être délicate, en particulier pour les formats de fichiers tels que les PDF. Un problème courant est le téléchargement et l'ouverture d'un fichier PDF à l'aide d'appels Ajax.

Problème :

Un utilisateur dispose d'une classe d'action qui génère un PDF et définit le type de contenu approprié. . Ils tentent d'appeler cette action via un appel Ajax et d'ouvrir le fichier PDF téléchargé dans le navigateur. Cependant, l'appel Ajax entraîne une erreur : "Votre navigateur a envoyé une requête que ce serveur n'a pas pu comprendre."

Solution :

Pour résoudre ce problème et réussir téléchargez et ouvrez un fichier PDF à l'aide d'Ajax, suivez ces étapes :

1. Générez le fichier PDF : Dans la classe d'action, générez le fichier PDF à l'aide de votre bibliothèque préférée et définissez le paramètre approprié tapez du contenu comme vous l'avez déjà fait.

2. Gérez l'appel Ajax en JavaScript :

   • Utilisez l'objet XMLHttpRequest pour lancer un appel Ajax vers le URL d'action.
   • Définissez la méthode de requête sur "POST" ou "GET" en fonction de votre méthode d'action.

3. Traitez la réponse du serveur :

   • Dans la fonction de rappel de réussite de l'appel Ajax, gérez la réponse du serveur.
   • Utilisez l'API Blob pour créer un nouveau Blob représentant les données PDF téléchargées.
   • Créez un élément d'ancrage () et définissez son attribut href sur l'URL de l'objet Blob.
   • Définissez l'attribut de téléchargement pour spécifier le nom de fichier souhaité pour le fichier PDF.
   • Déclenchez l'événement click sur l'élément d'ancrage pour lancer le téléchargement et ouvrir le fichier PDF.

Voici un exemple de code JavaScript qui illustre cette approche :

<code class="javascript">$.ajax({
  url: '<URL_TO_FILE>',
  success: function(data) {
    var blob = new Blob([data]);
    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = '<FILENAME_TO_SAVE_WITH_EXTENSION>';
    link.click();
  }
});</code>

En utilisant cette méthode, vous pouvez télécharger et ouvrir avec succès un fichier PDF à l'aide d'Ajax, rationalisant ainsi les capacités de gestion de fichiers de votre application Web.

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!