[自动化简报]简报PDF的制作第一期:HTML模板设计

摘要

好，前三期我们把数据采集、清洗、正文抓取、付费识别全跑通了。现在系统手里有一批高质量的文章——有标题、有来源、有正文、有AI生成的摘要。

接下来要做的事情就是：把这些数据变成一份能看的简报。你可能会想：直接拼一个Markdown文件不就行了吗？为什么非要做HTML？

我们一开始也是这么想的，后来发现不行。

为什么我们选择HTML

最直接的原因是：PDF生成工具普遍接受HTML输入。

无论你用哪种方式把HTML转成PDF——浏览器打印、Gotenberg、还是各种PDF生成API——它们都认HTML。你给一份结构清晰、样式完整的HTML，它就能给你一份规整的PDF。

Markdown虽然写起来快，但转PDF的时候样式控制能力太弱。页眉页脚、分页控制、字体排版这些东西，Markdown做不了，HTML + CSS全都能做。

所以我们选择了一条更可控的路径：先用HTML把简报的样子定下来，再转成PDF。

这就像装修房子——HTML是毛坯，CSS是装修方案，PDF是最终的实景照片。毛坯搭好了，后面怎么装都行。

整个模板长什么样？

我们的HTML模板主要分三个区域：

第一部分：页眉页脚区

每一页顶部显示机构名称、期号和日期。这个区域不占用正文空间，是在打印时由CSS的@page规则自动生成的。

横线标注出来的内容，就是可根据具体需求更改的部分。

页眉效果预览：

每一页底部显示机构名称、页码和年份。这个区域同样不占用正文空间，content区域内容同样可根据个人需求修改。

页脚效果预览：

第二部分：文章列表区

这是模板的主体。每篇文章包含三个元素：

标题（中文翻译）
来源和日期（元信息行）
摘要正文（AI生成的内容）

结构长这样：

简报PDF正文完整内容：包括完整页眉、页脚以及文章标题、来源、日期与正文

第三部分：声明页

数据怎么塞进模板里？

这是最关键的一步：前面所有流程产出的数据，怎么填进HTML模板？

Build HTML1节点做的事情其实就是——接收前面传过来的文章数据，然后拼出一整段HTML字符串。

核心逻辑是遍历文章数组，每篇文章生成一段对应的HTML结构：

几个关键处理：

- 转义处理：文章标题和摘要里可能包含<、>、&这些字符，直接拼到HTML里会破坏结构。所以我们用escapeHtml()函数统一转义。

- 日期格式化：不同来源的日期格式不一样，统一转成YYYY-MM-DD的展示格式。

样式是怎么控制的？

HTML有了结构，还差样式。

我们在HTML的标签里定义了所有样式——字体、间距、颜色、边框。这些样式在浏览器里预览时生效，转成PDF时也会被保留。

几个关键设计：

- 字体：优先使用“Microsoft YaHei”（微软雅黑），中英文混排时显示效果最好

字体效果如下：

- 文章块：左侧加一条4px的深色竖线，视觉上区分每篇文章

- 分页控制：每篇文章设置page-break-inside: avoid，避免一篇文章被切成两页

文章分块与分页控制效果如下：

声明页为什么要单独做？

声明页的内容是固定的：

- 材料来源说明（基于公开信息整理）

- 使用限制（仅供内部学习参考，不作为决策依据）

这块内容不需要从数据里读取，直接在模板里写死就行。我们在HTML最后用page-break-before: always强制分页，保证声明页永远在最后一页。

HTML模板这一层，是整个简报生成流程的“骨架”

骨架搭好了，后面的事情就顺了：

- 数据往里填

- 样式往上套

- 转成PDF就能直接用了

下一期，我们会讲一个更具体的问题——有了HTML，怎么把它变成一份规整的PDF？会涉及到封面、目录以及封面PDF和正文PDF合并。

等你看到最终那份带页码、带页眉、排版干净的完整简报PDF时，会觉得前面做的所有事情都值了。