PDF Viewer Demo

This page demonstrates embedding a PDF stored under static/files/ using the PdfViewer component.

Usage

1. Place your PDF in static/files/ (or a subfolder like static/files/software/).
2. Reference it with a leading /files/ path.
3. Include the component in an MDX doc:

import { PdfViewer } from '@site/src/components/PdfViewer';

<PdfViewer file="/files/example.pdf" height={600} title="Example PDF" />

Example (Placeholder)

The embedded frame below will 404 until you add static/files/example.pdf:

Download: example.pdf

Advanced Viewer (Placeholder)

Below is the advanced viewer (pdf.js canvas) with pagination, zoom, rotate, and download controls. Add /files/example.pdf to remove the error placeholder.

1/? Download

Initializing viewer…

Props

• file (string) – Path (must start with /).
• height (number) – Viewer height in pixels (default 800).
• title (string) – Accessibility title (default PDF Document).
• showDownload (boolean) – Show download link below (default true).

Notes

• Uses native browser rendering; no extra bundle cost from pdf.js for the simple viewer.
• Advanced viewer powered by pdfjs-dist directly (no react-pdf peer constraints).
• If bundle size becomes a concern, load pdf.js dynamically inside a React.lazy factory and show a skeleton.
• Large PDFs may benefit from enabling the browser's built-in viewer tools (they appear automatically).

Next Steps

Add real documents (checklists, templates, diagrams) to static/files/ and replace the placeholder.