那些遇到过的问题

使用HTML / CSS / JS在每个页面上打印小计，也许是XSLT？

obe*_*ksz 2 html css printing html-table

我想使用开放标准来打印报告，该报告的每页末尾都必须有小计。

螺纹XSL-FO，CSS3，而不是CSS2的用于创建分页文件如PDF？建议将CSS3与HTML结合使用。

现在，我遇到的问题是使用HTML或CSS或JS确定A4页面的填充位置，以便出现分页符。

有CSS分页符选择器：

page-break-before: always | avoid — always/avoid page breaks before the item
page-break-after: always | avoid — always/avoid page breaks after the item
page-break-inside: always | avoid — always/avoid page breaks in the middle of the item
Run Code Online (Sandbox Code Playgroud)

但是这些对于每个页面上的小计而言并不是真正有用的，因为我不知道页面何时填充，因此我可以在其中放置这样的CSS的标签。

HTML TABLE标签支持某种形式的表头和表尾，听起来很有希望：

可以分别使用THEAD，TFOOT和TBODY元素将表行分组为表头，表脚和一个或多个表主体部分。这种划分使用户代理能够独立于桌子的头和脚来支持桌子主体的滚动。当打印长表时，可以在包含表数据的每一页上重复表的头和脚信息。

<TABLE>
<THEAD>
     <TR> ...header information...
</THEAD>
<TFOOT>
     <TR> ...footer information...
</TFOOT>
<TBODY>
     <TR> ...first row of block one data...
     <TR> ...second row of block one data...
</TBODY>
<TBODY>
     <TR> ...first row of block two data...
     <TR> ...second row of block two data...
     <TR> ...third row of block two data...
</TBODY>
</TABLE>
Run Code Online (Sandbox Code Playgroud)

但这又不是很有用，因为相同的页脚会出现在所有页面上，具有相同的小计，而不是每个页面。否则，我应该创建一个具有不同TFOOT和TBODY的表，这是一个静态结构，根据页面填充的时间...但是我无法获得这种信息，只有行数是我在构建HTML时可以指定的表。我看不到创建它们的方法，因为A4尺寸适合它们。

我不知道，也许XSLT在这里或JavaScript上会有所帮助？是否有针对我不知道的开放标准CSS3，HTML5或其他解决方案？如果没有，那么谁知道解决方法，例如解决此问题的示例？

Doc*_*cto 5

如下面的代码所示，这可以使用普通的旧JavaScript来完成。 

<!DOCTYPE html>
<html>
  <body>
    <table class="data">
      <caption><b>MY TABLE</b></caption>
      <thead>
        <tr>
          <th>Col 1</th><th>Col 2</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>1<td>1<tr><td>0<td>99<tr><td>1<td>1<tr><td>0<td>99<tr><td>1<td>1<tr><td>0<td>99
        <tr><td>2<td>9<tr><td>2<td>88<tr><td>2<td>0<tr><td>2<td>88<tr><td>2<td>0<tr><td>2<td>88
        <tr><td>3<td>1<tr><td>4<td>77<tr><td>3<td>1<tr><td>4<td>77<tr><td>3<td>1<tr><td>4<td>77
        <tr><td>4<td>8<tr><td>6<td>66<tr><td>4<td>1<tr><td>6<td>66<tr><td>4<td>1<tr><td>6<td>66
        <tr><td>5<td>1<tr><td>8<td>55<tr><td>5<td>1<tr><td>8<td>55<tr><td>5<td>1<tr><td>8<td>55
        <tr><td>6<td>7<tr><td>0<td>44<tr><td>6<td>2<tr><td>0<td>44<tr><td>6<td>2<tr><td>0<td>44
        <tr><td>7<td>1<tr><td>2<td>33<tr><td>7<td>1<tr><td>2<td>33<tr><td>7<td>1<tr><td>2<td>33
        <tr><td>8<td>6<tr><td>4<td>22<tr><td>8<td>3<tr><td>4<td>22<tr><td>8<td>3<tr><td>4<td>22
        <tr><td>9<td>1<tr><td>6<td>11<tr><td>9<td>1<tr><td>6<td>11<tr><td>9<td>1<tr><td>6<td>11
        <tr><td>1<td>0<tr><td>0<td>99<tr><td>1<td>4<tr><td>0<td>99<tr><td>1<td>4<tr><td>0<td>99
        <tr><td>2<td>1<tr><td>2<td>88<tr><td>2<td>1<tr><td>2<td>88<tr><td>2<td>1<tr><td>2<td>88
        <tr><td>3<td>1<tr><td>4<td>77<tr><td>3<td>1<tr><td>4<td>77<tr><td>3<td>1<tr><td>4<td>77
        <tr><td>4<td>5<tr><td>6<td>66<tr><td>4<td>5<tr><td>6<td>66<tr><td>4<td>5<tr><td>6<td>66
        <tr><td>5<td>1<tr><td>8<td>55<tr><td>5<td>1<tr><td>8<td>55<tr><td>5<td>1<tr><td>8<td>55
        <tr><td>6<td>4<tr><td>0<td>44<tr><td>6<td>6<tr><td>0<td>44<tr><td>6<td>6<tr><td>0<td>44
        <tr><td>7<td>1<tr><td>2<td>33<tr><td>7<td>1<tr><td>2<td>33<tr><td>7<td>1<tr><td>2<td>33
        <tr><td>8<td>3<tr><td>4<td>22<tr><td>8<td>7<tr><td>4<td>22<tr><td>8<td>7<tr><td>4<td>22
        <tr><td>9<td>1<tr><td>6<td>11<tr><td>9<td>1<tr><td>6<td>11<tr><td>9<td>1<tr><td>6<td>11
        <tr><td>1<td>2<tr><td>0<td>99<tr><td>1<td>8<tr><td>0<td>99<tr><td>1<td>8<tr><td>0<td>99
        <tr><td>2<td>1<tr><td>2<td>88<tr><td>2<td>1<tr><td>2<td>88<tr><td>2<td>1<tr><td>2<td>88
        <tr><td>3<td>0<tr><td>4<td>77<tr><td>3<td>9<tr><td>4<td>77<tr><td>3<td>9<tr><td>4<td>77
        <tr><td>4<td>1<tr><td>6<td>66<tr><td>4<td>1<tr><td>6<td>66<tr><td>4<td>1<tr><td>6<td>66
        <tr><td>5<td>1<tr><td>8<td>55<tr><td>5<td>0<tr><td>8<td>55<tr><td>5<td>0<tr><td>8<td>55
        <tr><td>6<td>1<tr><td>0<td>44<tr><td>6<td>1<tr><td>0<td>44<tr><td>6<td>1<tr><td>0<td>44
        <tr><td>7<td>0<tr><td>2<td>33<tr><td>7<td>1<tr><td>2<td>33<tr><td>7<td>1<tr><td>2<td>33
        <tr><td>8<td>1<tr><td>4<td>22<tr><td>8<td>1<tr><td>4<td>22<tr><td>8<td>1<tr><td>4<td>22
        <tr><td>9<td>0<tr><td>6<td>11<tr><td>9<td>2<tr><td>6<td>11<tr><td>9<td>2<tr><td>6<td>11
        <tr><!--Use this row for on-screen totals if needed; otherwise, leave it empty.-->
      </tbody>
    </table>
  </body>
</html>

<style>
  @media screen {
    .print {
      display: none; /*Prevents print version of table from showing on screen*/
    }
  }
  @media print {
    .data {
      display: none; /*Prevents screen version of table from showing in print*/
    }
    .print {
      display: block;
    }
    .print > .data {
      display: inline-table; /*Prevents page breaks better than page-break-inside: avoid;*/
      vertical-align: top;
    }
    /*The following rule makes rows opaque in IE even if background colors are disabled.*/
    .print.fixIE > .data > thead > tr > th:after,
    .print.fixIE > .data > tbody > tr:first-child > td:after {
      display: block;
      border-bottom: 18pt solid white; /*Border-width = line-height*/
      margin-top: -18pt; /*Negative line-height*/
      margin-right: -.5em; /*Negative td padding-right*/
      margin-left: -.5em; /*Negative td padding-left*/
      content: "";
    }
    .overlap {
      margin-bottom: -20pt; /*Negative row height (including borders)*/
    }
  }
  .data {
    table-layout: fixed; /*Columns must have fixed widths! Set with <col>s, if needed.*/
    width: 100%;
    border-spacing: 0;
    white-space: nowrap;
    font-size: 12pt;
    line-height: 18pt; /*If you change this, other CSS values must also be changed!*/
    border-right: 1pt solid black;
  }
  .data > thead > tr > th {
    border-top: 1pt solid black;
    border-left: 1pt solid black;
    background: white;
    padding: 0 .5em 0 .5em;
  }
  .data > tbody > tr > td {
    border-top: 1pt solid black; /*If you change this, .overlap must also be changed!*/
    border-left: 1pt solid black;
    background: white;
    padding: 0 .5em 0 .5em; /*If you change this, other CSS values must also be changed!*/
  }
  .data > tbody > tr:last-child > td {
    border-bottom: 1pt solid black; /*If you change this, .overlap must also be changed!*/
  }
  .data > tbody {
    text-align: right;
  }
</style>

<script>
  //This function takes two arguments:
  //1) a reference to a table element
  //2) an array of column indexes indicating which columns have numbers to be totalled.
  function printSubtotals(table, columns) {
    var
      tbody = table.tBodies[0],
      row = tbody.rows[0];
    if(!row)
      return;
    var cellCount = row.cells.length;
    if(!cellCount)
      return;
    var
      subtotals = [],
      rows = table.rows,
      thead = table.tHead,
      caption = table.querySelector('caption'),
      colgroup = table.querySelector('colgroup'),
      emptyTable = table.cloneNode(false),
      emptyRow = row.cloneNode(true),
      printDiv = document.createElement('div'),
      overlap = document.createElement('div'),
      subtotalCount = columns.length,
      rowCount = rows.length - 1,
      cells, subtotalCells, i, r;
    if(colgroup && colgroup.parentNode === table)
      emptyTable.appendChild(colgroup.cloneNode(true));
    emptyTable.appendChild(tbody.cloneNode(false));
    printDiv.className = /MSIE /.test(navigator.userAgent) ? 'print fixIE' : 'print';
    overlap.className = 'overlap';
    for(i = subtotalCount; i--; subtotals.push(0));
    for(i = cellCount; i--; emptyRow.cells[i].innerHTML = '');
    for(r = row.rowIndex; r < rowCount; r++) {
      printDiv.appendChild(overlap.cloneNode(true));
      tbody = printDiv.appendChild(emptyTable.cloneNode(true)).tBodies[0];
      cells = tbody.appendChild(rows[r].cloneNode(true)).cells;
      subtotalCells = tbody.appendChild(emptyRow.cloneNode(true)).cells;
      for(i = subtotalCount; i--;) {
        subtotals[i] += parseFloat(cells[columns[i]].innerHTML);
        subtotalCells[columns[i]].innerHTML = '<b>Total: ' + subtotals[i] + '</b>';
      }
    }
    printDiv.removeChild(printDiv.children[0]);
    tbody = printDiv.children[0].tBodies[0];
    if(caption && caption.parentNode === table)
      tbody.parentNode.insertBefore(caption.cloneNode(true), tbody);
    if(thead)
      tbody.parentNode.insertBefore(thead.cloneNode(true), tbody);
    table.parentNode.insertBefore(printDiv, table);
  }

  printSubtotals(document.querySelector('.data'), [0,1]);
</script>
Run Code Online (Sandbox Code Playgroud)

Javascript函数的作用是创建表的仅打印版本，其中每行都附有一个隐藏的小计行。小计行由下一行覆盖，因此只有当下一行碰到下一页或它是表中的最后一行时，该行才可见。无论纸张大小如何，这几乎都可以在任何浏览器中使用。它看起来效率低下，但是由于打印表不会在页面加载时呈现，因此可以感觉到的性能影响可以忽略不计。不过，我不建议将此技术用于具有数千行的表。

请注意，以上代码仅是概念证明，因此并不是特别可靠。我知道会破坏它的一些事情是：

  • 数据列中的空单元格
  • 数据列中的非数字值
  • 体细胞中的多行内容
  • 肢体行中的细胞数变化（例如，有些具有colspans，而另一些则没有）
  • 让单元格内容确定列宽
  • 更改行高或边框宽度，而不更改其他相关的CSS值

通过对JavaScript和CSS进行正确的修改，其中某些功能是可行的。

归档时间：

查看次数：

1951 次

最近记录：

8 年，1 月 前
使用XSL-FO,CSS3而不是CSS2来创建像PDF这样的分页文档？ 31
更多相关链接
相关归档
带有HTML的无穷大符号 177
如何在重构文本文件中嵌入HTML？ 56
是否可以在SVG元素中附加div？ 39
如何在另一个div的右上角创建三角形形状,看起来除以边框 38
计算textarea字符 30
如何在javascript中使用id设置字段值？ 22
CSS放在名称的圆圈第一个字母中 20
改变分页颜色Bootstrap 18
10秒后淡出消息,使用jQuery清除输入元素 17
带有XPath的Selenium IDE,用于根据其他列识别表中的单元格 1
难疑归档
如何检查文件是否存在而没有例外？ 5290
如何将新的本地分支推送到远程Git存储库并跟踪它？ 4154
如何使用Curl从终端/命令行发布JSON数据到测试Spring REST？ 2606
什么是sleep()的JavaScript版本？ 2115
方法和函数之间有什么区别？ 1665
如何确定Python变量的类型？ 1437
我应该在哪里将<script>标记放在HTML标记中？ 1392
什么是按位移位(位移)运算符以及它们如何工作？ 1340
获取插入行的标识的最佳方法是什么？ 1056
返回IEnumerable <T>与IQueryable <T> 1051