This tutorial will show you how to insert a PDF file into a web page. To display a pdf file in a web application, we’ll utilize the HTML embed
tag.
It’s too simple and straightforward to utilize without the need for a third-party library. You can use any programming language that provides a web page to implement it.
If you are more comfortable in watching a video that explains How To Embed PDF on Web Page, then you should watch this video tutorial.
In a modal popup, I utilized an anchor link to display a PDF file. However, this helps in the presentation of a PDF document on a web page. An HTML anchor link is the easiest way to display a PDF file. HTML 4 introduces the embed
tag, which is the best solution for embedding PDF documents on a website.
Let’s use the HTML embed
tag to embed a PDF file into a web page.
A container for an external resource, such as a web page, a photograph, a media player, or a plug-in application, is defined by the HTML embed
element. The embed
tag allows you to specify the following arguments.
In the project folder, I created a index.html
file. To embed a PDF file in an HTML web page, we’ll use the following code.
<embed src="files/test.pdf" type="application/pdf" width="100%" height="800px" />
On the web page, we can also control how the pdf document is viewed. There are a variety of characteristics that can be used to display PDF documents.
To embed a PDF file in HTML or open it in the browser, use the following arguments.
You can pass multiple parameters in the URL. The Each parameter should be separated with either an ampersand (&
) or a pound (#
) character.Actions are performed in order from left to right, with subsequent actions overriding prior ones.
phpflow.com/pdf_view/test_doc.pdf#page=5 phpflow.com/pdf_view/test_doc phpflow.com/doc.pdf#Chapter5 phpflow.com/doc.pdf#page=3&zoom=100,200,150 phpflow.com/doc.pdf#zoom=200 phpflow.com/doc.pdf#page=2&view=fitH,150
When we need to conceal the toolbar on a PDF viewer, we’ll use the following code to embed PDF documents in a web page and hide or remove the embedded PDF’s toolbar.
<embed src="files/test.pdf#toolbar=0&scrollbar=0" type="application/pdf" width="100%" height="600px" />
The 'object'
tag you would be focusing on is ‘object’ which will be used to embed a pdf html code into a webpage.it can also be used to embed ActiveX, Flash, video, audio, and Java applets.
<object data="pdf/doc.pdf#page=2" type="application/pdf" width="100%" height="100%">
We can also embed PDF file using 'iframe'
, The 'iframe'
tag is widely used by many website designers to embed a pdf html code into a webpage. This tag can also be used to embed a pdf html code if the browser does not support PDF documents or embed a pdf HTML code.
<iframe src="pdf/doc.pdf#page=2" width="100%" height="100%">
This tutorial helps integrate a PHP SDK with Laravel. We'll install aws-php-sdk into laravel application and access all aws services… Read More
in this quick PHP tutorial, We'll discuss php_eol with examples. PHP_EOL is a predefined constant in PHP and represents an… Read More
This Laravel tutorial helps to understand table Relationships using Elequonte ORM. We'll explore laravel table Relationships usage and best practices… Read More
We'll explore different join methods of Laravel eloquent with examples. The join helps to fetch the data from multiple database… Read More
in this Laravel tutorial, We'll explore valet, which is a development environment for macOS minimalists. It's a lightweight Laravel development… Read More
I'll go through how to use soft delete in Laravel 10 in this post. The soft deletes are a method… Read More
View Comments
#toolbar=0&scrollbar=0 <= not working in firefox
noted, thanks for your info