Embedding a PDF file dynamically on a web page

So embedding a PDF to a web page is pretty easy. All you need to do is to add an object or embed element to your HTML.

Actually, you could use only object or embed, depending on browser support. But using both is a safeguard. If object fails to load it’s data, it will render it’s child elements instead, in this case the embed element.

< object data='myPDF.pdf' type='application/pdf'>
 < embed src='myPDF.pdf' type='application/pdf'></embed>
</object>
 

There are spaces between the < and object/embed elements since WordPress doesn’t allow these elements. Remove it if copying this code.

But what if you don’t know what PDF file you want to display, and you want to load it dynamically? This is what I was trying to do, and of course I ran into problems displaying the PDF in Internet Explorer. This is how you should be able to set which file will be loaded using javascript. First, we add the elements to our HTML. To make it easier to get the elements in our javascript, give them a unique id.

< object id='myPdfObject' type='application/pdf'>
 < embed id='myPdfEmbed' type='application/pdf'></embed>
</object>

Then, in javascript, we SHOULD be able to change witch PDF should be shown like this.

// Get the elements.
var pdfViewerObject = document.getElementById("myPdfObject");
var pdfViewerEmbed = document.getElementById("myPdfEmbed");

// Set the elements to reference our PDF file.
pdfViewerObject.setAttribute("data", pdfUrl);
pdfViewerEmbed.setAttribute("src", pdfUrl);

It works perfectly in Chrome, but in IE (tried versions 10 and 11 as well as emulated 8 and 9), you will only see a grey frame with nothing in it. When debugging the javascript the attribute is actually updated, and everything seems to be fine, except you can’t see the PDF. Very frustrating. After a bit of googling i found a solution here (it’s not the marked answer). Instead of using <element>.setAttribute(), which should work, you need to modify the outerHTML attribute of the element.

pdfViewerObject.outerHTML = pdfViewerObject.outerHTML.replace(/data="(.+?)"/, 'data="' + pdfUrl + '"');
pdfViewerEmbed.outerHTML = pdfViewerEmbed.outerHTML.replace(/src="(.+?)"/, 'src="' + pdfUrl + '"');

However, this will only work if you already have the attribute present. So either you need to have a default url in your HTML, or you need to set the attribute first, which both is kind of annoying. Putting it all together it might look something like this.

var pdfUrl = "http://mySite/myPDF.pdf";

var pdfViewerObject = document.getElementById("myPdfObject");
pdfViewerObject.setAttribute("data", pdfUrl);
pdfViewerObject.outerHTML = pdfViewerObject.outerHTML.replace(/data="(.+?)"/, 'data="' + pdfUrl + '"');

var pdfViewerEmbed = document.getElementById("myPdfEmbed");
pdfViewerEmbed.setAttribute("src", pdfUrl);
pdfViewerEmbed.outerHTML = pdfViewerEmbed.outerHTML.replace(/src="(.+?)"/, 'src="' + pdfUrl + '"');

And there you go. Dynamically loading an embedded PDF to a web page, working in IE 8-11 and Chrome, and hopefully other browsers as well.

My main sources/further reading:
http://stackoverflow.com/questions/676705/changing-data-content-on-an-object-tag-in-html
http://stackoverflow.com/questions/1244788/embed-vs-object

Advertisements

5 thoughts on “Embedding a PDF file dynamically on a web page”

  1. I would like to thank you in advance for the tutorial.

    I need some help, i tried your pdf code and i can’t find the error :
    In the HTML ( part), i wrote this :

    HTML ( part) : <

    JS PART : var pdfUrl = “file:///C:/Users/Desktop/Mywebsite/CV/CV_TEST_2015.pdf”;

    var pdfViewerObject = document.getElementById(“myPdfObject”);
    pdfViewerObject.setAttribute(“data”, pdfUrl);
    pdfViewerObject.outerHTML = pdfViewerObject.outerHTML.replace(/data=”(.+?)”/, ‘data=”‘ + pdfUrl + ‘”‘);

    var pdfViewerEmbed = document.getElementById(“myPdfEmbed”);
    pdfViewerEmbed.setAttribute(“src”, pdfUrl);
    pdfViewerEmbed.outerHTML = pdfViewerEmbed.outerHTML.replace(/src=”(.+?)”/, ‘src=”‘ + pdfUrl + ‘”‘);

    Don’t you have a demo to show ? Or even help me to find the error ? My page doesn’t to show the object or/and embed.

    (Sorry for my bad english, i’m french)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s