3 Ways to Embed PDF in a Web Page

Recommend this page to a friend!
  Blog PHP Classes blog   RSS 1.0 feed RSS 2.0 feed   Blog 3 Ways to Embed PDF i...   Post a comment Post a comment   See comments See comments (0)   Trackbacks (0)  

Author:

Updated on: 2020-11-11

Posted on: 2020-11-11

Categories: PHP Tutorials

As we all know, PDF is a popular file format used to distribute documents that often are meant to be printed.

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.




Introduction

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.

<html>
<body>
<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>
</object>
</body>
</html>

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" />
</body> </html>

Conclusion

Using <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.

Happy Coding!



You need to be a registered user or login to post a comment

Login Immediately with your account on:

FacebookGmail
HotmailStackOverflow
GitHubYahoo


Comments:

No comments were submitted yet.




  Blog PHP Classes blog   RSS 1.0 feed RSS 2.0 feed   Blog 3 Ways to Embed PDF i...   Post a comment Post a comment   See comments See comments (0)   Trackbacks (0)  

For more information send a message to info at phpclasses dot org.