Question

我正在尝试创建一个报表，该报表具有一个表，该表可能占用多个页面。在表格页脚中，我需要拥有所有表格中的全部内容，即，我需要单个表格页脚仅在报表末尾而不是在每页末尾出现一次。 [如果有人能帮助您获得每页末尾的小计，将不胜感激。]

我编写了以下代码，该代码也已加载here。

输出如下，其中有错误。

HTML正文：

<body>
<h1>My page</h1>
<button onclick="printContent('t')">Print Content</button>

<div id="t">
 <div class="divHeader">Header</div>
 <br><br>

<table>
    <thead>
    <tr>
        <th>First Heading</th>
        <th>Second Heading</th>
        <th>Third Heading</th>
    </tr>
    </thead>
    <tbody>
    !-- so many rows of: --!
    <tr>
        <td>Green</td>
        <td>Yellow</td>
        <td>Orange</td>
    </tr>
    </tbody>
    <tfoot id="table_footer">
            <TR> <TH ALIGN=LEFT COLSPAN=2>Total</TH> <TH>4923</TH> </TR>
     </tfoot>
</table>
<br><br>
<div class="divFooter">Footer</div>
</div>
</body>

用于打印所需元素的javascript：

<script language="javascript">
function printContent(el){
        var restorepage = document.body.innerHTML;
        var printcontent = document.getElementById(el).innerHTML;
        document.body.innerHTML = printcontent;
        window.print();
        document.body.innerHTML = restorepage;
}
</script>

样式：

    <style type="text/css" media="print">
        @page
        {
            size: auto;   /* auto is the current printer page size */
            margin: 20mm;  /* this affects the margin in the printer settings */
            size: A4;
        }

        body
        {
            background-color:#FFFFFF;
            border: solid 1px black ;
       }
       .divFooter {
            position: fixed;
            bottom: 0;
        }
        .divHeader {
            position: fixed;
            top: 0;
        }
        table { page-break-after:auto }
        tr    { page-break-inside:avoid; page-break-after:auto }
        td    { page-break-inside:avoid; page-break-after:auto }
        thead { display:table-header-group }
        tfoot { display:table-footer-group; page-break-after:auto }
    </style>

格式化HTML打印

0 个答案: