Maison > interface Web > js tutoriel > 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
Libérer: 2024-10-26 21:33:29
original
479 Les gens l'ont consulté

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>
Copier après la connexion

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!

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