Maison  >  Article  >  interface Web  >  Comment générer un PDF à partir d'une réponse binaire de service Web en JavaScript sur tous les navigateurs ?

Comment générer un PDF à partir d'une réponse binaire de service Web en JavaScript sur tous les navigateurs ?

Barbara Streisand
Barbara Streisandoriginal
2024-10-26 21:33:29337parcourir

How to Generate a PDF from a Binary Web-Service Response in JavaScript Across Browsers?

Création d'un PDF à partir d'une réponse de service Web binaire en JavaScript

Contexte :

Cette question relève le défi de générer un fichier PDF à partir d'une chaîne binaire récupérée via une requête Ajax. Le flux binaire fourni comprend l'en-tête et le contenu PDF. Bien que la méthode data-uri fonctionne dans certains navigateurs, elle échoue dans Internet Explorer 9 et Firefox.

Le problème :

Le problème réside dans la recherche d'un navigateur multi-navigateurs. solution qui permet de créer un fichier PDF à partir de la réponse binaire sans recourir à la modification de l'implémentation du service Web.

Solution :

Pour résoudre ce problème, l'approche suivante est suggéré :

Exploiter les blobs et les attributs de téléchargement :

En définissant le type de réponse de l'objet XMLHttpRequest sur "blob", la réponse sera reçue en tant qu'objet Blob. Ce Blob représente le fichier PDF. Par la suite, vous pouvez créer un lien de téléchargement à l'aide de la méthode createObjectURL pour permettre aux utilisateurs de télécharger le PDF.

Pour illustrer cette solution, l'extrait de code suivant peut être utilisé :

<code class="javascript">var request = new XMLHttpRequest();
request.open("GET", "/path/to/pdf", true); 
request.responseType = "blob";
request.onload = function (e) {
    if (this.status === 200) {
        // `blob` response
        console.log(this.response);
        // create `objectURL` of `this.response` : `.pdf` as `Blob`
        var file = window.URL.createObjectURL(this.response);
        var a = document.createElement("a");
        a.href = file;
        a.download = this.response.name || "detailPDF";
        document.body.appendChild(a);
        a.click();
        // remove `a` following `Save As` dialog, 
        // `window` regains `focus`
        window.onfocus = function () {                     
          document.body.removeChild(a)
        }
    };
};
request.send();</code>

Avantages :

Cette méthode offre les avantages suivants :

  • Compatibilité avec tous les principaux navigateurs, notamment IE9, Firefox, Opera, Chrome et Safari
  • Évite les lacunes rencontrées avec l'approche data-uri dans certains navigateurs
  • Permet aux utilisateurs de télécharger facilement le fichier PDF

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