How to Embed PDF Document in HTML Web Page

by | Apr 6, 2022 | PHP, React

In this tutorial, we will show you how to display an Embed PDF Document on an HTML Web Page. The PDF (Portable Document Format) document quickly and easily links to an HTML code into a webpage. This Embed PDF Document support all modern browsers. The PDF document’s contents can be displayed in several ways to attach, embed, or hyperlink is used to link a PDF HTML code into a webpage.

How to Embed Microsoft Word and Excel Documents in HTML Web Page

Using Embed PDF File in HTML

The HTML embed tag has 4 parameters are: src (external file to embed), type (media type of the embedded content), width (width of the embedded file), and height (height of the embedded file). We’ll use the following code to embed a PDF file in the HTML Web page. 

 PDF  
<embed src="https://codeat21.com/wp-content/uploads/2022/04/sample_pdf_file.pdf" width="100%" height="477px" />

Specifying Parameters in URL

  • https://codeat21.com/doc.pdf#Chapter4
  • https://codeat21.com/doc.pdf#page=4
  • https://codeat21.com/doc.pdf#page=2&zoom=200,250,100
  • https://codeat21.com/doc.pdf#zoom=100
  • https://codeat21.com/doc.pdf#page=62&view=fitH,100

Disable and Hide Toolbar in PDF Web Viewer

This method are using embedded PDF documents toolbar hide or remove in a website page.

 PDF 
<embed src="https://codeat21.com/wp-content/uploads/2022/04/sample_pdf_file.pdf#toolbar=0&navpanes=0&scrollbar=0" width="100%" height="477px" />
 Index.html 
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Embed PDF Document in HTML Web Page by CodeAT21</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
	.embeded{display:flex;}
	.cols{padding:17px; width:50%;}
</style>
</head>
<body>
<div class="container">
	<div class="embeded">
		<div class="cols">
			<h2>Embed PDF Document </h2>
			<embed src="https://codeat21.com/wp-content/uploads/2022/04/sample_pdf_file.pdf" width="100%" height="600px" />
		</div>
		<div class="cols">
			<h2>Embed PDF Document Hide toolbar, navpanes, and scrollbar</h2>
			<embed src="https://codeat21.com/wp-content/uploads/2022/04/sample_pdf_file.pdf#toolbar=0&navpanes=0&scrollbar=0" width="100%" height="600px" />
		</div>
	</div>
</div>
</body>
</html>

How to Embed Microsoft Word and Excel Documents in HTML Web Page

Related keywords

  • How to Embed PDF in HTML
  • How to Embed PDF Document in HTML Web Page
  • Recommended way to embed PDF in HTML?
  • A Better Way to Embed PDF Documents in Web Pages
  • 3 Steps to Embed PDF Documents in HTML Website
  • How to Insert PDF in HTML with 2 Methods
  • Embed PDF in HTML full size
  • Adjust display height of embedded pdf in html page
  • How to Embed a PDF in an HTML Website
  • HTML PDF viewer without download
  • How to embed a PDF in HTML without the ability to download
  • How to Display PDFs but Prevent Them From Downloading
  • How to display pdf in browser (not downloading!)
  • Simple Ways to Embed PDF in Html Page
  • Ameica, US, UK, United State, Newyork, United Kingdom, France, Germany, Itally, canada, England