Wie füge ich einen sich wiederholenden Header hinzu, der nach der Injektion eines Seitenunterbrechers in einer bestimmte
Posted: 18 Apr 2025, 02:44
Ich versuche, ein PDF mit HTML2PDF.js von HTML zu generieren, das eine dynamisch füllende Tabelle enthält. Die Tabelle kann mehrere Seiten umfassen, und da ich nicht weiß, wo die Seitenpausen sein werden, kann ich die einfache Seitungsbrüscher-Div nicht platzieren. Am oberen Rand jeder Seite muss ich einen Header (nicht ein Brauch) < /p>
Ich habe Code platzieren, der den Header, in dem ich manuell einen Seiten-Breaker-Div platziere, aber ich brauche diese automatisiert, und ich kann es nicht für meinen Lebens-Sake sein.
Ich habe Code platzieren, der den Header, in dem ich manuell einen Seiten-Breaker-Div platziere, aber ich brauche diese automatisiert, und ich kann es nicht für meinen Lebens-Sake sein.
Code: Select all
function injectHeadersForPDF() {
document.querySelectorAll(".pdf-header-clone").forEach((el) => el.remove());
const headerTemplate = document.querySelector(".header-content");
const pageBreaks = document.querySelectorAll(".html2pdf__page-break");
pageBreaks.forEach((breakEl) => {
const clone = headerTemplate.cloneNode(true);
clone.classList.add("pdf-header-clone");
clone.style.marginBottom = "30px";
breakEl.parentNode.insertBefore(clone, breakEl.nextSibling);
});
}
document.getElementById("mentes").addEventListener("click", () => {
const element = document.getElementById("card-body");
injectHeadersForPDF();
element.classList.add("pdf-mode");
const opt = {
margin: [10, 10, 10, 10],
filename: "myfile.pdf",
image: {
type: "jpeg",
quality: 0.99
},
html2canvas: {
scale: 5,
scrollX: 0,
scrollY: 0,
windowWidth: document.body.scrollWidth,
windowHeight: document.body.scrollHeight,
},
jsPDF: {
unit: "mm",
format: "a3",
orientation: "portrait"
},
};
html2pdf()
.set(opt)
.from(element)
.save()
.then(() => {
document.querySelectorAll(".pdf-header-clone").forEach((el) => el.remove());
element.classList.remove("pdf-mode");
});
});