Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
mansihpancha opened this issue Apr 5, 2024 · 3 comments
Open

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

mansihpancha opened this issue Apr 5, 2024 · 3 comments

Comments

@mansihpancha
Copy link

mansihpancha commented Apr 5, 2024

@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
Copy link

ikaroweb commented Apr 6, 2024

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
Copy link
Author

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
Copy link

ikaroweb commented Apr 6, 2024

Try to add more margin on bottom

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants