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.

<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>