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

Question

我正在将 Access 应用程序转换为 Web 应用程序，并且需要从中打印报告。这些是邮寄出去的信件，因此信件的底部（即“请返回”部分）将始终位于页面的底部，无论信件的正文有多大。我已经使用 DIV 来布置字母并很好地模仿了 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

试试这个。我最近也必须弄清楚很多 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>

Answer 2

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

tfoot 没有帮助，它只能确保页脚位于表格的底部，而不是页面的底部。