pdf mdbook extention

PDF mdBook Extension

mdBook “PDF viewing” extensions: the options that actually work. See mdBook: Configuring Renderers

Short Answer

Use PDF.js inside mdBook via additional-js and an <iframe> pointing at the packaged web/viewer.html?file=…. It is cross-browser and avoids the many inline-PDF quirks on mobile Safari. Keep a plain <object> fallback.

References:

• Mozilla PDF.js — Getting Started
• PDFObject browser notes

Three Viable Patterns

1. PDF.js viewer (recommended) — ship the prebuilt viewer with your book and embed it; works on iOS and Android, gives zoom, search, and consistent UX. See Mozilla PDF.js — Getting Started

2. Raw HTML <object> / <embed> — simplest, but mobile Safari often downloads or shows only the first page; acceptable only if your audience is desktop-first. See MDN <object> and PDFObject browser notes

3. Hosted viewers — Adobe PDF Embed or lightweight OSS viewers; drop in one script and a container, then feed your PDF URL. Great analytics or minimal code, but adds a third-party dependency. See Adobe PDF Embed API and embedpdf/embed-pdf-viewer

References:

• mdBook: Configuring Renderers
• MDN embedding overview

Minimal PDF.js-in-mdBook Setup

• Put the prebuilt PDF.js bundle in your book’s theme or static assets, for example: theme/pdfjs/ containing web/ and build/. See Mozilla PDF.js — Getting Started
• In book.toml, load a tiny helper with additional-js (or skip this and set the iframe src inline). See mdBook: Configuring Renderers

[output.html]
additional-js = ["pdf-link.js"]

Example Usage

src/some_chapter.md can include raw HTML:

<!-- mdBook allows raw HTML passthrough -->
<iframe
  id="pdf-viewer"
  src="/pdfjs/web/viewer.html?file=/assets/papers/mydoc.pdf#pagemode=none&zoom=page-width"
  width="100%"
  height="900"
  style="border:0"
  title="PDF">
</iframe>
<noscript>
  <object data="/assets/papers/mydoc.pdf" type="application/pdf" width="100%" height="900">
    <p>View the PDF <a href="/assets/papers/mydoc.pdf">here</a>.</p>
  </object>
</noscript>

This works because mdBook passes raw HTML through and serves everything under the same origin.

References:

• MDN embedding overview
• mdBook: Configuring Renderers

Full Repo Example

See a working mdBook that wires PDF.js via an <iframe> and small utility script. It demonstrates how to place the viewer and set the file= parameter per page.

• fortierq/mdbook-pdf

Why not only <object> or <embed>?

Mobile Safari has long-standing limitations for inline PDFs which lead to download prompts, first-page-only rendering, or broken scroll. PDF.js renders via Canvas and sidesteps those issues.

References:

• PDFObject browser notes
• MDN <embed>

CORS and File-Serving Notes

• Serve PDFs from the same origin as the viewer or enable CORS so viewer.html?file=/path.pdf can fetch them
• The worker is not enabled for file:// URLs; use mdbook serve or any HTTP server when testing locally

See Mozilla PDF.js — Getting Started

If You Prefer a Hosted Viewer

Add one script and a div, then initialize with your PDF URL. This is fast to wire, offers features like analytics (Adobe), but adds an external dependency and potential CSP work.

References:

• Adobe PDF Embed API
• embedpdf/embed-pdf-viewer

Recommendation

Ship PDF.js inside your mdBook and embed the viewer per page. You get consistent mobile behavior, search, and zoom without depending on third parties. Keep an <object> fallback link to the raw PDF.

References:

• Mozilla PDF.js — Getting Started
• PDFObject browser notes