动态 运行 header 和 flying-saucer

Question

我一直在使用 flying-saucer 作为我的 PDF 生成器服务。

我正确地使用 css @Page 规则在每个页面上添加 运行 header 和页脚

@page {
    size: A4 landscape;
    margin: 10%;
    @top-left { content: element(header); }
    @bottom-left { content: element(footer); }
}

header {
    position: running(header);
}

footer{
    position: running(footer);
}

---

问题

我的 HTML 和生成的 PDF 包含以下部分（仅作为示例）

1. 事业Objective
2. 总结
3. 资质
4. 工作经历
5. 项目经验

其中：

• 每个部分都从一个新页面开始。
• 同一页上没有两个部分。
• 根据内容每节may/may不占多页

我的要求是 header 在每个页面上显示该页面包含的部分名称。

例如如果项目经验占据两页，那么两页 headers 都应该包含单词 Project Experience

任何人都可以指出我可能的解决方案吗？

Answer 1

我终于破解了它，它比我预期的要简单得多。

---

Answer is to create multiple tags (one per section) instead of having one common header for the entire report. Mark postition each header as running and that's it. Flying-saucer will do its job

。

例如

我的CSS还是一样（有问题）

@page {
    size: A4 landscape;
    margin: 10%;
    @top-left { content: element(header); }
}

header {
    position: running(header);
}

我刚刚重构了我的 HTML

<div class="page">
    <header>Section 1 / My Fancy Report</header>
    <h2>Section 1</h2>
    <!-- Section 1 content --> 
</div>
<div class="page">
    <header>Section 2 / My Fancy Report</header>
    <h2>Section 2</h2>
    <!-- Section 2 content --> 
</div>

如果此处的任何部分溢出到下一页 flying-saucer 正确地重复下一页的部分 header。

希望对别人有帮助。