打印页眉和页脚不断重复html答案

【问题标题】：Print Header and footer keeps repeating html打印页眉和页脚不断重复html
【发布时间】：2021-01-18 17:04:16
【问题描述】：

我遇到了问题标题页眉和页脚在打印时在每一页上不断重复我只想在页面顶部显示标题并在打印页面末尾显示页脚。任何人都可以帮助我，建议或提供解决方案，您可以在下面看到我的小提琴或 html 代码，谢谢！

整个html

<html>
<head>
<title></title>
<style>
@media screen
{
.noPrint{}
.titles{display:none;}
.footer{display:none;}
}
@media print
{
.noPrint{display:none;}
.title{}
.footer{}
}
</style>
</head>
<body>

<button onclick="printDiv();">Print it</button>
  <table class="report-container" name="table" id="table"  >
    <thead class="report-header">
  <th colspan="9"><div class="titles">Title Header <br></div></th>
   <tr>
     <td>ID Number</td>
     <td>Name</td>
     <td>Barangay</td>
     <td>Sex</td>
     <td>Sector</td>
     <td>Amount</td>
     <td>Signature/thumb</td>
     <td>ID &nbsp;&nbsp;</td>
     <td>Date Received</td>
   </tr>
   </thead>
  <tfoot>
   <tr>
    <td colspan=9><div class="footer">Title Footer</div></td>
   </tr>
</tfoot>
<tbody class="report-content">
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  <tr>
     <td class="report-content-cell">
       <div class="main">fas</div>
     </td>
     <td>1</td>   
     <td>2</td> 
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>  
     <td>8</td> 
  </tr>
  </tbody>
  </table>
  </body>

Javascript

    <script ="text/javascript">

    function printDiv() {
     var divToPrint = document.getElementById('table');
     var htmlToPrint = '' +
    '<style type="text/css">' +
        'table td {' +
    'border:1px solid #dddddd;' +
    'padding:8px;' +
    '}' +

    'table  {' +
    'border-collapse: collapse;' +
    'width: 100%;' +
    '}' +
    '</style>';
    htmlToPrint += divToPrint.outerHTML;
    newWin = window.open("");
    newWin.document.write(htmlToPrint);
    newWin.print();
    newWin.close();
   }
   </script>

【问题讨论】：

标签： javascript html css printing

【解决方案1】：

不幸的是，您尝试做的并不是thead 和tfoot 元素规范的一部分。但是您可以使用一些“技巧”来模拟所需的效果。想到一个：

对于表格页脚，您可以将其显示设置为table-row-group，将其从表格中移除，然后将其附加到表格中。

// Make footer visible on last page only
let tbl = document.getElementById('table');
let footer = tbl.getElementsByTagName('tfoot')[0];
footer.style.display = 'table-row-group';
tbl.removeChild(footer);
tbl.appendChild(footer);

对于表头，或者实际上只是标题，我将克隆“标题”节点，应用所需的样式，将其添加到表中，然后删除原始节点。

// Make header visible on first page only
let title = document.querySelector('.titles');
let newTitle = title.cloneNode(true);
newTitle.style.textAlign = "center";
newTitle.style.fontWeight = "bold";
tbl.prepend(newTitle);
title.remove();

这些块可以添加到你的打印函数的顶部，如更新的 Fiddle 所示：https://jsfiddle.net/5azfn7wu/

【讨论】：