Question

我一直在使用飞碟进行PDF生成器服务。

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

@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包含以下部分（仅作为示例）

职业目标
摘要
认证
就业历史
项目经验

其中：

每个部分都从新页面开始。
同一页上没有两个部分。
根据内容，每个部分可能/可能不会占用多个页面

我的要求是在每个页面上都有标题，显示页面包含的部分名称。

E.g。如果项目经验占用两页，则两个页眉都应包含单词Project Experience

有人能指出我可能的解决方案吗？

Answer 1

最后，我能够将其破解，而且比我预期的要简单得多。

答案是创建多个标签（每个部分一个）为整个报告设置一个公共标题。标记 postition 每个标题为正在运行并且就是这样。飞碟将发挥作用

。

例如

我的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>

如果此处的任何部分溢出到下一页，飞碟正确地重复下一页的截面标题。

希望它能帮助别人。

动态运行头与飞碟

1 个答案: