Better Way To Embed PDF Documents In Web Pages
PDF (Portable Device Format) stands for reliability in the digital world. Known initially as the Camelot Project it has been around for almost 100 years. However, it still continues to present problems. One such problem is embedding a pdf document on a website. It becomes messy and is almost always out of alignment. Embedding something means basically attaching the, in this case, to a website.
How To Embed PDF In Web Pages
Here are a few tips that could help you:
Use the <object> tag:
The <object> tag is an HTML (HyperText Markup Language) tag used to display multimedia documents including flash, pdf, audio, video etc. It is also used for integrated webpages i.e. a web page inside another web page. You can also chuck in a bunch of attributes to make it look better using the <param> tag. This tag should be placed within the body of your HTML document. The text between <object> and </object> is an alternate text.
Sample:
<!DOCTYPE html>
<html>
<body>
<h1>PDF Document</h1>
<object width="200" height="200" data="helloworld.pdf">
</object>
</body>
</html>
The same effect can be achieved by using the <embed> tag.
Use the <a> tag
The <a href> tag or the hyperlink tag does not directly add the document but rather creates a link such that on clicking the created link it opens the attached document within the webpage. This not only prevents your website from looking cluttered but also saves space on your webpage. Just add the URL in the <a> tag and you are good to go.
Sample :
<!DOCTYPE html>
<html>
<head>
<title>PDF Document</title>
</head>
<body>
<h1> PDF Docuement</h1>
<p>Open a PDF file <a href=" Put pdf file path here">example</a>.</p>
</body>
</html>
Use iframe
An iframe or inline frame tag is usually used to embed an HTML document within another HTML document. However, it can also be used effectively to embed a pdf document without much hassle. It can also save space on a webpage as there are inbuilt scroll bars that can, however, be disabled.
Sample :
<!DOCTYPE html>
<html>
<head>
<title>PDF Document</title>
</head>
<body>
<h1>PDF Document </h1>
<p> <iframe src= ”Put path of pdf document” width=”100%” height=”100%”></iframe>
.</p>
</body>
</html>
Use Javascript:
This one for the experts. Javascript has a reputation for being notoriously tedious and at times complicated. However, it does many tasks extremely efficiently which makes it worth the time invested. Let’s take embedding a pdf as an example; while Html is a reasonably easy option there are a few tricks Javascript has up its sleeve. The best approach would be to use pdf.js.
“PDF.js is a JavaScript library that renders Portable Document Format (PDF) files using the web standards-compliance HTML5 Canvas. The project is led by the Mozilla Foundation. PDF.js can work as a part of a website or of a browser.” [WIKIPEDIA]
The advantage of using pdf.js is that you receive more control over the document. You can add an interface that would allow you to navigate or zoom in and out. You can also display annotations over the pdf. You can also rest assured that it would be visible on almost all browsers. On top of it all, it is also secure and users cannot download the pdf.
Wrapping Up
So, if you needed a better way to embed a pdf document, hopefully, you’ve found it by know. If you want to keep it quick and simple, you could always use HTML, or if you want to up your game, you could give Javascript a go. Cheers!