是否可以在每一页上打印不同的页脚？

Question

我正在将 Access 应用程序转换为 Web，并且需要从中打印报告。这些是邮寄出去的信件，因此信件的底部，即“请退回”部分，将始终位于页面底部，无论信件正文有多大。我使用DIVs 来布置字母并很好地模仿了 Access，但我不知道如何在其页面底部获取每个字母的标题。使用 CSS position: fixed; 作为页脚只会让每个页脚显示在每个页面的底部，我们希望能够一次打印多个字母。

如果我删除fixed，它会在自己的页面上显示每个页脚，它们不会与底部对齐。

我的蛋糕也可以吃吗？不需要跨浏览器，如果绝对必要，我会转向 PDF，但我在 CSS/HTML 中的选择是什么？以某种方式将其全部转换为表格并尝试 tfoot？但这会强制它位于每个页面的底部吗？

编辑：CSS/HTML 示例：

.reportcontainer {
    width: 100%;
    page-break-inside: avoid;
    page-break-after: always;
    position: relative;
}
.reportbody {
    float: left;
    text-align: left;
}
.reportfooter {
    width: 100%;
    float: left;
    bottom: 0;
    position: fixed;
}

<div class="reportcontainer">
    <div class="reportbody">
        yadda yadda yadda
    </div>
    <div class="reportfooter">
        stuff goes here
    </div>
</div>

Answer 1

我建议使用 PDF。如果您需要对打印材料进行这种级别的控制，您将努力让 HTML 跨浏览器工作，而这正是 PDF 的设计目的。

tfoot 无济于事，它只能确保页脚位于表格底部，而不是页面底部。

Answer 2

试试这个。我最近也不得不弄清楚很多 html 打印。您可以确定如何复制 div，无论是后端还是为每个报告使用 jquery 克隆。边框只是为了说明容器。

.reportcontainer {
    width:8.5in;
    height:11in;
    page-break-inside:avoid;
    page-break-after:always;
    border:1px solid red;
}
.reportbody {
    width:100%;
    height:10in;
    border:1px solid yellow;
}
.reportfooter {
    width:100%;
    height:1in;
    border:1px solid blue;
}
</style>

<div class="reportcontainer">
    <div class="reportbody">
        yadda1 yadda1 yadda1
    </div>
    <div class="reportfooter">
        footer 1 goes here
    </div>
</div>

<div class="reportcontainer">
    <div class="reportbody">
        yadda2 yadda2 yadda2
    </div>
    <div class="reportfooter">
        footer 2 goes here
    </div>
</div>

<div class="reportcontainer">
    <div class="reportbody">
        yadda3 yadda3 yadda3
    </div>
    <div class="reportfooter">
        footer 3 goes here
    </div>
</div>