Displaying pdf from arraybuffer
Solution 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()
Solution 2
I like guest271314 answer a lot, especially the second version using fetch, but I wanted to add a solution that does not use a polyfill or an experimental technology like fetch
.
This solution uses the native XMLHttpRequest API to create the request. This allows us to change the responseType
to 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();
I forked guest271314s plnkr to show this method in action: http://plnkr.co/edit/7tfBYQQdnih9cW98HSXX?p=preview
Solution 3
From my tests the responce is in response not response.data, so the following should work:
$.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);
});
Although it seems JQuery is doing something with the responce causing a blank PDF output... (PDF is blank when downloading using javascript). This will work:
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();
GRESPL Nagpur
Updated on July 31, 2022Comments
-
GRESPL Nagpur almost 2 years
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.