Ngademin Pegiat Teknologi

Easily Display PDF Files In HTML

3 min read

Menampilkan File PDF Di HTML Dengan Mudah

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.

preparation for displaying pdf in html

preparation for displaying pdf in 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

display pdf files in html

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

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

display pdf files with tag object

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

Tag Iframe

Then for the third method, we can use the tag

which is already provided by HTML.

index.html

The example above is an example of how to display a pdf file in HTML by using the tag iframe.

Also Read: Use of Iframe Tags in HTML

Attribute Description

With some attributes such as the following:

  • src
    fill in the name and location of the pdf file you want to display.
  • width
    fill in the desired width setting
  • height
    fill in the desired height setting

And the results are as follows.

display pdf files with iframe tags

display pdf files with iframe tags

As seen in the sample image above, the preview of the sample pdf pdf file has also been successfully displayed as we wanted.

Browser support

  • Opera
  • Internet Explorer
  • Google Chrome
  • Mozilla Firefox
  • Safari

Conclusion

There are 3 ways that we can use to preview PDF files in HTML/PHP, namely we can use iframe tags, object tags and embed tags.

You can also apply this tutorial to friends file PHP. as long as the placement and naming of the pdf file is in accordance with what we fill in the attributes of each tag.

Hopefully it can be useful.

Download Source Code

Demo

Incoming search terms:

  • create links and display pdf files
  • php script to display pdf files
  • blogging tutorial pdf language:id
  • buat coding searching file pdf ke web php
  • for coding read pdf
  • How to print pdf in html
  • how to download pdf on the web
  • how to view pdf files on codeigniter
  • tutorial zoom android pdf language:id
  • how to make a pdf file download feature in php

Ngademin Pegiat Teknologi

Google menyediakan Earth Engine untuk semua bisnis dan pemerintah

Selama dekade terakhir, para peneliti di akademisi dan organisasi nirlaba telah memperoleh akses ke informasi yang semakin kompleks tentang permukaan bumi melalui Google Earth...
Ngademin
1 min read

Google menyediakan Earth Engine untuk semua bisnis dan pemerintah

Selama dekade terakhir, para peneliti di akademisi dan organisasi nirlaba telah memperoleh akses ke informasi yang semakin kompleks tentang permukaan bumi melalui Google Earth...
Ngademin
1 min read

© 2020 Caraseru.com | All Right Reserved