In this tutorial we will show you the solution of embed PDF in HTML iframe, in HTML, there is an inline frame which is known as iframe this is used to make an inline frame.
As we already discuss that frameset is used to divide the whole webpage of browser in division whereas the iframe is used to specify a division that is inline used in web browser and specify a division in which you can show your additional data here.
And today our topic is about how to embed pdf in html iframe which we are going to discuss below.
Step By Step Guide On Embed PDF In HTML iframe :-
Now, here we are going to show you an example in which we show you that how you are able to embed pdf in html with the help of iframe.
For this first we have to create a iframe tag in html and also inside the body. After this we have to
<!DOCTYPE html> <html> <head> <title> Title of the document<title> </head> <body> <h1> example of embedding a pdf inside the iframe tag in html </h1> <iframe src="https://www.surveyofindia.gov.in/documents/coi-hindi.pdf" ></iframe> <p> you can also use height and width to customize the iframe </p> <iframe src="https://legislative.gov.in/sites/default/files/coi-4March2016.pdf" width="1000px" height="300px"></iframe> <p> THIS IS FOR EDUCATIONAL PURPOSES ONLY </p> </body> </html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Here, we create body tag, which is a paired tag. And all the contents that are being to be displayed on browser screen are written here.
- Here, we first create a heading to show you this code is for embed pdf in iframe tag. After this we give an example of iframe in which first iframe tag is created and in source attribute of this tag, we give the link and source of pdf file. Here in example we used online pdf that are on some servers.
- After this we give you another example in which we only uses the width and height attribute to change the dimensions of default iframe tag.
- We hope that you understand the concept. You can also use local pdf instead of online pdf’s.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we show you an example in which we online pdf and both default and custom dimensions you can use any one you want.
I hope this tutorial on embed PDF in HTML iframe helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
