Comment puis-je télécharger de manière fiable un fichier PDF à partir d'une réponse de service Web sur différents navigateurs à l'aide de JavaScript ?

Construire des documents PDF à partir de réponses de services Web en JavaScript

La création de documents PDF à partir de chaînes binaires renvoyées par des services Web présente un défi entre navigateurs. La méthode data-uri, bien qu'efficace dans certains navigateurs comme Chrome et Opera, est insuffisante dans IE9 et Firefox.

Approche alternative : téléchargement de fichiers côté client

Pour Pour surmonter ces limitations, une approche alternative consiste à créer des fichiers PDF sur le système de fichiers pour le téléchargement par l'utilisateur. Pour ce faire, considérez ce qui suit :

Définir le type de réponse sur Blob

Configurez la propriété ResponseType de l'objet XMLHttpRequest sur "blob" au lieu de "text". Cela permet au client de recevoir les données PDF en tant qu'objet Blob.

Utilisation de l'objet Blob

Créez un nouvel objet Blob en utilisant la réponse obtenue à partir de la demande de service Web. .

Générer une URL d'objet

Générer une URL d'objet pour l'objet Blob, qui représente le fichier PDF.

Créer un téléchargement Lien

Créez un élément HTML et définissez ses attributs href et download. L'attribut href doit pointer vers l'URL de l'objet, tandis que l'attribut download spécifie le nom du fichier.

Déclenchement du téléchargement

Ajouter l'élément au corps du document et cliquez dessus pour lancer le téléchargement du fichier.

Exemple de code

Le code JavaScript suivant illustre cette approche :

<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) {
        // Generate .pdf name as `Blob` from `this.response`
        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` after `Save As` dialog
        window.onfocus = function () {
            document.body.removeChild(a);
        };
    };
};
request.send();</code>

Cette méthode garantit un téléchargement de fichiers fiable sur plusieurs navigateurs, notamment IE9, Firefox, Chrome, Opera et Safari.

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!