Get Started
Pagination
Pagination
Manual pagination
<Html2Pdf :manual-pagination="true">
<template #pdf-content>
<section>Page one</section>
<div class="html2pdf__page-break"></div>
<section>Page two</section>
</template>
</Html2Pdf>
Recommended helper CSS:
.html2pdf__page-break {
display: block;
height: 0;
clear: both;
}
Do not add break-before or page-break-before to this helper while legacy page-break mode is active. Doing so can create duplicate breaks or blank pages.
The same .html2pdf__page-break marker is recognized by selectable-text mode, so consumers do not need a second pagination API.
Automatic pagination
<Html2Pdf :manual-pagination="false" :paginate-elements-by-height="1100">
<template #pdf-content>
<div>
<section>Block 1</section>
<section>Block 2</section>
<section>Block 3</section>
</div>
</template>
</Html2Pdf>
The component measures direct child elements and inserts temporary automatic page-break markers when the configured height would be exceeded.
Prevent content from splitting
Default protected selectors:
.pdf-keep-together
.pdf-no-break
img
Example:
<div class="pdf-keep-together">
<h2>Invoice Summary</h2>
<p>Keep this block together.</p>
</div>
You can extend page-break avoidance:
<Html2Pdf
:html-to-pdf-options="{
pagebreak: {
avoid: ['.custom-card'],
},
}"
/>
Your selectors are merged with package defaults.
No-break helpers are best-effort. A block that is taller than the usable PDF page area may still need to split.