eKoopmans/html2pdf.js

page break in between text line while convert html to pdf

mansihpancha opened this issue · 3 comments

@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 ?

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

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 ?

Try to add more margin on bottom