#PdfViewer

PdfViewer loads PDF data on demand, renders pages through PDFium WebAssembly, and exposes navigation, search, annotations, history, and save behavior.

Unlike the other editors, PDF does not use a controlled content object. The host provides and persists complete Blob values through explicit ports.

#Properties

import { PdfViewer } from '@a3s-lab/office/react';

export function PdfPage({ file }: { file: File }) {
  return (
    <PdfViewer
      fileName={file.name}
      sourceKey={`${file.name}:${file.lastModified}`}
      loadSource={() => Promise.resolve(file)}
      onSave={async (pdf) => {
        await uploadPdf(pdf);
        return true;
      }}
    />
  );
}

Use loadSource to connect object storage, IndexedDB, or a local file handle. Use onSave to own authorization, progress, versioning, and failure behavior. PDFium and annotation-controller internals are not public extension points.

#Page navigation

The desktop surface keeps a scrollable page-thumbnail rail synchronized with the page field and PDF viewport. On compact screens the same rail becomes a dismissible modal drawer. Its trigger is part of the toolbar page controls, not an overlay on the rendered document. Long documents render a bounded thumbnail window, so navigation cost does not grow linearly with the page count.

Each thumbnail is a real button. ArrowUp and ArrowDown move one page, Home selects the first page, and End selects the last page. Keyboard navigation updates both aria-current and DOM focus after the destination is mounted, including destinations outside the current virtualized window. The viewer serializes overlapping page changes and preserves the latest requested destination while the PDF viewport settles. The host does not need to coordinate thumbnail focus or page selection.