How to auto-break or paginate HTML so that generated PDF looks the same as paginated HTML

user_10054910 0
Viewed 258

I have a requirement to auto-break or paginate HTML content, so that the generated PDF looks the same as the HTML.

Requirement: when HTML content overflows A4 size paper then it must add a new page.

Question: when content overflows A4 size paper it must generate a new page using any pdf-generating vue plugin, here I'm using vue-html2pdf.

Re-producing steps:

  1. click on the Auto add textcontent button will generate multiple text lines and pages but pagination is not working;

  2. then click on the Generate pdf button will generate a PDF with pagination; I want this pagination automatically without generating PDF.

Here is what I have tried Codesandbox

vue.js css pagination html javascript
1 Answers

By adding an additional HTML element with html2pdf__page-break class will add a page break after that element. For example,

<div class="html2pdf__page-break"/>

In this case any elements after the above <div> will go to the next page. Such approach can still be used with the automatic pagination of the package, not just when the prop manual-pagination is enabled.

It is also recommended to divide the pdf-content section into multiple pdf-item sub sections. For example,

<section slot="pdf-content">
    <section class="pdf-item">
        <h4>Your Title</h4>
        <span>
            Some copy...
        </span>
    </section>

    <div class="html2pdf__page-break"/>

    <section class="pdf-item">
        <span>
            Some text...
        </span>
    </section>
</section>
user_103120710
Related