Embed PDF document in your web page

  • article
  • quarto
  • Q&A
How to embed PDF document in your Quarto web page
Author

David Folio 

Published

Why embed PDF document in webpage

There are various methods for incorporating PDF files into a webpage. This can be used for sharing e-books, white papers, or brochures, for example. By embedding PDFs directly onto your page, visitors can view the content without downloading it or leaving your page, which increasing accessibility.
This post outlines a few simple methods to help you integrate PDFs into your website seamlessly.

Embed PDF document in Quarto HTML document

The embed and object HTML tags

The most efficient and straightforward method is to utilize an HTML tag directly, such as the embed tag:

<embed title="My CV" src="http://dfolio.fr/pdf/2024_cv-dfolio-en.pdf" width="100%" height="480" />

or object tag:

<object title="My CV" data="http://dfolio.fr/pdf/2024_cv-dfolio-en.pdf" type="application/pdf" width="100%" height="420" aria-labelledby="Talk PDF slides">
PDF not showing? Click  [here](http://dfolio.fr/pdf/2024_cv-dfolio-en.pdf "Click to download PDF slides"){rel="nofollow" .download-link download } download.
</object>

This eliminates the need for third-party scripts.

Both tags are fully compatible with the majority of modern web browsers, including Internet Explorer, Edge, Chrome, Firefox, Safari, and Opera. From my point of view, the object tag offers greater versatility. Actually, if the browser does not support the embedding of the PDF document, an alternative content can be displayed.

Tip

Two useful extensions for Quarto HTML pages are embedio and embedpdf. These allow you to embed easyly PDF documents on your pages. I have forked the embedpdf extension to add further attributes (e.g., title, role, etc.).

Note

Additionally, the iframe tag allows for the integration of external content into a web page. However, for security reasons, the use of this tag should be limited.

Important

If neither of the previous HTML tags permits the display of embedded PDF documents, it is advisable to verify the content security policy (CSP) of your server. It is particularly important to note that if the HTTP header X-Frame-Options is set to DENY, the document will not be able to be embedded.
For further information, please refer to:

Using PDF.JS or similar alternative

PDF.js may be a suitable option for those with more experience in web development. PDF.js is a pure HTML5/JavaScript renderer for PDF documents.
This post provides only some basic pointers to seamlessly embed PDFs into your website using PDF.js.

To get started, follow one of these steps:

  • Download the library: go to the PDF.js GitHub repository, download the latest release, and follow the instructions.
  • If you cannot install PDF.js, you can use a CDN installation.

Next by exploring some examples you can learn how to integrate PDF.js in your page.