I’m using the vue-html2pdf library to generate PDFs from dynamic data in my Vue.js application. I’m trying to control page breaks within the PDF, especially for a grid layout where each item is rendered inside a col-md-4 (with multiple items per row). I’m attempting to avoid breaking content in the middle of each item by using page-break-inside: avoid;, but it’s still breaking content incorrectly.
Issue:
The page-break-inside: avoid; CSS property doesn’t seem to work as expected. Even though I am using it to prevent page breaks in the middle of items, the content is still breaking in unexpected places.
I’ve also tried adjusting the :paginate-elements-by-height=”1400″ and other layout options, but they don’t seem to resolve the issue.
What I’ve tried:
Adding page-break-inside: avoid; to prevent content from being split.
Adjusting the pagination and height settings in vue-html2pdf.
Using both :float-layout=”false” and :manual-pagination=”false” to prevent automatic page breaks.
Testing with various amounts of content and different screen sizes.
<vue-html2pdf
style="display: none"
:show-layout="true"
:float-layout="false"
:enable-download="true"
:preview-modal="false"
:paginate-elements-by-height="1400"
:filename="'Bulk_Asset_QR_Codes.pdf'"
:pdf-quality="4"
:manual-pagination="false"
pdf-format="a4"
pdf-orientation="portrait"
pdf-content-width="100%"
ref="html2Pdf"
>
<section slot="pdf-content" style="padding: 20px; box-sizing: border-box">
<div class="p-3 mt-2">
<div
class="row"
style="
page-break-inside: avoid;
display: flex;
justify-content: space-between;
"
>
<div
class="col-md-4 d-flex justify-content-center mb-4"
v-for="(item, index) in selectedAssets"
:key="index"
>
<div
style="
border: 1px solid black;
padding: 10px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
"
>
<div
class="d-flex justify-content-between align-items-center"
style="margin-bottom: 10px"
>
<div>
<VueQRCodeComponent
:size="90"
:text="item.QR_CODE"
></VueQRCodeComponent>
</div>
<div>
<img
src="@/assets/images/TPCDT_logo.png"
alt="company_logo"
style="width: 100px"
/>
</div>
</div>
<div class="d-flex" style="justify-content: space-between">
<div>
<label class="text-primary">Asset Name</label>
</div>
<div class="d-flex">
<label class="text-primary">Asset Code: </label>
<p class="mb-0">{{ item.ASSET_CODE }}</p>
</div>
</div>
<p class="mb-0">
{{
item.ASSET_NAME.length > 30
? item.ASSET_NAME.substring(0, 30) + "..."
: item.ASSET_NAME
}}
</p>
</div>
</div>
</div>
</div>
</section>
</vue-html2pdf>