L'affichage des pdf à partir de arraybuffer
je renvoie des données stream de laravel dompdf à partir de ce code
$pdf = App::make('dompdf.wrapper');
$pdf->loadHTML("<div>This is test</div>");
return $pdf->stream();
et voici mon code ajax JS
$.ajax({
type:"GET",
url: "/display",
responseType: 'arraybuffer'
}).done(function( response ) {
var blob = new Blob([response.data], {type: 'application/pdf'});
var pdfurl = window.URL.createObjectURL(blob)+"#view=FitW";
$("#pdfviewer").attr("data",pdfurl);
});
Voici HTML pour afficher pdf après ajax
<object id="pdfviewer" data="/files/sample.pdf" type="application/pdf" style="width:100%;height:500px;"></object>
je suis d'erreur ci-dessous
échec de chargement du document PDF
s'il vous Plaît aider à résoudre ce problème. Comment afficher le fichier pdf.
3 réponses
jQuery.ajax() ne pas responseType paramètre par défaut. Vous pouvez utiliser un polyfill, par exemple,jquery-ajax-blob-arraybuffer.js qui implémente le transport de données binaires, ou utilise fetch().
Notez aussi, chrome, chrome ont des problèmes d'affichage .pdf<object> et <embed> éléments, voir affichage du PDF en utilisant la balise objet embed avec Blob URL,Incorporer une Goutte à l'aide de PDFObject. Substituer à l'aide de <iframe> élément <object> élément.
$(function() {
var pdfsrc = "/display";
var jQueryAjaxBlobArrayBuffer = "https://gist.githubusercontent.com/SaneMethod/"
+ "7548768/raw/ae22b1fa2e6f56ae6c87ad0d7fbae8fd511e781f/"
+ "jquery-ajax-blob-arraybuffer.js";
var script = $("<script>");
$.get(jQueryAjaxBlobArrayBuffer)
.then(function(data) {
script.text(data).appendTo("body")
}, function(err) {
console.log(err);
})
.then(function() {
$.ajax({
url: pdfsrc,
dataType: "arraybuffer"
})
.then(function(data) {
// do stuff with `data`
console.log(data, data instanceof ArrayBuffer);
$("#pdfviewer").attr("src", URL.createObjectURL(new Blob([data], {
type: "application/pdf"
})))
}, function(err) {
console.log(err);
});
});
});
en utilisant fetch(),.arrayBuffer()
var pdfsrc = "/display";
fetch(pdfsrc)
.then(function(response) {
return response.arrayBuffer()
})
.then(function(data) {
// do stuff with `data`
console.log(data, data instanceof ArrayBuffer);
$("#pdfviewer").attr("src", URL.createObjectURL(new Blob([data], {
type: "application/pdf"
})))
}, function(err) {
console.log(err);
});
plnkr http://plnkr.co/edit/9R5WcsMSWQaTbgNdY3RJ?p=preview
version 1 jquery-ajax-blob-arraybuffer.js,jQuery.ajax(); version 2 fetch(),.arrayBuffer()
j'aime guest271314 répondez beaucoup, surtout la deuxième version en utilisant fetch, mais je voulais ajouter une solution qui n'utilise pas un polyfill ou une technologie expérimentale comme fetch.
Cette solution utilise le natif XMLHttpRequest API pour créer la demande. Cela nous permet de changer le responseTypearrayBuffer.
var xhr = new XMLHttpRequest();
var pdfsrc = "https://upload.wikimedia.org/wikipedia/en/6/62/Definition_of_management.pdf";
xhr.open('GET', pdfsrc, true);
xhr.responseType = "arraybuffer";
xhr.addEventListener("load", function (evt) {
var data = evt.target.response;
if (this.status === 200) {
$("#pdfviewer").attr("src", URL.createObjectURL(new Blob([data], {
type: "application/pdf"
})));
}
}, false);
xhr.send();
je bifurquais guest271314s plnkr montrer cette méthode dans action: http://plnkr.co/edit/7tfBYQQdnih9cW98HSXX?p=preview
$.ajax({
type:"GET",
url: "/display",
responseType: 'arraybuffer'
}).done(function( response ) {
var blob = new Blob([response], {type: 'application/pdf'});
var pdfurl = window.URL.createObjectURL(blob)+"#view=FitW";
$("#pdfviewer").attr("data",pdfurl);
});
bien qu'il semble que JQuery fasse quelque chose avec le responce provoquant une sortie PDF vierge... ( le fichier PDF est vide lorsque vous téléchargez en javascript). Cela va fonctionner:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'test.pdf', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
if (this.status == 200) {
var blob=new Blob([this.response], {type:"application/pdf"});
var pdfurl = window.URL.createObjectURL(blob)+"#view=FitW";
$("#pdfviewer").attr("data",pdfurl);
}
};
xhr.send();