How to embed a PDF in HTML

how-to-embed-a-pdf-in-html

There are various methods to display PDF files on a website. In this blog post, we will explore different techniques to embed a PDF in HTML pages, with their pros and cons.

In this tutorial, I will use ssa-89 form as my sample pdf file. You just need to download that form and place it into your working directory (where you will be saving your html files).

Also Read: Replace Text in a PDF File with Python

Method 1: Using the <embed> Tag

You can embed a PDF by using the <embed> tag of HTML. This method is simple and easy to use and supported by all major web browsers (I have tested it in Chrome and Edge browser).

<!DOCTYPE html>
<html>
<head>
	<title>Embedding PDF in HTML</title>
</head>
<body>

	<h1>Embedded PDF Example</h1>

	<embed src="ssa-89.pdf" width="500" height="700" type="application/pdf">

</body>
</html>

The “src” attribute specifies path of the PDF file. You can specify dimensions of the embedded PDF file using “width” and “height” attributes.

embed-a-pdf-using-embed-tag-in-html

Since the output image will be same for all methods, I will not show the output image for rest of the methods.

Method 2: Using the <object> Tag

Another method for embedding PDFs in HTML pages is by using the <object> tag. This method is more flexible than the <embed> tag. It allows for greater control over the appearance of the embedded PDF.

One advantage of using the <object> tag is that it allows for alternative text to be displayed in case the embedded PDF cannot be loaded or viewed by the user. This can be useful for accessibility purposes.

<!DOCTYPE html>
<html>
<head>
	<title>Embedding PDF in HTML</title>
</head>
<body>

	<h1>Embedded PDF Example</h1>

	<object data="ssa-89.pdf" type="application/pdf" width="500" height="600">
		<p>Alternative text for the embedded PDF.</p>
	</object>

</body>
</html>

Method 3: Using Google Docs Viewer

Google Docs Viewer is a free service provided by Google that allows users to view PDF documents online without downloading them. You can use this service to embed PDFs in HTML pages. You need to use <iFrame> tag of HTML to embed a pdf using this technique.

Also Read:  Convert Chat Conversation to Question Answering Data

One thing to note that, this method is useful only when your pdf file is stored on an online server. It will not work for locally stored pdf files. This is the reason I had to mention link of the ssa-89 form (https://www.ssa.gov/forms/ssa-89.pdf).

<!DOCTYPE html>
<html>
<head>
	<title>Google Docs Viewer Example</title>
</head>
<body>

	<h1>Embedded PDF Example</h1>

	<iframe src="https://docs.google.com/viewer?url=https://www.ssa.gov/forms/ssa-89.pdf&embedded=true" width="500" height="600"></iframe>

</body>
</html>

Method 4: Converting PDF to HTML

Another interesting method is convert the pdf file to HTML format directly using Python. To do that you need to install library called aspose-words.

!pip install aspose-words

Once you installed the library, you need to run below Python code to convert the pdf file into an HTML format.

# Convert PDF to HTML - Python
import aspose.words as aw

# Load the PDF file
doc = aw.Document("ssa-89.pdf")

# Save the document as HTML
doc.save("ssa-89.html")
convert-pdf-to-html-using-python-to-embed-in-website
Output PDF

As you can see in the above output the python code is correctly converting the pdf file to html. But there is a watermark with some note saying: “Evaluation Only. Created with Aspose.Words. Copyright 2003-2023 Aspose Pty Ltd.“

This is because this library is not a free-to-use Python library. You need to purchase their license to remove this watermark. You can check all Apose pricing here.

Method 5: Using a Third-Party Service

Third-party services are available for embedding PDFs in HTML pages. These services provide customization options and additional features like analytics and security.

Some of the popular third-party services for embedding PDFs are like Issuu, Scribd, Embedly, etc.

Issuu is a digital publishing platform where you can create and embed digital publications on your website, including PDFs.

Also Read:  Learn Web Scraping using Beautifulsoup and Python

Scribd is an online platform for sharing and reading documents, and you can embed Scribd documents using an HTML embed code.

Embedly is a service that allows you to embed all kinds of content, including PDFs, in your web pages using a simple embed code.

Third-party services can give you more features and customization options. But you need to pay extra costs for it. Along with that, there are some limitations like you may not have complete control over the appearance and behavior of the embedded PDF on your website.

Conclusion

So as you see throughout this tutorial, embedding a PDF in HTML is not a complicated task. There are different methods available to choose from. Depending on your requirements and preferences, you can select the one that suits you best.

This is it for this tutorial. If you want to add any other method in this post, please let me know in the comment section below.

Leave a comment