PdfViewer

Embeds a PDF document inline using PDFObject to leverage each browser's native PDF rendering. Aurora wraps it with loading, error, and fallback states.

The actual UI (toolbar, zoom, search, page count) comes from the browser — aurora doesn't override it. If you need a fully custom PDF reader experience, this isn't the right component.

From a URL

<PdfViewer url="https://example.com/document.pdf" title="Annual report" />

From a fetch function

For PDFs that need authentication, signed URLs, or any kind of fetch wrapper, pass fetch-function instead of url. The function should return a Promise<Blob>. The component fetches via your callback, creates a blob URL, and embeds it. Cleanup on unmount happens automatically.

<PdfViewer
  :fetch-function="loadAuthedPdf"
  title="Quarterly statement"
/>

async function loadAuthedPdf(): Promise<Blob> {
    const res = await fetch('/api/reports/q3-2026.pdf', {
        headers: { Authorization: `Bearer ${token}` },
    })
    if (!res.ok) throw new Error('Failed to load PDF')
    return await res.blob()
}

url and fetch-function are mutually exclusive — pass exactly one.

Custom fallback

Override the default error UI via the fallback slot.

<PdfViewer url="https://example.com/missing.pdf">
  <template #fallback>
    <PdfViewerFallback
      title="PDF unavailable"
      description="Try downloading the source file instead."
    />
  </template>
</PdfViewer>

States

The viewer manages three states internally:

• Loading — a centered spinner while the URL is validated / blob is fetched
• Error — renders the fallback slot (default: PdfViewerFallback with a generic message)
• Loaded — embeds the PDF via PDFObject; appearance and toolbars come from the browser

PdfViewer — Props

Pass exactly one of url or fetch-function.

Prop	Type	Default	Description
url	string	—	URL of a publicly-accessible PDF.
fetchFunction	() => Promise<Blob>	—	Async loader that returns a Blob. Used for authenticated or otherwise non-trivial fetches.
title	string	—	Accessible title for the embedded viewer.

PdfViewer — Events

Event	Description
load	Emitted when the PDF loads successfully and embeds.
error	Emitted when the PDF fails to load (network error, invalid PDF, browser doesn't support PDF embedding).

PdfViewerFallback — Props

Prop	Type	Default	Description
title	string	required	Bold first line.
description	string	—	Secondary line under the title.

Browser support

PDFObject works by feature-detecting the browser's PDF rendering capability:

• Chromium / Edge / Safari — native PDF viewer renders inline
• Firefox — native PDFjs-based viewer renders inline
• Mobile browsers / no-PDF browsers — error event fires; the fallback slot renders

The component does not bundle a PDF rendering library. If you need consistent rendering across all browsers (including those without native support), use a dedicated viewer like PDF.js directly.