Sometimes you may need to display PDF file as a link or document in HTML. For example, website like Scribd allow you to upload and share PDF documents with others. They also allow you to view PDF documents using PDF viewer. There are several ways to embed PDF in HTML. In this article, we will learn how to embed PDF in HTML.
How to Embed PDF in HTML
Here are the steps to embed PDF in HTML documents.
1. As Link
The simplest way to embed PDF in HTML is to add it as an anchor tag. Here is an example of a link (e.g. /uploads/data.pdf) to PDF document in HTML. Replace<url location to pdf> and <text to be displayed> with URL location of PDF (e.g. /uploads/data.pdf) and the text to be displayed respectively.
<a href="<url location to pdf>"><text to be displayed></a>
Here is an example of the same in an HTML.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>PDF Example</h1>
<p>Open a PDF file <a href="<url location to pdf>"><Text to be displayed></a>.</p>
</body>
</html>
2. Using iframe
If you want to display the contents of PDF file in HTML page, you need to use an iframe. Here you will need to mention the PDF url (e.g. /uploads/data.pdf) as iframe tag’s src attribute.
<iframe src="URL"></iframe>
You can also use width and height options to define the dimensions of PDF viewer.
<iframe src="URL" height="200" width="300"></iframe>
Here is a full example of PDF in an iframe inside HTML document.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>PDF Example</h1>
<iframe src="<url to pdf>" width="100%" height="500px">
</body>
</html>
However, please note, the PDF document inside iframe will still be downloadable to viewers. If you want to disable downloads, add #toolbar=0 after URL of PDF document.
<iframe src="/uploads/data.pdf#toolbar=0" width="100%" height="500px">
In this article, we have learnt a couple of ways to display PDF in HTML. You can customize and use these examples to embed PDF documents on your web pages, websites or web applications.
Also read:
How to Run Multiple Python Files One After the Other
How to Merge PDF Files in Python
How to Do Incremental Backup in MySQL
How to Pass SSH Password in Shell Script
MySQL Change Table Engine from InnoDB to MyISAM
Related posts:
Sreeram has more than 10 years of experience in web development, Python, Linux, SQL and database programming.