Display PDF within web browser

html

responsive-design

embed

pdf-js

byAnton Shumikhin·Dec 28, 2024

To display a PDF within a webpage, the HTML <embed> tag is a straightforward solution. Simply commandeer the src attribute to point to your PDF file like so:

<embed src="the-name-of-PDF-file.pdf" type="application/pdf" width="600" height="400">

This method is loved by all browsers and doesn't require external plugins, enabling users to instantly engage with your PDF.

If your PDF is strutting its stuff online, Google Docs' embeddable PDF viewer can swoop in. Ensure the PDF is as public as a celebrity tweet and then slot it into an <iframe>:

<iframe src="http://docs.google.com/gview?embedded=true&url=http://www.publicinternet/your-public-PDF.pdf" style="width:600px; height:500px;" frameborder="0"></iframe>

With this technique, no PDF will be left unread, regardless of browser type or specific plugin preferences.

Serving everyone's PDF needs

The `<object>` card up your sleeve

If you crave total control and care about your fallback content, the <object> tag steps forward.

<object data="foo.pdf" type="application/pdf" width="600" height="400">
  <p>Oh no, it seems your browser didn't get the memo. <a href="foo.pdf">Click me to download the PDF file.</a></p> <!-- Who needs PDF plugins anyway? -->
</object>

Here, the type="application/pdf" sets the stage and provides presentation customization on a silver platter.

Serving all devices

Ensure a top-notch user experience on every device:

Embed with <embed> or <object> for a flawless desktop browser experience.
Include a direct download link for those who like to do things differently:
```
<a href="foobar.pdf">Download PDF</a> 
```
For superhero-level display abilities, such as search, zoom, and selection, consider the marvel that is PDF.js.

PDF.js: lifting your PDF game

For those who want more:

Embrace PDF.js for supreme PDF rendering.

Basic usage:

<canvas id="pdf-canvas"></canvas>
<!-- This is where we invoke the spirit of PDF.js -->
<script src="pdf.js"></script>
<script>
  PDFJS.getDocument('the-name-of-PG-rated-PDF-file.pdf').then(function(pdf) {
    pdf.getPage(1).then(function(page) {
      var scale = 1.5;
      var viewport = page.getViewport(scale);
      var canvas = document.getElementById('pdf-canvas');
      var context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      var renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      page.render(renderContext);
    });
  });
</script>

With PDF.js, PDFs have never looked so good in a browser.

Understanding embedding using gallery metaphor 🖼️

Imagine the web browser (🌐) as a gallery space and the PDF file, a masterpiece painting (🖼️).

<iframe> is the picture frame that presents the masterpiece.

<iframe src="masterpiece.pdf" style="width:600px; height:500px;"></iframe>

The masterpiece (🖼️) is now openly displayed in the gallery (🌐) for everyone to admire!

Tips for multi-device compatibility

Check embedding technique compatibility across mobile devices. With some of them disliking <iframe> or <embed>, testing becomes a critical step.
Utilize responsive CSS to adjust the PDF display dimensions and ensure seamless browsing experience on any device.
Explore alternative viewer options like FlexPaper or PDFObject for those niche needs.

Pushing the aesthetic boundaries

Style your <iframe>, <embed>, or <object> elements using CSS to blend in with your webpage.
Optimize your PDF viewer size to match the content area and prevent the need for excessive scrolling.
If the PDF is the star of the show, consider using a modal window or a new browser tab for a rich full-page PDF experience.