javascript - dompdf laravel

Mostrar pdf desde arraybuffer

Question

Estoy devolviendo datos de flujo de laravel dompdf de este código

 $pdf = /App::make(''dompdf.wrapper'');
$pdf->loadHTML("<div>This is test</div>");
return $pdf->stream();

Y este es mi código JS ajax

 $.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);
});

Aquí hay HTML para mostrar pdf después de ajax

<object id="pdfviewer" data="/files/sample.pdf" type="application/pdf" style="width:100%;height:500px;"></object>

Me estoy poniendo debajo del error

Error al cargar el documento PDF

Por favor, ayuda a arreglar esto. Cómo mostrar el archivo pdf.

Answer 1

De mis pruebas, la respuesta es en respuesta, no en respuesta.datos, por lo que lo siguiente debería funcionar:

 $.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);
});

Aunque parece que JQuery está haciendo algo con la respuesta causando una salida de PDF en blanco ... ( PDF está en blanco al descargar usando JavaScript ). Esto funcionará:

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();

Answer 2

Me gusta guest271314 respuesta de guest271314 , especialmente la segunda versión que usa fetch, pero quería agregar una solución que no use un polyfill o una tecnología experimental como fetch .

Esta solución utiliza la API XMLHttpRequest nativa para crear la solicitud. Esto nos permite cambiar el responseType a arrayBuffer .

 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();

Bifurqué guest271314s plnkr para mostrar este método en acción: http://plnkr.co/edit/7tfBYQQdnih9cW98HSXX?p=preview

Answer 3

jQuery.ajax() no tiene una configuración de tipo de responseType por defecto. Puede usar un polyfill, por ejemplo jquery-ajax-blob-arraybuffer.js que implementa el transporte de datos binarios, o utilizar fetch() .

Tenga en cuenta también que el cromo y el cromo tienen problemas para mostrar .pdf en los elementos <object> y <embed> , consulte Visualización de PDF con etiqueta de incrustación de objeto con URL de blob , Incruste un blob con PDFObject . Sustituya usando el elemento <iframe> por el elemento <object> .

$(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);
});
});
});

Usando 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

versión 1 jquery-ajax-blob-arraybuffer.js , jQuery.ajax() ; versión 2 fetch() , .arrayBuffer()