Afficher PDF en utilisant un appel AJAX
j'essaie d'afficher un PDF(qui est créé dans le côté serveur et passe au côté client comme un flux web) par 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 pour que le serveur crée le PDF. et les "données" dans la fonction de succès contenant PDF stream. Y a-t-il un moyen d'ouvrir le fichier PDF sur le navigateur à l'intérieur de la fonction de succès de L'appel AJAX avec-sans faire n'importe quelle page soumettre? Du côté du serveur, le PDF n'est pas physiquement générées. Très reconnaissant de votre aide....
4 réponses
pourquoi le charger via AJAX? Pourquoi ne pas le charger dans une IFRAME que vous générez quand vous en avez besoin. Le plugin standard browsers l'affichera alors à l'intérieur de cette 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);
}
});
});
en supposant que vous avez un flux pdf, je le convertis en base64 et je le renvoie à mon AJAX:
$pdfString = $mpdf->Output('', 'S'); $pdfBase64 = base64_encode($pdfString); echo 'data:application/pdf;base64,' . $pdfBase64;Voici mon code AJAX. Lors de la réception des données, il ouvre une nouvelle fenêtre et remplace url avec base64 endoded data:
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; });La inconvénient de cette méthode est que vous obtenez une chaîne base64 dans la barre d'adresse.
vous pouvez générer une URL temporaire pour accéder au fichier PDF stocké sur le serveur, au lieu de l'Envoyer à 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 faire un window.location = pour rediriger le navigateur pour 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 tout doit être beau.
Edit: Bien que vous pourriez probablement utiliser un ordinaires (sans JavaScript) lien pour générer et télécharger le fichier. Mais le faire via AJAX vous permet de montrer une animation spécifique, etc. pour l'utilisateur, alors que le fichier est généré.
pour ceux qui trébuchent là-dessus. Voici un exemple d'utilisation de axios
- responsietype must be 'arrayBuffer'
- créer un objet Blob de réponse
créer un objet "url" dans le 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); });