个人中心
gpt4 book ai didi

html - 使用 HTML/CSS/JS 或 XSLT 在每个页面上打印小计？

转载 作者：太空宇宙 更新时间：2023-11-04 15:06:12 25 4
gpt4 key购买 nike

我想使用开放标准打印报告，此报告需要在每页末尾有小计。

线程 Use of XSL-FO, CSS3 instead of CSS2 to create Paginated documents like 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

但这些对于每个页面上的小计目的并不是很有用，因为我不知道页面何时会填满，以便我可以在其中放置一个应用了此类 CSS 的标签。

HTML TABLE 标签支持某种听起来很有前途的表格页眉和页脚:

Table rows may be grouped into a table head, table foot, and one or more table body sections, using the THEAD, TFOOT and TBODY elements, respectively. This division enables user agents to support scrolling of table bodies independently of the table head and foot. When long tables are printed, the table head and foot information may be repeated on each page that contains table data.

<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>

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

我不知道，或许 XSLT 或 javascript 会有所帮助？是否有我不知道的针对此问题的开放标准 CSS3、HTML5 或其他解决方案？如果否，有人知道解决方法和解决此问题的示例吗？

最佳答案

这可以使用普通的旧 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>

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

请注意，上面的代码只是一个概念验证，因此并不是特别可靠。我知道有几件事会破坏它:

  • 数据列中的空单元格
  • 数据列中的非数字值
  • tbody 单元格中的多行内容
  • tbody 行中不同的细胞计数(例如，有些有 colspans，有些没有)
  • 让单元格内容决定列宽
  • 在不改变其他相关 CSS 值的情况下改变 line-height 或 border-width

其中一些事情可以通过对 JavaScript 和 CSS 进行适当的修改来实现。

关于html - 使用 HTML/CSS/JS 或 XSLT 在每个页面上打印小计？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26989639/

25 4 0
文章推荐： html - 如何让 div 停留在那里直到再次单击链接？
文章推荐： c++ - 为什么 lpstrFile 返回内存中的地址而不是 OPENFILENAMEW 结构中的 char 数组？
文章推荐： jquery - 较大的脚本文件失败但较小的似乎没问题
文章推荐： c++ - 为什么 c++ 对看起来相同的计算给出不同的答案？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com