html2pdf-pagebreak-test

by DanTheMan13

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<div class="controls">
    <label>
        Content height:
        <input
            id="contentHeight"
            type="range"
            min="100"
            max="1500"
            value="300"
            step="1"
        >
        <span id="heightValue">300px</span>
    </label>

    <button id="generatePdf">
        Generate PDF
    </button>
</div>

<div id="document">

    <h1>html2pdf.js Page Break Test</h1>

    <div id="variableContent" class="content">
        <h2>Variable Height Content</h2>

        <p>
            Changing the height of this element changes the position
            of the panels below it.
        </p>

        <p>
            The purpose of this content is to position the panels
            at different points relative to the PDF page boundary.
        </p>
    </div>

    <div class="panel">
        <h2>Panel 1</h2>

        <div class="panel-content">
            <p>
                This panel is configured with html2pdf.js
                <code>pagebreak.avoid</code>.
            </p>

            <p>
                The entire panel should remain together on one page.
            </p>

            <p>
                If the panel cannot fit in the remaining space,
                it should be moved to the next page.
            </p>
        </div>
    </div>

    <div class="panel">
        <h2>Panel 2</h2>

        <div class="panel-content">
            <p>
                This is another panel that should also remain intact.
            </p>

            <p>
                The panels deliberately have different content heights.
            </p>
        </div>
    </div>

</div>

CSS

body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

#document {
    width: 700px;
}

.controls {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ccc;
}

.content {
    border: 1px solid #ccc;
    padding: 15px;
    margin-bottom: 20px;
    height: 300px;
}

.panel {
    border: 2px solid #333;
    padding: 20px;
    margin-bottom: 20px;
    background: #f5f5f5;
}

.panel h2 {
    margin-top: 0;
}

.panel-content {
    height: 250px;
}

button {
    padding: 8px 16px;
    cursor: pointer;
}

JavaScript

const contentHeight = document.getElementById('contentHeight');
const heightValue = document.getElementById('heightValue');
const variableContent = document.getElementById('variableContent');

contentHeight.addEventListener('input', function () {
    variableContent.style.height = `${this.value}px`;
    heightValue.textContent = `${this.value}px`;
});

document.getElementById('generatePdf').addEventListener('click', function () {

    const element = document.getElementById('document');

    const options = {
        margin: 10,

        filename: 'html2pdf-pagebreak-test.pdf',

        image: {
            type: 'jpeg',
            quality: 0.98
        },

        html2canvas: {
            scale: 2
        },

        jsPDF: {
            unit: 'mm',
            format: 'a4',
            orientation: 'portrait'
        },

        pagebreak: {
            mode: ['avoid'],
            avoid: ['.panel']
        }
    };

    html2pdf()
        .set(options)
        .from(element)
        .save();
});