Embed a Blob using PDFObject

Question

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

Hi thanks for the interest. `response.Body.data` is the actual byte data of the pdf file. From S3: it is a (Buffer, Typed Array, Blob, String, ReadableStream) Object data. I´m getting the file from an Amazon S3 server. I just convert it to a Uint 8 array to be able to create the blob. The blob is created fine because if I paste the url in another tab on my browser the file is downloaded and opened just fine. — Pablo Estrada, Jun 25 '16 at 18:12
Try substituting using an `` element for an `<embed>` element</embed> — guest271314, Jun 25 '16 at 18:20

score 20 · Accepted Answer · answered Jun 25 '16 at 18:30

20

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

answered Jun 25 '16 at 18:30

guest271314

1
15
104
177

Thanks for your answer. I´m getting no display on the iframe. However the document is downloading on the iframe. Somehow the src is telling the iframe to download the file instead of rendering it. Do you know what I might be doing wrong? Also. I´m putting on 'path/to/file' the url I create from the blob i.e the result of `window.URL.createObjectURL(file)`. Is this correct? – Pablo Estrada Jun 25 '16 at 21:36
I also noticed this message on my console right now: `index.controller.js:202 Resource interpreted as Document but transferred with MIME type application/octet-stream: "blob:http%3A//localhost%3A4000/05f21b69-b7ad-4615-8ece-afa142afa440".` – Pablo Estrada Jun 25 '16 at 21:47
@PabloEstrada Tried using same approach at `html`, `javascript` at post? Can you fork plnkr http://plnkr.co/edit/9E5sGfMhUeIWV9yodAUd?p=preview to demonstrate? – guest271314 Jun 25 '16 at 21:58
1

Thanks a lot, it was my fault. I had incorrect header on the content-type. I changed them to application/pdf and it render correctly know. Thanks! – Pablo Estrada Jun 25 '16 at 22:25
@JayShukla Which version of ie? – guest271314 May 22 '17 at 13:43

score 3 · Answer 2 · answered Feb 25 '20 at 10:11

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.

score 1 · Answer 3 · answered Oct 18 '18 at 19:05

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

did similar here but not working `PDFObject.embed(val, vm.$el, options);` — Osify, Feb 25 '20 at 07:25

score 0 · Answer 4 · answered Feb 09 '21 at 05:27

0

Instead of using:

 var url = window.URL.createObjectURL(file)

Try using:

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

answered Feb 09 '21 at 05:27

Ahsan Farooq

819
9
10

Embed a Blob using PDFObject

4 Answers4

Linked