求助：解决PagedJS生成PDF时目录无法显示对应页码的问题

嘿，我懂你现在的头疼事儿——跟着文档和示例写了目录生成代码，结果PDF里只有章节标题，就是看不到对应的页码对吧？咱们来一步步搞定这个问题！

问题出在你当前的代码只生成了目录的标题结构，但没和PagedJS的分页系统关联起来——页码是在PagedJS完成布局后才确定的，所以得在合适的钩子阶段去获取并填充这些页码。下面是具体的修改方案：

1. 修改目录项生成逻辑，添加页码占位符 #

首先，在createToc函数里，生成目录项的时候要加一个专门用来显示页码的占位元素，方便后续填充：

// 替换原来的tocNewLi.innerHTML部分
tocNewLi.innerHTML = `
  <a href="#${tocElement.id}">${tocElement.innerHTML}</a>
  <span class="toc-page-number" data-ref="${tocElement.id}"></span>
`;

这个data-ref属性会把目录项和对应的标题元素关联起来，后续用来找它的页码。

2. 利用PagedJS的钩子获取并填充页码 #

PagedJS提供了多个生命周期钩子，我们需要用两个关键钩子来完成页码的记录和填充：

• afterRenderedElement：每个元素被渲染到页面后触发，用来给标题标记它所在的页码
• postLayout：所有页面布局完成后触发，用来把页码填充到目录里

修改你的handlers类：

class handlers extends Paged.Handler {
  constructor(chunker, polisher, caller) {
    super(chunker, polisher, caller);
  }

  beforeParsed(content) {
    createToc({
      content: content,
      tocElement: "#my-toc-content",
      titleElements: ["h2", "h3"],
    });
  }

  // 给每个标题元素标记所在页码
  afterRenderedElement(element, node, layout) {
    if (element.classList.contains("title-element")) {
      element.dataset.pageNumber = layout.pageNumber;
    }
  }

  // 布局完成后填充目录页码
  postLayout(pageFragment, page) {
    const tocPageNumbers = document.querySelectorAll(".toc-page-number");
    tocPageNumbers.forEach(span => {
      const targetId = span.getAttribute("data-ref");
      const targetElement = document.getElementById(targetId);
      if (targetElement) {
        span.textContent = targetElement.dataset.pageNumber;
      }
    });
  }
}
Paged.registerHandlers(handlers);

3. 给目录加样式（可选但推荐） #

为了让目录排版更美观，比如页码右对齐、三级标题缩进，可以在style里加这些CSS：

#list-toc-generated {
  list-style: none;
  padding-left: 0;
  margin: 1em 0;
}
.toc-element {
  position: relative;
  margin: 0.3em 0;
}
.toc-page-number {
  position: absolute;
  right: 0;
}
.toc-element-level-3 {
  padding-left: 1.5em; /* 三级标题缩进，区分层级 */
}

4. 调整脚本位置 #

把你的script标签从章节里移到</body>标签之前，确保DOM完全加载后再执行脚本，避免找不到元素的问题。

完成这些修改后，再用命令pagedjs-cli index.html -o index.pdf生成PDF，你就能看到带对应页码的目录啦！

备注：内容来源于stack exchange，提问作者Ahmad Ismail