Question

我正在将Access应用程序转换为Web，并且需要从中打印报告。这些是寄出的字母，因此字母的底部，即“请返回”部分，将始终位于页面的底部，无论字母的大小有多大。我已经使用DIV来布置字母并模仿Access很好，但我不知道如何将每个字母的标题放在页面底部。使用页脚的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>

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

2 个答案: