PDF 文档中的书签（Bookmark）是导航文档内容的重要工具，尤其对于长篇文档，书签可以帮助读者快速定位到目标章节。借助 Spire.PDF for JavaScript 的书签管理能力，可以在 React 应用中直接为 PDF 添加多级书签、修改已有书签的标题与样式，或删除不需要的书签，所有操作均在浏览器端通过 WebAssembly 完成，无需依赖后端服务。

Spire.PDF for JavaScript 基于 WebAssembly 在浏览器端直接处理 PDF 文档，通过虚拟文件系统（VFS）管理输入输出文件。

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

• 添加 PDF 书签
• 编辑 PDF 书签
• 删除 PDF 书签

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

添加 PDF 书签

使用 Spire.PDF for JavaScript 可以为已有 PDF 文档批量添加多级书签。通过遍历 PdfDocument.Pages 集合，为每一页创建父级书签和子书签，使用 PdfDestination 指定跳转页面和位置，再通过 PdfBookmarkCollection.Add 添加子书签形成层级结构。

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

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

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

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

    // 遍历 PDF 中的每一页，为每页添加父书签和子书签
    for (let i = 0; i < doc.Pages.Count; i++) {
      let page = doc.Pages.get_Item(i);

      // 设置父书签标题和目标位置
      let bookmarkTitle = "书签-" + (i + 1);
      let bookmarkDest = new pdfModule.PdfDestination({ page: page, location: new pdfModule.PointF(0, 0) });

      // 创建并配置父书签
      let bookmark = doc.Bookmarks.Add(bookmarkTitle);
      bookmark.Color = new pdfModule.PdfRGBColor({ color: pdfModule.Color.get_SaddleBrown() });
      bookmark.DisplayStyle = pdfModule.PdfTextStyle.Bold;
      bookmark.Action = new pdfModule.PdfGoToAction({ destination: bookmarkDest });

      // 设置子书签标题和目标位置
      let childBookmarkTitle = "子书签-" + (i + 1);
      let childBookmarkDest = new pdfModule.PdfDestination({ page: page, location: new pdfModule.PointF(0, 100) });

      // 通过父书签的 PdfBookmarkCollection.Add 创建子书签
      let childBookmark = bookmark.Add(childBookmarkTitle);
      childBookmark.Color = new pdfModule.PdfRGBColor({ color: pdfModule.Color.get_Coral() });
      childBookmark.DisplayStyle = pdfModule.PdfTextStyle.Italic;
      childBookmark.Action = new pdfModule.PdfGoToAction({ destination: childBookmarkDest });
    }

    // 保存文档并触发下载
    const outputFileName = "添加书签.pdf";
    doc.SaveToFile(outputFileName);
    doc.Close();

    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>添加 PDF 书签</h1>
      <button onClick={addPdfBookmarks}>
        开始添加
      </button>
    </div>
  );
}

export default App;

遍历 PDF 页面批量添加多级书签后的文档

编辑 PDF 书签

对于已存在的 PDF 文档，可以加载后编辑其中的书签。通过 PdfDocument.Bookmarks.get_Item 获取指定索引的书签节点，修改其 Title、Color 和 DisplayStyle 属性。书签支持层级结构，可以通过递归方式遍历并编辑所有子书签节点。

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

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

    // 将待处理的 PDF 文件载入 VFS
    const inputFileName = '添加书签.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

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

    // 递归编辑子书签的函数
    function editChildBookmarks(parentBookmark) {
      for (let i = 0; i < parentBookmark.Count; i++) {
        let childBookmark = parentBookmark.get_Item(i);
        childBookmark.Color = new pdfModule.PdfRGBColor({ color: pdfModule.Color.get_Blue() });
        childBookmark.DisplayStyle = pdfModule.PdfTextStyle.Regular;
        editChildBookmarks(childBookmark);
      }
    }

    // 获取第一个书签并修改其属性
    let bookmark = doc.Bookmarks.get_Item(0);
    bookmark.Title = "修改后的书签";
    bookmark.Color = new pdfModule.PdfRGBColor({ color: pdfModule.Color.get_Black() });
    bookmark.DisplayStyle = pdfModule.PdfTextStyle.Bold;

    // 递归编辑所有子书签
    editChildBookmarks(bookmark);

    // 保存文档并触发下载
    const outputFileName = "编辑书签.pdf";
    doc.SaveToFile(outputFileName);
    doc.Close();

    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>编辑 PDF 书签</h1>
      <button onClick={editPdfBookmarks}>
        开始编辑
      </button>
    </div>
  );
}

export default App;

编辑 PDF 书签后的文档效果

删除 PDF 书签

从 PDF 文档中删除不需要的书签，可以通过 PdfDocument.Bookmarks.RemoveAt 方法按索引移除指定书签。如果需要删除所有书签，可以遍历集合逐个删除，或使用 RemoveAt(0) 循环删除直到集合为空。

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

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

    // 将待处理的 PDF 文件载入 VFS
    const inputFileName = '添加书签.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

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

    // 删除第一个书签
    doc.Bookmarks.RemoveAt(0);

    // 保存文档并触发下载
    const outputFileName = "删除书签.pdf";
    doc.SaveToFile(outputFileName);
    doc.Close();

    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>删除 PDF 书签</h1>
      <button onClick={deletePdfBookmarks}>
        开始删除
      </button>
    </div>
  );
}

export default App;

删除指定 PDF 书签后的文档

常见问题

如何添加多级嵌套书签

原因：PDF 书签支持层级结构，可以创建父书签和子书签，方便文档的目录导航。

解决：通过父书签的 Add 方法可以添加子书签，形成嵌套结构。以下代码演示了如何创建两级书签：

// 创建父级书签
let parentBookmark = doc.Bookmarks.Add("第一章");
parentBookmark.DisplayStyle = pdfModule.PdfTextStyle.Bold;

// 通过父书签的 Add 方法添加子书签
let childBookmark = parentBookmark.Add("1.1 小节");
childBookmark.DisplayStyle = pdfModule.PdfTextStyle.Regular;

编辑书签时可以修改哪些属性

原因：Spire.PDF for JavaScript 提供了丰富的书签属性设置，可以自定义书签的外观。

解决：可以修改的属性包括：

• Title：书签标题文本
• Color：书签颜色，使用 PdfRGBColor 设置
• DisplayStyle：显示样式，可选 Bold（粗体）、Italic（斜体）、Underline（下划线）、Regular（常规）
• Action：书签跳转动作，使用 PdfGoToAction 设置目标

let bookmark = doc.Bookmarks.get_Item(0);
bookmark.Title = "新标题";
bookmark.Color = new pdfModule.PdfRGBColor({ color: pdfModule.Color.get_Blue() });
bookmark.DisplayStyle = pdfModule.PdfTextStyle.Bold | pdfModule.PdfTextStyle.Italic;

如何删除 PDF 中的所有书签

原因：有时需要清空文档中所有书签，例如重新生成或去除敏感导航信息。

解决：可以通过循环调用 RemoveAt(0) 逐个删除，因为每次删除索引 0 处的书签后，后续书签会自动前移：

while (doc.Bookmarks.Count > 0) {
  doc.Bookmarks.RemoveAt(0);
}

获取免费许可证

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