Visualizzazione pdf da arraybuffer

Sto restituendo i dati del stream da laravel dompdf da questo codice

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

E questo è il mio codice 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); }); 

Ecco l’HTML per visualizzare il pdf dopo ajax

  

Sto arrivando sotto l’errore

Imansible caricare il documento PDF

Si prega di aiutare a risolvere questo problema. Come visualizzare il file pdf.

jQuery.ajax() non ha un’impostazione responseType impostazione predefinita. È ansible utilizzare un polyfill, ad esempio jquery-ajax-blob-arraybuffer.js che implementa il trasporto di dati binari o utilizza fetch() .

Nota anche, chrome, chromium hanno problemi con la visualizzazione di .pdf negli elementi e , vedi Visualizzazione di PDF usando tag object embed con blob URL , Incorpora un Blob usando PDFObject . Sostituire usando l’elemento per l’elemento .

 $(function() { var pdfsrc = "/display"; var jQueryAjaxBlobArrayBuffer = "https://gist.githubusercontent.com/SaneMethod/" + "7548768/raw/ae22b1fa2e6f56ae6c87ad0d7fbae8fd511e781f/" + "jquery-ajax-blob-arraybuffer.js"; var script = $(" 

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

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

Mi piace molto rispondere a guest271314 , specialmente la seconda versione che utilizza fetch, ma volevo aggiungere una soluzione che non usasse un polyfill o una tecnologia sperimentale come fetch .

Questa soluzione utilizza l’ API XMLHttpRequest nativa per creare la richiesta. Questo ci permette di cambiare il responseType in 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(); 

Ho forkto guest271314s plnkr per mostrare questo metodo in azione: http://plnkr.co/edit/7tfBYQQdnih9cW98HSXX?p=preview

Dai miei test la risposta è in risposta non response.data, quindi il seguente dovrebbe funzionare:

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

Anche se sembra che JQuery stia facendo qualcosa con la responce causando un’uscita PDF vuota … ( PDF è vuoto quando si scarica usando javascript ). Questo funzionerà:

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