How To View Pdf In Html

PDFs are a popular file format for sharing documents, and it’s not uncommon to want to display them in web pages. In this blog post, we’ll explore different ways to display PDF files directly within your HTML pages.

Method 1: Using the <embed> or <object> tags

One common and straightforward way to display a PDF file in an HTML page is by using the <embed> or <object> tags. These tags allow you to embed various types of media, including PDF files, directly into your page.

Using the <embed> tag

To use the <embed> tag, you simply need to provide the source file (URL or path) and the type of media you want to embed. For PDF files, the type attribute should be set to “application/pdf”. Here’s an example of how to use the <embed> tag to display a PDF file:

<embed src="path/to/your/file.pdf" type="application/pdf" width="100%" height="600px">

Using the <object> tag

Another option is to use the <object> tag with the same attributes as the <embed> tag. The primary difference is that the <object> tag allows you to include fallback content for browsers that do not support the embedded media. Here’s an example of how to use the <object> tag:

<object data="path/to/your/file.pdf" type="application/pdf" width="100%" height="600px">
    <p>It appears your browser does not support PDFs. Please <a href="path/to/your/file.pdf">download the PDF</a> to view it.</p>
</object>

Method 2: Using a JavaScript library (PDF.js)

Another method for displaying PDFs in HTML is using a JavaScript library like PDF.js, developed by Mozilla. This library allows you more control over the display and functionality of the PDF viewer.

Step 1: Download and include the PDF.js library

First, download the PDF.js library from the official website or include it via a CDN like cdnjs. Then, link to the pdf.js and pdf.worker.js files in your HTML:

<script src="path/to/pdf.js"></script>
<script src="path/to/pdf.worker.js"></script>

Step 2: Create a <canvas> element for rendering the PDF

Next, create a <canvas> element in your HTML where the PDF will be rendered:

<canvas id="pdf-canvas"></canvas>

Step 3: Load and render the PDF using JavaScript

Finally, use JavaScript to load the PDF file and render it on the canvas element. The following code demonstrates a simple example using the PDF.js library:

<script>
  // Specify the path to the PDF file
  var url = 'path/to/your/file.pdf';

  // Get the canvas element and its context
  var canvas = document.getElementById('pdf-canvas');
  var context = canvas.getContext('2d');

  // Load the PDF and render the first page
  pdfjsLib.getDocument(url).promise.then(function (pdfDoc) {
      // Get the first page
      pdfDoc.getPage(1).then(function (page) {
          // Set the canvas dimensions to match the PDF page dimensions
          var viewport = page.getViewport({ scale: 1.0 });
          canvas.height = viewport.height;
          canvas.width = viewport.width;

          // Render the page on the canvas
          page.render({ canvasContext: context, viewport: viewport });
      });
  });
</script>

There are many additional options and features available with PDF.js, such as navigation, zooming, and searching. You can explore the PDF.js API documentation for more information.

Conclusion

In this blog post, we’ve explored two methods for displaying PDF files directly in your HTML pages: using the <embed> or <object> tags and using a JavaScript library like PDF.js. Choose the method that best suits your needs and enjoy the convenience of displaying PDFs directly within your web pages!