Displaying pdf from arraybuffer

Question

I am returning stream data from laravel dompdf from this code

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

And this is my JS ajax code

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

Here is HTML to display pdf after ajax

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

I am getting below error

Failed to load PDF document

Please help to fix this. How to display pdf file.

Answer 1

jQuery.ajax() does not have a responseType setting by default. You can use a polyfill, for example jquery-ajax-blob-arraybuffer.js which implements binary data transport, or utilize fetch().

Note also, chrome, chromium have issues displaying .pdf at either <object> and <embed> elements, see Displaying PDF using object embed tag with blob URL, Embed a Blob using PDFObject. Substitute using <iframe> element for <object> element.

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

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