Wie füge ich einen sich wiederholenden Header hinzu, der nach der Injektion eines Seitenunterbrechers in einer bestimmteJavaScript

Javascript-Forum
Anonymous
 Wie füge ich einen sich wiederholenden Header hinzu, der nach der Injektion eines Seitenunterbrechers in einer bestimmte

Post by Anonymous »

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.

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");
});
});

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post