web-dev-qa-db-fra.com

Afficher PDF en utilisant un AJAX appel

J'essaie d'afficher un PDF (qui est créé côté serveur et transmis au côté client sous forme de flux Web) via un appel AJAX. Mon code est donné ci-dessous:

jQuery.ajax({
    type: "POST",
    processData: false,
    url: "aaaa.p?name=pdf",
    data: inputxml,
    contentType: "application/xml; charset=utf-8",
    success: function(data)
    {
      // here the data is the PDF stream i'm getting from the server side. 

    }
});

Le 'inputxml' contient les paramètres d'entrée permettant au serveur de créer le PDF. et les «données» dans la fonction de réussite contenant le flux PDF. Est-il possible d'ouvrir le fichier PDF sur le navigateur dans la fonction de réussite de l'appel AJAX sans effectuer de soumission de page? Du côté du serveur, le PDF n'est pas également généré physiquement. J'apprécie beaucoup votre aide ....

jqueryajaxpdf
13
Knissanka

Pourquoi le chargez-vous via AJAX? Pourquoi ne le chargez-vous pas dans un IFRAME que vous générez lorsque vous en avez besoin? Le plugin des navigateurs standard l'affichera ensuite à l'intérieur de cet Iframe.

$('#link').click(function(e) {
    e.preventDefault(); // if you have a URL in the link
    jQuery.ajax({
        type: "POST",
        processData: false,
        url: "aaaa.p?name=pdf",
        data: inputxml,
        contentType: "application/xml; charset=utf-8",
        success: function(data)
        {
            var iframe = $('<iframe>');
            iframe.attr('src','/pdf/yourpdf.pdf?options=first&second=here');
            $('#targetDiv').append(iframe);
        }
    });
});
15
Zim84

Voici ma façon de traiter ce problème. Il est basé sur la ligne 50 de ce fichier pdfmake (/ https://github.com/bpampuch/pdfmake/blob/master/src/browser-extensions/pdfMake.js ).

  1. en supposant que vous ayez un fichier pdf, je le convertis en base64 et le renvoie à mon AJAX:

    $pdfString = $mpdf->Output('', 'S');
$pdfBase64 = base64_encode($pdfString);
echo 'data:application/pdf;base64,' . $pdfBase64;

  2. Voici mon code AJAX. Lors de la réception de données, il ouvre une nouvelle fenêtre et remplace l’url par des données endodées en base64:

    var ajaxRequest = $.ajax({
    url: "php/generate-pdf/print-control.php",
    data: '',
    cache: false,
    contentType: 'application/json',
    processData: false,
    type: 'POST'

});
$.when(ajaxRequest).done(function (ajaxValue) {
    var win = window.open('', '_blank');
    win.location.href = ajaxValue;
});

    L'inconvénient de cette méthode est que vous obtenez une chaîne base64 dans la barre d'adresse.

4
andrzej.szmukala

Vous pouvez générer une URL temporaire pour accéder au fichier PDF stocké sur le serveur, au lieu de le renvoyer à l'appel AJAX. Il suffit de renvoyer l'URL générée au client. Ensuite, lorsque vous recevez l'URL, vous pouvez par exemple créer un window.location = pour rediriger le navigateur vers le téléchargement. 

Assurez-vous que les en-têtes corrects sont définis pour le fichier généré (Content-Disposition: attachment etc.) et que tout devrait bien se passer.

Modifier: Bien que vous puissiez probablement simplement utiliser un lien standard (non-JavaScript) pour générer et télécharger le fichier. Mais le faire via AJAX vous permet de montrer une animation spécifique, etc. à l'utilisateur pendant la génération du fichier.

0
lethal-guitar

Pour quiconque tombe par hasard sur cela. Voici un exemple d'utilisation d'axios

  1. responseType doit être 'arrayBuffer'
  2. créer un objet Blob à partir d'une réponse

  3. créer une "URL d'objet" à partir du blob que vous pouvez charger dans l'iframe

        axios({
        url: `path/to/pdf`,
        method: "GET",
        responseType: 'arraybuffer'
    }).then((response) => {
        let blob = new Blob([response.data], { type: response.headers['content-type'] } );
        let url = window.URL.createObjectURL(blob);

        $('#frame').attr('src',url);
    });
0
Chris Rocco