eKoopmans / html2pdf.js

Client-side HTML-to-PDF rendering using pure JS.
MIT License
3.92k stars 1.37k forks source link

page break in between text line while convert html to pdf #692

Open mansihpancha opened 3 months ago

mansihpancha commented 3 months ago

@eKoopmans Hii sir, i am facing an issue in the html2pdf.js when i convert my section into pdf through the html2pdf then it break the page in between text please see the screen shot below

image

and this is my html2pdf configuration

code :- function exportToPDF() { var element = document.getElementById('invoice'); var opt = { // margin: [0.3, 0.3, 0.3, 0.3], mode: ['legacy'], margin: [0.2, 0.1, 0.6, 0.2], filename: 'Audit-Report.pdf', enableLinks: false, // pagebreak: { // avoid: '.no-split', // mode: ['avoid-all', 'css', 'legacy'] // }, pagebreak: {mode: 'css', after: '.section_wise_div'}, image: { type: 'jpeg', quality: 1 }, html2canvas: { scale: 4 }, jsPDF: { unit: 'in', format: [7.5, 12], ////'a4', orientation: 'landscape' } }; html2pdf().from(element).set(opt).toPdf().get('pdf').then(function(pdf) { var totalPages = pdf.internal.getNumberOfPages(); for (i = 1; i <= totalPages; i++) { pdf.setPage(i); pdf.addImage("http://localhost/glocoach_dev/new_glocoach/images/analytical_report_images/report_footer.png", "PNG", 0, pdf.internal.pageSize.getHeight() - 0.49, 12.2, 0); //second last is width and third last is height } }).save(); }

so do you have any solution regarding this ?

ikaroweb commented 3 months ago

I've solved with this code:

`var body = document.body var html = document.documentElement var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight) var element = document.querySelector('#content') var heightCM = height / 35.35

  var opt = {
    margin: 1,
    filename: file_name + '.pdf',
    html2canvas: { dpi: 192, letterRendering: true },
    jsPDF: {
        orientation: 'portrait',
        unit: 'cm',
        //format: [heightCM, 60]
        format: [heightCM, 33]
      }
  };`

I can't paste my code here so... -> https://pastebin.com/qNJrBPGn

mansihpancha commented 3 months ago

Hii @ikaroweb

Thanks for your response hope you are doing well, i am using your solution which good for single page or a4 portage page and actually i am generating an landscape format PDF with the larger amount data and i want to shift the overlapped text into next page of PDF which is already in real time happen but sometime it breaks the text content also when rest larger text moved into next page so i want to move out from this problem .

image

do you have any solution or any temporary way regarding this ?

ikaroweb commented 3 months ago

Try to add more margin on bottom