同一份 PDF 交给不同的人打开，看到的界面可能完全不同：有的窗口一打开就居中，有的把工具栏和菜单栏顶在最上面，有的默认一次只显示一页，有的一屏并排两页。文档是给别人看的说明书、宣传册或报告时，制作者往往希望这些默认表现可控——打开即居中、界面尽量干净、直接进入双栏视图。这类行为由文档自身的查看器首选项（Viewer Preferences）描述，写在 PDF 的目录字典里，跟着文件一起分发，不需要阅读器做任何配置。

Spire.PDF for JavaScript 基于 WebAssembly 在浏览器端加载、修改与保存 PDF 文档，查看器首选项通过 PdfDocument.ViewerPreferences 读写，文件进出走虚拟文件系统（VFS），无需后端配合。

本文介绍两个核心功能点：

• 设置窗口与界面元素相关的首选项
• 设置页面布局与打开时的显示模式

有关安装和项目配置，请参考 React 项目中集成 Spire.PDF for JavaScript。以下示例默认已安装 Spire.PDF 并完成 WebAssembly 模块初始化。

设置窗口与界面元素相关的首选项

ViewerPreferences 上的几个布尔开关决定阅读器打开文档时的外观，默认都是 false，也就是不干预阅读器自身的界面：

• CenterWindow 让阅读器窗口居中显示
• DisplayTitle 决定标题栏是否使用文档标题（文档没写标题元数据时，阅读器回退显示文件名）
• FitWindow 决定窗口是否缩放到首页大小
• HideMenubar 隐藏菜单栏
• HideToolbar 隐藏工具栏
• HideWindowUI 隐藏滚动条一类界面元素，只留页面内容

function App() {
  const setWindowPreferences = async () => {
    // 获取 Spire.PDF WASM 模块
    const pdfModule = window.wasmModule?.spirepdf;

    // 检查模块是否就绪
    if (!pdfModule) {
      alert('Spire.PDF is not ready yet');
      return;
    }

    // 将待处理的 PDF 文件载入 VFS
    const inputFileName = '财务报表2025.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // 创建 PdfDocument 对象并加载 PDF 文档
    let doc = new pdfModule.PdfDocument();
    doc.LoadFromFile(inputFileName);

    // 让阅读器窗口居中
    doc.ViewerPreferences.CenterWindow = true;
    // 标题栏不使用文档标题（保持显示文件名）
    doc.ViewerPreferences.DisplayTitle = false;
    // 不把窗口缩放到首页大小
    doc.ViewerPreferences.FitWindow = false;
    // 隐藏菜单栏
    doc.ViewerPreferences.HideMenubar = true;
    // 隐藏工具栏
    doc.ViewerPreferences.HideToolbar = true;
    // 隐藏滚动条等界面元素，只留页面内容
    doc.ViewerPreferences.HideWindowUI = true;

    const outputFileName = '界面首选项.pdf';
    doc.SaveToFile(outputFileName);
    doc.Close();

    // 从 VFS 读取生成的文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/pdf' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>设置窗口与界面首选项</h1>
      <button onClick={setWindowPreferences}>
        开始设置
      </button>
    </div>
  );
}

export default App;

窗口居中、工具栏与菜单栏已隐藏的 PDF 文档

设置页面布局与打开时的显示模式

页面怎么排列、打开时先看到什么，同样由 ViewerPreferences 上的枚举属性决定，两者的默认值分别是 SinglePage 与 UseNone：

• PageLayout 控制页面的排列方式，SinglePage 一次只显示一页，TwoColumnLeft 是双栏并排、奇数页在左
• PageMode 控制打开文档时先呈现什么，UseNone 直接显示页面内容，UseThumbs 会在侧边栏展开缩略图面板

function App() {
  const setPageLayout = async () => {
    // 获取 Spire.PDF WASM 模块
    const pdfModule = window.wasmModule?.spirepdf;

    // 检查模块是否就绪
    if (!pdfModule) {
      alert('Spire.PDF is not ready yet');
      return;
    }

    // 将待处理的 PDF 文件载入 VFS
    const inputFileName = '财务报表2025.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // 创建 PdfDocument 对象并加载 PDF 文档
    let doc = new pdfModule.PdfDocument();
    doc.LoadFromFile(inputFileName);

    // 双栏并排显示，奇数页在左
    doc.ViewerPreferences.PageLayout = pdfModule.PdfPageLayout.TwoColumnLeft;
    // 打开文档时展开缩略图面板
    doc.ViewerPreferences.PageMode = pdfModule.PdfPageMode.UseThumbs;

    const outputFileName = '页面布局设置.pdf';
    doc.SaveToFile(outputFileName);
    doc.Close();

    // 从 VFS 读取生成的文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/pdf' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>设置页面布局与显示模式</h1>
      <button onClick={setPageLayout}>
        开始设置
      </button>
    </div>
  );
}

export default App;

打开时双栏并排、左侧展开缩略图面板的 PDF 文档

常见问题

设置了首选项，打开文档却没看到变化

原因：按 PDF 规范，/ViewerPreferences 是给阅读器的偏好提示，不是强制要求。浏览器内置的 PDF 阅读器与一些轻量阅读器只实现其中一小部分，HideToolbar、HideMenubar、PageLayout 这类界面项常被直接忽略；Adobe Acrobat 若开启了“恢复上次查看设置”，也会用它记住的视图状态覆盖文档里的值。

解决：用 Adobe Acrobat Reader 打开验证，并在“首选项 → 文档”里确认“恢复上次查看设置”未勾选。排查时先排除阅读器本身的原因，再回头检查设置是否写进了文件——首选项要 SaveToFile 之后才落盘，保存前调用 Close() 会丢掉改动。

PageLayout 和 PageMode 有什么区别

原因：两个属性名字接近，又都影响文档打开时的样子，容易混。它们管的是两件事：PageLayout 决定页面怎么排列，PageMode 决定打开时先显示哪块面板。

解决：按需要各取一个值即可，两者互不影响：

// 页面排列：一次一页、单向连续、双栏、双页
doc.ViewerPreferences.PageLayout = pdfModule.PdfPageLayout.TwoColumnLeft;

// 打开时先显示的面板：纯页面、缩略图、书签大纲
doc.ViewerPreferences.PageMode = pdfModule.PdfPageMode.UseThumbs;

PdfPageLayout 可选 SinglePage、OneColumn、TwoColumnLeft、TwoColumnRight、TwoPageLeft、TwoPageRight；PdfPageMode 可选 UseNone、UseOutlines、UseThumbs、FullScreen、UseOC、UseAttachments。

隐藏工具栏能阻止用户打印或另存吗

原因：不能。HideToolbar、HideMenubar、HideWindowUI 只作用于阅读器界面的显示，与打印、复制、另存这些操作权限无关；换一个不理会该设置的阅读器打开，或者直接从菜单里操作，照样能打印和另存。

解决：要限制操作得设权限密码——用 PdfPasswordSecurityPolicy 配合 PdfDocumentPrivilege 关闭打印、复制等项，这类限制由文档的加密字典强制，阅读器会执行。查看器首选项管的是“看起来怎么样”，权限设置管的是“允许做什么”。

获取免费许可证

如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。