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

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

完整html

@媒体屏幕
{
.noPrint{}
.titles{显示：无；}
.footer{display:none；}
}
@媒体印刷品
{
.noPrint{display:none；}
.title{}
.footer{}
}
打印出来
标题标题

身份证号码
名称
巴郎涯
性
部门
数量
签名/拇指
身份证件
收到日期
标题页脚
fas
1.
2.
3.
4.
5.
6.
7.
8.
fas
1.
2.
3.
4.
5.
6.
7.
8.
fas
1.
2.
3.
4.
5.
6.
7.
8.
fas
1.
2.
3.
4.
5.
6.
7.
8.
fas
1.
2.
3.
4.
5.
6.
7.
8.
fas
1.
2.
3.
4.
5.
6.
7.
8.
fas
1.
2.
3.
4.
5.
6.
7.
8.
fas
1.
2.
3.
4.
5.
6.
7.
8.
fas
1.
2.
3.
4.
5.
6.
7.
8.
fas
1.
2.
3.
4.
5.
6.
7.
8.
fas
1.
2.
3.
4.
5.
6.
7.
8.
fas
1.
2.
3.
4.
5.
6.
7.
8.
fas
1.
2.
3.
4.
5.
6.
7.
8.
fas
1.
2.
3.
4.
5.
6.
7.
8.
fas
1.
2.
3.
4.
5.
6.
7.
8.
fas
1.
2.
3.
4.
5.
6.
7.
8.
fas
1.
2.
3.
4.
5.
6.
7.
8.
fas
1.
2.
3.
4.
5.
6.
7.
8.
fas
1.
2.
3.
4.
5.
6.
7.
8.
fas
1.
2.
3.
4.
5.
6.
7.
8.
fas
1.
2.
3.
4.
5.
6.
7.
8.
fas
1.
2.
3.
4.
5.
6.
7.
8.
fas
1.
2.
3.
4.
5.
6.
7.
8.
fas
1.
2.
3.
4.
5.
6.
7.
8.
fas
1.
2.
3.
4.
5.
6.
7.
8.
fas
1.
2.
3.
4.
5.
6.
7.
8.
fas
1.
2.
3.
4.
5.
6.
7.
8.
fas
1.
2.
3.
4.
5.
6.
7.
8.
fas
1.
2.
3.
4.
5.
6.
7.
8.

Javascript

函数printDiv（）{
var divToPrint=document.getElementById（'table'）；
var htmlToPrint=''+
'' +
“表td{”+
'边框：1px实心#dddddd；'+
'填充：8px；'+
'}' +
“表{”+
'边界塌陷：塌陷；'+
“宽度：100%；”+
'}' +
'';
htmlToPrint+=divToPrint.outerHTML；
newWin=window.open（“”）；
newWin.document.write（htmlToPrint）；
newWin.print（）；
newWin.close（）；
}

不幸的是，您试图做的并不是

thead

和

tfoot

元素规范的一部分。但也有一些“黑客”可以用来模拟想要的效果。我想到的是：

对于表尾，可以将其显示设置为

表行组

，将其从表中删除，然后将其附加到表中

// 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);

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

// 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所示：

不幸的是，您试图做的并不是

thead

和

tfoot

元素规范的一部分。但也有一些“黑客”可以用来模拟想要的效果。我想到的是：

对于表尾，可以将其显示设置为

表行组

，将其从表中删除，然后将其附加到表中

// 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);

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

// 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();

这些块可以添加到打印功能的顶部，如更新的小提琴所示：