如何将PDF内容转为HTML存入数据库并保留目录导航功能？

一、优化存储结构（解决维护不便问题） #

放弃单独存目录JSON和页面的方案，采用主文档表+嵌套目录子表的关联结构，确保目录与内容联动：

• 主表（documents）：存储文档ID、转换后的完整HTML内容、文档标题、版本号等基础信息
• 子表（document_outlines）：存储嵌套目录节点，结构如下：
  • id：节点唯一ID
  • doc_id：关联主表文档ID（外键约束）
  • parent_id：父节点ID（为NULL则是一级目录，实现嵌套）
  • title：目录项标题
  • anchor_id：对应HTML内容中的锚点ID（比如#section-2-1）
  • sort_order：同层级节点的排序序号

这种结构的优势：更新目录时直接操作子表，通过doc_id关联到对应HTML，无需单独维护JSON；修改HTML内容时，同步更新锚点ID即可，不会出现目录与内容脱节的情况。

二、PDF转HTML带嵌套目录的落地工具 #

不用手动拆分目录和内容，直接用工具生成带锚点的HTML+嵌套目录：

• pdf2htmlEX：开源工具，直接将PDF转换为保留原格式的HTML，同时自动把PDF的大纲（目录）转换成嵌套的<ul>/<li>结构，给每个章节内容添加对应锚点。转换命令示例：

  pdf2htmlEX --outline-depth 3 input.pdf output.html
  

  其中--outline-depth控制目录嵌套层级，转出来的HTML直接可用，目录和内容天然关联。
• PyPDF2 + WeasyPrint：如果需要自定义目录样式，先用PyPDF2提取PDF大纲：

  from PyPDF2 import PdfReader
  reader = PdfReader("input.pdf")
  outlines = reader.outline  # 直接获取嵌套结构的大纲数据
  

  再用WeasyPrint将PDF转成HTML，最后把提取的大纲插入到HTML的导航区，同时给对应章节手动添加锚点。

三、前端嵌套目录导航实现 #

两种场景的实现方式：

1. HTML自带目录结构：直接用JS给目录添加折叠/展开功能，点击跳转到锚点：

   // 给目录项绑定点击事件
   document.querySelectorAll('.outline-item').forEach(item => {
     item.addEventListener('click', (e) => {
       e.preventDefault();
       const anchor = item.getAttribute('href');
       document.querySelector(anchor).scrollIntoView({ behavior: 'smooth' });
     });
   });
   // 实现折叠/展开
   document.querySelectorAll('.outline-parent').forEach(parent => {
     parent.addEventListener('click', () => {
       parent.nextElementSibling.classList.toggle('hidden');
     });
   });
   

2. 从数据库拉取目录元数据：请求接口获取嵌套目录的JSON数据，用递归方式渲染导航菜单（以原生JS为例）：

   function renderOutline(outlines, parentElement) {
     const ul = document.createElement('ul');
     outlines.forEach(item => {
       const li = document.createElement('li');
       li.innerHTML = `<a href="#${item.anchor_id}">${item.title}</a>`;
       if (item.children) {
         renderOutline(item.children, li);
       }
       ul.appendChild(li);
     });
     parentElement.appendChild(ul);
   }
   // 假设从接口获取的目录数据是nestedOutlines
   renderOutline(nestedOutlines, document.getElementById('nav-container'));
   

四、维护更新策略 #

• 文档更新：重新转换PDF为HTML后，替换主表中的HTML内容，同时对比新旧大纲，更新子表的目录节点（新增/删除/修改），确保版本号同步。
• 批量维护：后台提供文档批量更新工具，支持一键重新转换目录与内容，避免手动操作。
• 锚点校验：添加定时脚本，检查目录节点的anchor_id是否在对应HTML中存在，自动修复无效锚点。

内容的提问来源于stack exchange，提问作者wokoro douye samuel