Open lodossDev opened 4 years ago
There's a built in div that simulates a page break:
<div class='html2pdf__page-break'></div>
I'm also creating a table similar to yours but in addition to using the page break div, I calculate the section height and if it's more than the page's height (1016px) or what's remaining if you have other data, I append the page break.
Any official support for this feature yet ?
Any support?
same problem, any fix?
I am having a similar issue, Is there any workaround for this ?
Hi, all.
I had a similar problem when generating a pdf report with complex styles, and also with a custom header and footer.
In order to solve this I did the following tasks: 1) I prepared my report by creating an element with all pdf report's content I wanted, with limited width to fit on pdf default width I was using. On each element I put a class in order to select everything by class. 2) I created an angular component with the page width and height I wanted. This page have a header, footer, page break with all the styles I wanted. 3) After that, I used the idea from issue #83 to calculate the sizes of each element to decide if it would fit on current page or if I needed to generate another one. This generated all pages I wanted as groups of html string elements. 4) With all the html pages collected, I just needed to iterate through them to generate a new component instance for each page I wanted. 5) When I had all the pages generated on this root element helper, I passed it to html2pdf generator and all the magic happened.
Check this stackblitz for details on this idea: https://stackblitz.com/edit/angular-a83z6y
If you use this idea of a separate component, you can save the table header element and use it to insert a new header every time you create a new page.
Hi @abrhbruno , can you show the code that solves the issue?
hi @eKoopmans please tell me the solution for the repeat table header on next page and the extra blank page issue
I have uploading a coding pdf file
myfile (4).pdf
Hi, all.
I had a similar problem when generating a pdf report with complex styles, and also with a custom header and footer.
In order to solve this I did the following tasks:
- I prepared my report by creating an element with all pdf report's content I wanted, with limited width to fit on pdf default width I was using. On each element I put a class in order to select everything by class.
- I created an angular component with the page width and height I wanted. This page have a header, footer, page break with all the styles I wanted.
- After that, I used the idea from issue text is cut in the middle #83 to calculate the sizes of each element to decide if it would fit on current page or if I needed to generate another one. This generated all pages I wanted as groups of html string elements.
- With all the html pages collected, I just needed to iterate through them to generate a new component instance for each page I wanted.
- When I had all the pages generated on this root element helper, I passed it to html2pdf generator and all the magic happened.
Check this stackblitz for details on this idea: https://stackblitz.com/edit/angular-a83z6y
If you use this idea of a separate component, you can save the table header element and use it to insert a new header every time you create a new page.
the link you provide is not working
please help i am trying to repeat headers and footer on every page break
hi @eKoopmans please tell me the solution for the repeat table header on next page and the extra blank page issue
I have uploading a coding pdf file myfile (4).pdf
![]()
yes I also facing this issue and I want to header and footer on every page please help
For Workaround : What I did was modify the html2pdf's toContainer method to repeat the header of the table if the the table is breaking into next page the line i added was this
jQuery(t).parent().parent().find('thead').find('tr').clone().insertAfter(jQuery(h));
I used jQuery but pure JavaScript can also be used but please note this is a dirty solution and could be error prone but it solves my purpose for now
if (A.before) {
h = lt("div", {
style: {
display: "block",
height: e - s.top % e + "px"
}
});
t.parentNode.insertBefore(h, t)
jQuery(t).parent().parent().find('thead').find('tr').clone().insertAfter(jQuery(h)); ///This is what i added
}
For Workaround : What I did was modify the html2pdf's toContainer method to repeat the header of the table if the the table is breaking into next page the line i added was this
jQuery(t).parent().parent().find('thead').find('tr').clone().insertAfter(jQuery(h));
I used jQuery but pure JavaScript can also be used but please note this is a dirty solution and could be error prone but it solves my purpose for nowif (A.before) { h = lt("div", { style: { display: "block", height: e - s.top % e + "px" } }); t.parentNode.insertBefore(h, t) jQuery(t).parent().parent().find('thead').find('tr').clone().insertAfter(jQuery(h)); ///This is what i added }
it worked or not
@vstar001 I solved on my projects using this options:
<vue3-html2pdf
:show-layout="false"
:float-layout="true"
:enable-download="false"
:preview-modal="false"
filename="memoria-del-projecte.pdf"
:pdf-quality="1"
:manual-pagination="true"
pdf-format="a4"
pdf-orientation="portrait"
pdf-content-width="800px"
ref="html2Pdf"
@beforeDownload="beforeDownload($event)"
>
---
.set({
...options,
margin: [0,15, 15, 15],
filename: 'pdfFileName.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 1, letterRendering: true },
jsPDF: { unit: 'pt', format: 'letter', orientation: 'portrait' },
pagebreak: { after: 'section', mode: ['avoid-all', 'css', 'legacy'] }
})
I had a 60 pages PDF, so i divide my PDF into sections and break after each section.
<section class="pdf-item">
<div class="myStyle keeptogether">
....your content
</div>
</section>
<section class="pdf-item">
<div class="myStyle keeptogether">
....your content
</div>
</section>
The other problem i had was those super long text's I used this class for those super text's, in order to break if text was too long.
.keeptogether {page-break-inside:avoid; break-inside: avoid;}
.myStyle {
// for me had to do some teeeks on wordbreaking
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: keep-all;
word-break: keep-all;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
Is there any update on the issue? Can anybody help me with the solution?
any solution ?
Hi guys, I have a table like below very simple, I am trying to get repeating table headers for every time it goes to a new page, how can I do this, currently it just overflows to the next page with a row looking as it is being cut-off?