#PdfViewer

PdfViewer 按需加载 PDF，通过 PDFium WebAssembly 渲染页面，并提供导航、搜索、 批注、历史记录和保存能力。

PDF 与其他编辑器不同，不使用受控内容对象。宿主通过明确的输入、输出接口提供并保存 完整 Blob。

#属性

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;
      }}
    />
  );
}

使用 loadSource 接入对象存储、IndexedDB 或本地文件句柄。宿主通过 onSave 管理权限、进度、版本与失败处理。PDFium 和批注控制器内部实现不是公共扩展接口。

#页面导航

桌面端左侧提供可滚动缩略图列表，并与页码输入框、PDF 视口保持同步。窄屏下同一列表 变为可关闭抽屉，入口位于工具栏的页码控件内，不会覆盖文档内容。长文档只渲染有限的 缩略图窗口，页面越多也不会线性增加界面成本。

每个缩略图都是可聚焦按钮。ArrowUp、ArrowDown 前后翻页，Home、End 跳到首尾。目标超出当前虚拟窗口时，挂载完成后仍会同步 aria-current 与 DOM 焦点。 多个翻页请求重叠时，查看器会按顺序处理，并保留最后一次目标页请求；宿主无需协调焦点 或页码状态。