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

打印时，标题页眉和页脚在每一页上都重复，我遇到了问题。我只想在页面顶部显示标题，在打印页面末尾显示页脚。有人能帮助我，建议或提供解决方案吗？你可以在下面看到我的fiddle或html代码，谢谢！

Fiddle

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

不幸的是，您想要做的并不是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/

相关内容

最新更新

热门标签：