Display Pdf file on web page

In this article, I’ll explain different ways to embed Pdf files in your web application.

Method 1: Using the <embed> tag

Let’s start with the tag and that is the easiest way to display PDF in browser. This tag allows you to embed the PDF directly within your HTML page.

Example:

<embed src="yourfile.pdf" width="600" height="400" type="application/pdf">

src: Path to your PDF file (relative or absolute URL). width and height: Specify the size of the embedded PDF viewer. type: The MIME type for PDF files is application/pdf.
Browser Support:
Most modern browsers support <embed> tag to display Pdf files.

Method 2: Using the <iframe> Tag

Another option is to use the <iframe> tag, which can also display PDF files directly in the browser.

Example:

<iframe src="yourfile.pdf" width="600" height="400"> This browser does not support PDFs. Please download the PDF to view it: <a href="yourfile.pdf">Download PDF</a> </iframe>

src: The path to the PDF file.
In case the browser does not support PDF embedding, a message is displayed, along with a link to download the file.
Browser Support:
Like <embed>, most modern browsers can display PDF filess with the <iframe> tag.

Method 3: Using Object Tag

The <object> tag provides another way to embed PDF files. It also supports fallback content in case the PDF cannot be displayed.

Example:

<object data="yourfile.pdf" type="application/pdf" width="600" height="400"> This browser does not support inline PDFs. You can <a href="yourfile.pdf">download it here</a>. </object>

data: Path to the PDF file.
Fallback Message: This will be displayed if the browser can’t render the PDF directly.