embedpdf 1.2.9: embed PDFs in Quarto HTML pages and slides that also work on phones

[jmgirard]

Putting a PDF in a Quarto HTML page comes up often in this forum: slides in a course site, a CV, a paper's supplement, a figure saved as PDF. Pandoc's ![](file.pdf) works well on desktop browsers. On phones it does not. Chrome on Android shows a blank box or a download prompt, and users report that older iOS versions show only the first page.

embedpdf is a shortcode extension that handles this:

quarto add jmgirard/embedpdf

{{< pdf slides.pdf width=100% height=600 >}}

What it does:

• On desktop, the PDF opens in the browser's own viewer, as with ![](file.pdf).
• On iPhone, iPad, and browsers with no built-in PDF viewer (such as Chrome on Android), it draws the pages with Mozilla's PDF.js. The viewer has a small toolbar for zoom, the page number, and download.
• PDF.js (about 1.7 MB) ships with the extension, but a browser downloads it only for an embed that uses it. Desktop visitors normally never load it.
• It works in RevealJS slides.
• It works with embed-resources: true. The PDF goes inside the HTML file. It shows in desktop Safari too, which does not show a PDF inlined as a data: address (Embed PDF with embed-resources: true — fails to display in Safari on Mac #11953).
• page=3 opens the PDF at page 3, also in desktop Safari where it can.
• With JavaScript off, each embed becomes a download link. In PDF output, the shortcode includes every page with \includepdf (pdfpages). In other formats (docx, typst, epub, ...), it writes a download link.
• Each embed has a screen-reader name such as "PDF: slides.pdf". Each PDF.js page carries its text for screen readers.

Other options: renderer=auto|native|pdfjs, border, toolbar=false, class, and button="Download PDF". You can set defaults for a document or a project under the embedpdf metadata key.

Limits: the PDF.js viewer has no text search or selection. A PDF from another site needs that site to send an Access-Control-Allow-Origin header before PDF.js can read it. Without it, the embed shows a link that opens the PDF.

Guide and live examples (try them on a phone): https://jmgirard.github.io/embedpdf/example.html

Related threads: #10313, #11953, #7918, #5863, #10177, #13189, and #12001.

Bug reports and requests are welcome at https://github.com/jmgirard/embedpdf/issues.

[mcanouil]

Related and similar extension:

• https://github.com/coatless-quarto/embedio

[jmgirard]

embedio can also embed PDFs but does not handle mobile browsers (which is the main reason for embedpdf to exist)