HTML 到 PDF 转换中动态目录分页：解决方法与指南

2024-03-05 22:07:04

HTML 到 PDF 转换中的动态目录分页：解决方法和指南

背景

将 HTML 文件转换为 PDF 文件是一种常见的需求，尤其是当需要离线保存或打印文档时。然而，添加一个具有可点击链接的编号目录可以是一个挑战。本指南将介绍使用 JavaScript 手动编写目录以及使用其他工具的解决方法。

手动编写目录

一种变通方案是手动编写一个目录，其中包含指向 HTML 页面中标题的链接。每个目录项还包括一个 span 元素，用于显示页码。

<h1>目录</h1>
<ol class="toc-list">
  <li><a href="#management-summary">管理摘要</a><span class="pageNumber"></span></li>
  <li><a href="#technical-summary">技术摘要</a><span class="pageNumber"></span></li>
  <li><a href="#introduction">引言</a><span class="pageNumber"></span></li>
  <li><a href="#vulnerabilities">漏洞</a><span class="pageNumber"></span></li>
  <ol>
    <li>
      <a href="#vulnerability-1">跨站脚本</a>
      <span class="pageNumber"></span>
    </li>
    <li>
      <a href="#vulnerability-2">SQL 注入</a>
      <span class="pageNumber"></span>
    </li>
    <li>
      <a href="#vulnerability-3">路径遍历</a>
      <span class="pageNumber"></span>
    </li>
  </ol>
</ol>

动态添加页码

要动态添加页码，可以使用 JavaScript。这涉及获取每个目录项的 a 元素，获取页面中对应标题的页面偏移量，将其转换为页码，并将其添加到目录项中的 span 元素中。

const tocItems = document.querySelectorAll('.toc-list a');
const headers = document.querySelectorAll('h1, h2, h3');

tocItems.forEach((item) => {
  const header = document.querySelector(item.getAttribute('href'));
  const offset = header.getBoundingClientRect().top;
  const pageNum = Math.ceil(offset / document.body.clientHeight) + 1;
  item.nextElementSibling.textContent = pageNum;
});