const options = {
margin: 10,
filename: filename,
image: { type: 'jpeg', quality: 1.0 },
pageBreak: {
// mode: 'avoid-all',
mode: "css",
avoid: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'strong', 'li', 'feild'],
before: "5cm",
after: "5cm"
},
html2canvas: {
scale: 2,
logging: true,
dpi: 192,
letterRendering: true,
useCORS: true,
bottom: 20
},
jsPDF: {
unit: 'mm', format: 'a4', orientation: 'portrait', putTotalPages: true,
autoPaging: 'text',
margin: [12, 8, 15, 8],
},
}
const pdf = await html2pdf()
.from(element)
.set(options)
.toPdf()
.get('pdf')
.then(function (pdf: any) {
var totalPages = pdf.internal.getNumberOfPages()
for (let i = 1; i <= totalPages; i++) {
pdf.setPage(i)
pdf.setFontSize(10)
pdf.setTextColor(100)
pdf.text(
`${i}`,
pdf.internal.pageSize.getWidth() / 2,
pdf.internal.pageSize.getHeight() - 8
)
}
})
// .outputPdf('datauristring', { filename: filename })
.save()
// return pdf
}
catch (error) {
console.log(' ~ file: Helpers.tsx:125 ~ pdfBlobGenerator ~ error:', error)
}
I am using the html2pdf.js library to generate pdf from Dynamic HTML content. I am facing the issues like text getting cut at the end of the page. to resolve that I have added a configuration but it does not work for me. also, page number overlap to content
Please have a look and guide me on how can i fix the issue.