Text get cut in htm2js pdf Library

96 views Asked by At
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.

0

There are 0 answers