Usually, we need to display PDF file in HTML web page, today we will learn how do we embed the PDF file in a web page. There are many ways to do this. It's important to understand the best approach that suits your needs.
Following are super easy methods for adding the PDF to your Website.
1. <embed />
3. <iframe> </iframe>
No JavaScript required, HTML standard, and Easy to use. You can reach the maximum users using a iframe.
DEMO
To cover the maximum browsers, you can use the following code
Any of the above method, does not display PDF in android browser, for that you need to upload the PDF to google drive and share that document with everyone, now you get the link and use this URL with embed tag, eg:-
DEMO
If you need to display simply a PDF and does not want more control over the PDF in browser then the mix use of object and embed tag will be fine, otherwise, pdf.js can be the great tool.
<embed src="https://sumanbogati.github.io/tiny.pdf" width="600px" height="500px" />Pros:- No JavaScript required, HTML standard, and Easy to use. Cons:- It does not have a fallback when your browser is not able to display PDF. DEMO 2. <object> </object>
<object data="https://sumanbogati.github.io/tiny.pdf" type="application/pdf" width="600" height="500"> test.pdf </object>Pros:- No JavaScript required, HTML standard, and Easy to use. If a browser does not display the PDF then it let the user download the PDF by fallback. DEMO
3. <iframe> </iframe>
<iframe src="https://sumanbogati.github.io/tiny.pdf" style="width:600px; height:500px;"></iframe>Pros:-
No JavaScript required, HTML standard, and Easy to use. You can reach the maximum users using a iframe.
DEMO
To cover the maximum browsers, you can use the following code
<object data="https://sumanbogati.github.io/tiny.pdf" type="application/pdf" width="600" height="500">
<embed src="https://sumanbogati.github.io/tiny.pdf" width="600px" height="500px" />
This browser does not support PDFs. Please download the PDF to view it:
Download PDF.
</embed></object>
To reach the android browserAny of the above method, does not display PDF in android browser, for that you need to upload the PDF to google drive and share that document with everyone, now you get the link and use this URL with embed tag, eg:-
<embed src="https://drive.google.com/file/d/1ZKgZhUuBr_-nLnbpExhQmqKCx_1QqxT2/preview" width="800px" height="1000px" />We will reach to all the Desktop and android browsers by following code,
<object data="https://drive.google.com/file/d/1ZKgZhUuBr_-nLnbpExhQmqKCx_1QqxT2/preview" width="600" height="500">
<embed src="https://drive.google.com/file/d/1ZKgZhUuBr_-nLnbpExhQmqKCx_1QqxT2/preview" width="600px" height="500px" />
This browser does not support PDFs. Please download the PDF to view it: View the PDF.
</embed></object>
Advance way to display PDF in html web page,
If you want to display PDF in browsers of all devices(Desktop and android mobiles) and want more control over displaying PDF in html web page, then the pdf.js will be useful. Following are the reasons which might attract you to use pdf.js,
- Control over PDF toolbar in browser, there can be the interface, by which, end user can zoom and navigate the PDF pages.
- Some annotation over the displayed PDF.
- Supports on all desktop and mobile browsers.
- It’s secure, users are not able to download the PDF.
- You can validate on html web page that PDF is rendered or not.
- pdf.js is JavaScript library which is maintained by Mozilla, it's so reliable and community supported, that, even Opera browser uses this framework on their own browser.
DEMO
Conclusion
If you need to display simply a PDF and does not want more control over the PDF in browser then the mix use of object and embed tag will be fine, otherwise, pdf.js can be the great tool.
