Updated on: 2020-11-18
Posted on: 2020-11-11
Viewers: 203 (November 2020 until December 2020)
Last month viewers: 77 (December 2020)
Categories: PHP Tutorials
There are several ways to display the contents of a PDF document in a Web page.
Read this article to learn about 3 ways that can be used to make PDF documents be displayed in any HTML Web page.
A PDF document can be embeded in a Web page using plain HTML files or HTML generated by PHP or any other server side language.
In this article, we discuss how to embed PDF in a Website using HTML in 3 known ways.
1. Using the <iframe> tag
The <iframe> tag can make a resource that is external to a page be displayed as if it is part of the page.
The syntax is simple.
<iframe src="PDF_SOURCE_URL" width="100%" height="100%">
The <iframe> HTML tag has some attributes which are used to define aspects of how to embed PDF the HTML <iframe>. Those attributes are explained below:
src = with this attribute you can set the path of the external PDF file to embed
type = with this attribute you can set the media type of the embedded content which should be application/pdf for PDF documents. This attribute is not necessary as Web browsers will detect the correct media type when the access the server to retrieve the PDF document.
width = with this attribute you can specify the width of the embedded content.
height = with this attribute you can set the height of the embedded content.
2. Using the <object> tag
One possibility to embed PDF documents in a Web page is to use the <object> tag. The attributes of the object tag are similar to those used with the <iframe> tag.
<object width="400" height="500" type="application/pdf" data="PDF_SOURCE_URL?#zoom=85&scrollbar=0&toolbar=0&navpanes=0">
<p>Insert message here, if the PDF cannot be displayed.</p>
3. Using the <embed> tag
Using the <embed> tag is also similar to using the <object> with the <object> tag, except that we are not using any tag attributes with the <embed> tag.
<html> <head> <title>My PDF Document</title> </head> <body> <embed src="PDF_SOURCE_URL" />
ConclusionUsing <embed> and <object> tag is as deprecated solution that is not recommended anymore. It was used in the early years of the Web when the HTML standard was still evolving with the browsers that existed then.
So, we recommend using the <iframe> tag to embed PDF documents in your website, which is also an easy way to do the same the achieve the same purpose.
I hope, I have cleared all the doubts about how can PDF documents be embeded in the HTML page using <iframe> HTML tag.
If you have questions or you are facing any issues with this matter, please let me know in the comments.
You need to be a registered user or login to post a comment
Login Immediately with your account on: