Easily Display PDF Files In HTML

Displaying PDF Files In HTML – Welcome back to the website malasngoding.com. In this tutorial we will learn about how to display PDF files in HTML or at Website.

As we know, that usually pdf files can only be opened using software such as nitro pdfAdobe Reader and others.

But in this tutorial we will learn how to display pdf file in HTML or website.

Because sometimes we want to display PDF files on our website pages, whether it’s on a personal website, campus website, school or other website.

To display a pdf file that can be directly downloaded by visitors. like files journals, archives, reports and file other.

Or maybe you are working on an application that requires a feature to display the contents of a pdf file on a website page. naturally without using javascript.

Displaying PDF Files In HTML

In HTML itself, several tags have been provided that we can use to display PDF files in HTML or on websites.

That is, we can use tags:

Also Read: How to print a report from a database with PHP

Previously, for clarity, I will first explain what preparations are needed to follow this tutorial.

Preparation

Preparation for an example of displaying a pdf in html is not complicated. we only need the following 2 files.

• File pdf ( example.pdf )
• HTML or PHP files ( index.html )

First, please prepare a pdf file.

Yes, of course we have to have the PDF file, what if we don’t want to show it? haha ..

Here I have a pdf file for our experimental example. and I name it with file example.pdf.

Second, we need HTML or PHP files, it’s up to friends. Since this is just an example, I created a new HTML file with the name index.html.

After the preparation is complete, then let’s just start with the first way.

That is how to display pdf file in HTML by using embed tag.

Tag Embed

To display a PDF with an embed tag, we can use the tags provided in HTML, namely the..tag.

Index.html

Look at the example above. here we can display the pdf file by using the..tag.

Attribute Description

With some attributes such as the following:

• type
  in the type attribute, fill it with “application/pdf” to indicate that what is displayed in this embed tag is a pdf file.
• src
  fill in the name and location of the pdf file you want to display. because in this example the pdf file and the html file are in the same directory, then we just write the name of the file with “example.pdf”.
• width
  fill in the width of the embed that you want in the width attribute. here I made it with a width of 600.
• height
  fill in the height of the embed that you want in the height attribute. here I made it with a height of 400.

Now we run it to see the result.

display pdf files in html

As seen in the sample image above, we have successfully displayed a PDF file using the htmltag.

Tag Object

The second way, we can also use the tag that has been provided in HTML.

We can directly use it as before.

index.html

Look at the example above. here we can display the pdf file by using the tag.

Attribute Description

With some attributes such as the following:

• data
  fill in the name and location of the pdf file you want to display.
  in this example we immediately fill it with “example.pdf”. according to the name of the pdf file.
• type
  fill it with “application/pdf” to notify that what is displayed is a pdf file.
• width
  fill in the desired width setting
• height
  fill in the desired height setting

Now we run it to see the result.

display pdf files with tag object

As seen in the sample image above, we have successfully displayed a PDF file using the