How to display PDF file in HTML?

Methods to display PDF in HTML

Beyond <object>, several other HTML tags can be employed to embed your PDF:

The <embed> solution

Use this tag to set up a PDF viewer within your HTML. Define the PDF file with src and it's size with width and height. Don't forget the type attribute, so browsers know we're dealing with a PDF.

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

PDF on display with <iframe>

Leverage Google Docs Viewer to display online PDF files in an <iframe>. This is especially useful with PDFs stored on Google Drive.

<iframe src="http://docs.google.com/gview?url=http://path-to-your-file.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>


Remember to replace the URL with yours and tweak the style attribute to get the width and height just right.

Browbeat the browser into displaying PDFs

Your embedded PDFs must adhere to accessibility standards so all users, including those with disabilities, can enjoy your content. Tools like Acrobat's Accessibility Checker can ensure your PDFs are universally accessible.

Advanced embedding techniques and troubleshooting issues

Nitty-gritty details, pitfalls, and sanity checks:

Exploit pdf.js for advanced features

Want those fancy extras like zooming and searching within the embedded PDF? pdf.js by Mozilla got you covered:

// pdf.js — a gentleman's magic wand for levitating PDFs in cyberspace.
<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>

// That solemn ceremony of getting the PDF to dance to your tune
var url = 'path-to-your-file.pdf'; // Change this to suit your PDF's living conditions
var pdfjsLib = window['pdfjs-dist/build/pdf'];

// And now, we summon the spirit of Picasso
pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
var loadingTask = pdfjsLib.getDocument(url);

loadingTask.promise.then(function(pdf) { 
  console.log('PDF levitating successfully'); // It's alive!!!

  // Ready the canvas for the magic show
  var container = document.getElementById('canvas-container');
  for(var i = 1; i <= pdf.numPages; i++) {
    pdf.getPage(i).then(function(page) {

      // Let's not be a squint-eyed wizard, huh? Adjust the scale.
      var scale = 1.5;
      var viewport = page.getViewport({scale: scale});

      // Prepare the canvas for Picasso's ghost (no pressure)
      var canvas = document.createElement('canvas');
      var context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      // And ACTION!
      var renderContext = {
        canvasContext: context,
        viewport: viewport
      };

      // Strike up the band!
      var renderTask = page.render(renderContext);
      renderTask.promise.then(function () {
        console.log('Page rendered'); // Ta-da!!!
      });
    });
  }
}, function (reason) {
  console.error(reason);
});


Cross-browser compatibility – the browser hunger games

Ensure your PDF embedding is browser-friendly. While most modern-day browsers do play ball, there can be anomalies, especially on mobile. Always offer a download link as a peace offering. Your users will appreciate it!

Unravel the mystery of X-Frame-Options

Embedding third-party PDFs with <iframe>? Check X-Frame-Options HTTP response header. It must allow resources from the same origin (allow SAMEORIGIN). Browsers need written permission, you see.