I am making a simple pdf generation react application,
Libraries used:
The following is the code that I have tried,
index.js:
<div className="App">
<button onClick={exportToPdf}>Export</button>
<div id="toRender">
.
.
.
Some lengthy content
.
.
.
</div>
</div>
So here on click over the export button, the pdf generation happens.
const exportToPdf = () => {
let elem = document.getElementById("toRender");
elem.scrollIntoView();
h2c(elem).then((canvas) => {
const img = canvas.toDataURL("image/png", 1);
//console.log(`"data:image/png;base64,${img}"`)
const pdf = new jsPDF("p", "mm");
const imgWidth = pdf.internal.pageSize.getWidth();
const pageHeight = pdf.internal.pageSize.getHeight();
const imgHeight = (canvas.height * imgWidth) / canvas.width;
let heightLeft = imgHeight;
let position = 10;
pdf.addImage(img, "PNG", 0, position, imgWidth, imgHeight, 100, 90);
heightLeft -= pageHeight;
// pdf.rect(5, 5, 200, 285).line(5, 45, 205, 45);
// pdf.line(3, 35, imgWidth - 3, 35)
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
pdf.addPage();
pdf.addImage(img, "PNG", 0, position, imgWidth, imgHeight);
// pdf.rect(5, 5, 200, 285).line(5, 45, 205, 45);
heightLeft -= pageHeight;
}
//pdf.addImage(img, 'PNG', 0, 0)
pdf.save("export.pdf");
});
};
The pdf generation works fine.
I need to implement header for all the dynamically generated pages. I have tried adding like pdf.text("<header> Some header content </header>")
, but it doesn't work.
How to add header in all the pages while generating pdf?
from Adding header to pdf [Snippet attached]
No comments:
Post a Comment