Comment télécharger un fichier PDF à partir d'une chaîne binaire renvoyée par un service Web à l'aide de JavaScript ?

Comment créer un fichier PDF à partir d'une chaîne binaire renvoyée par un service Web à l'aide de JavaScript

Des rencontres surviennent lors de la tentative de rendu d'un fichier PDF à partir de une chaîne binaire reçue via une requête Ajax. Les navigateurs Web, à savoir Firefox et Internet Explorer 9, posent des défis lors de l'utilisation de la solution data:uri.

Problème

La chaîne binaire reçue ressemble à la suivante :

%PDF-1.4....
.....
....hole data representing the file
....
%% EOF

Tentative de solution

L'intégration des données via data:uri s'avère efficace dans Opera et Chrome mais échoue dans Firefox et Internet Explorer.

Solution potentielle

Envisagez de créer le fichier PDF sur le système de fichiers pour permettre le téléchargement par l'utilisateur. Cette méthode nécessite une solution côté client et une compatibilité avec les principaux navigateurs.

Solution révisée

Modifiez le type de réponse XMLHttpRequest en "blob". Ensuite, remplacez la fonction window.open par un attribut de téléchargement sur un élément . Ce processus lance le téléchargement de la réponse XMLHttpRequest sous forme de fichier ".pdf".

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

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!