在id分组中使用分页符

Question

我希望它总是在更改foreach中的id时更改页面，以便在打印时分隔页面。

我有以下代码:

var data = [
{Id: "552", valor:  "50.00", Descricao: "Fraldas", },
{Id: "552", valor: "35.00", Descricao: "Creme", },
{Id: "545", valor: "23.00", Descricao: "Caneta", },
{Id: "545",  valor: "15.00", Descricao: "Caderno",  },
{Id: "562", valor: "23.00", Descricao: "Caneta", },
{Id: "562",  valor: "15.00", Descricao: "Caderno",  },
];
var data1 = [
{Id_Linha: "552", valor:  "50.00", Descricao: "camisola", },
{Id_Linha: "562", valor: "35.00", Descricao: "calças", },,
];
var results = data.concat(data1).reduce(function(results, item) {
var id = item.Id || item.Id_Linha; // Use the "Id" property if it exists, otherwise use the "Id_Linha" property
(results[id] = results[id] || []).push(item);
return results;
}, {});
$(document).on('click', '.dad-pagamento', function() {
var linha = ``;
Object.keys(results).forEach(id => {
linha += `<div class="teste">
<table class="align-middle mb-0 table table-borderless table-striped table-hover" border="1">

<thead>
<tr>
<th class="text-center">Nº Recibo</th>
<th class="text-center">Data de Vencimento</th>
<th class="text-center">Valor</th>
</tr>
</thead>                              
<tbody>`;
results[id].forEach(item => {
var idValue = item.Id || item.Id_Linha; // Use the "Id" property if it exists, otherwise use the "Id_Linha" property
var valor = item.valor;
var descricao = item.Descricao;
linha += `<tr>
<td class="text-center text-muted"> ${idValue}</td>
<td class="text-center text-muted"> ${valor}</td>
<td class="text-center text-muted"> ${descricao}</td>
</tr>`;
})
linha += `</tbody></table></div>`;
});
$('#minhaDiv3').show();
$(".pagmfalta").html(linha);
});



document.getElementById("btnPrint").onclick = function () {
printElement(document.getElementById("printThis")); 
}
function printElement(elem) {
var domClone = elem.cloneNode(true);

var $printSection = document.getElementById("printSection");

if (!$printSection) {
var $printSection = document.createElement("div");
$printSection.id = "printSection";
document.body.appendChild($printSection);
}
console.log($printSection);
$printSection.innerHTML = "";
$printSection.appendChild(domClone);
window.print();
}

@media screen {
#printSection {
display: none !important;
}
}
@media print {
body * {
visibility:hidden !important;
}

#printSection, #printSection * {
visibility:visible !important;
}
#printSection {
position:absolute !important;
left:0 !important;
top:0 !important;

}
.teste{ page-break-after: always;}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" tabindex="0" class="dropdown-item btn-show dad-pagamento" href="s3" data-element="#minhaDiv3">Teste</button>
<section id="s3">
<div style="display:none" id="minhaDiv3">
<button type="button" tabindex="0" class="dropdown-item" id="btnPrint" style="text-align:right;">Print</button>
<div id="printThis">
<div class="row pagmfalta">
</div>
</div>
</div>
</section>

代码创建了页，但是表都在第一页上。我希望第一个表出现在第一页，第二个表出现在第二页，依此类推。

我在返回表时对id进行分组，也许解决方案是在id更改时进行分页，但我不知道如何做到这一点。

有人能帮忙吗?

Answer 1

将其添加到媒体打印中，100vh使用了100%的设备高度，我添加了一些填充来使它看起来更好，但是填充会增加高度，所以我必须计算15px

.teste {
height: calc(100vh - 15px);
padding-left: 30px;
padding-top: 15px;
}