CODEWITHSUNDEEP
javascripthtmlpdfpdfobject
Pablo Estrada
Pablo Estrada

Reputation: 3452

Embed a Blob using PDFObject

I'm using: https://pdfobject.com/

To display an embedded pdf file on my web app. However I cannot render a pdf created from a blob.

This is what I've tried:

var arrayBufferView = new Uint8Array(response.Body.data);
var file = new Blob([arrayBufferView], {
    type: response.ContentType
});
var url = window.URL.createObjectURL(file)
PDFObject.embed(url, "#my-container");

Gets me this result on html:

<div id="my-container" class="ng-scope pdfobject-container">

    <embed class="pdfobject" src="blob:http%3A//localhost%3A4000/869a8d9a-7eaa-48dd-99aa-49bf299114aa" type="application/pdf" style="overflow: auto; width: 100%; height: 100%;" internalinstanceid="88">

</div>

However the embed container displays nothing in my browser. I'm using Chrome 51.0.2704.103 m

Upvotes: 9

Views: 46503

Answers (4)

Ahsan Farooq
Ahsan Farooq

Reputation: 957

Instead of using:

 var url = window.URL.createObjectURL(file)

Try using:

 var url = window.URL.createObjectURL(file, { type: 'application/pdf' })

Upvotes: 0

Osify
Osify

Reputation: 2295

Just a complement to the answer by using iframe, we need also to use pdfjs viewer on this otherwise it will download.

<div id="my-container" class="PDFObject-container">
    <iframe src="/pdfjs/web/viewer.html?file=blob:http://xxx:8098/fsadfsaf" type="application/pdf" width="1000" height="600" style="overflow: auto;">
    </iframe>
</div>

The blob is created from binary response creates with Javascript

const url = window.URL.createObjectURL(new Blob([response], { type: 'application/pdf' }));

I do hope PDFObject can do the work without using iframe but as tested, it's not success.

Upvotes: 3

Fernando
Fernando

Reputation: 21

This is what l believe you were looking for.

function previewPdf(billName) {

var xhr = new XMLHttpRequest();
xhr.open('GET', 'home/download?pdfBillId=' + billName, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
    if (this.status == 200) {
        var file = new Blob([this.response], { type: 'application/pdf' });
        var fileURL = URL.createObjectURL(file);
        var viewer = $('#viewpdf');
        PDFObject.embed(fileURL, viewer);
    }
};
xhr.send(); 
}

Upvotes: 1

guest271314
guest271314

Reputation: 1

Try using <iframe> element, requesting resource as a Blob

html

<div id="my-container" class="ng-scope pdfobject-container">
    <iframe src="" type="application/pdf" width="100%" height="100%" style="overflow: auto;">
    </iframe>
</div>

javascript

var xhr = new XMLHttpRequest();
// load `document` from `cache`
xhr.open("GET", "/path/to/file.pdf", true); 
xhr.responseType = "blob";
xhr.onload = function (e) {
    if (this.status === 200) {
        // `blob` response
        console.log(this.response);
        var file = window.URL.createObjectURL(this.response);
        document.querySelector("iframe").src = file;

    }
};
xhr.send();

plnkr http://plnkr.co/edit/9E5sGfMhUeIWV9yodAUd?p=preview

Upvotes: 20

Related Questions