Vanilla Quick Start

Get started by adding the @paprize/vanilla library to your project.

npm install @paprize/vanilla

1. Add Report Components to your report.
2. Create a PaprizeReport instance.
3. Add your sections to it.
4. Add event listeners to adjust the content after pagination
5. Schedule a pagination.

<div data-pz-preview>
    <div data-pz-section id="section-1">...</div>
    <div data-pz-section id="section-2">...</div>
</div>

<script>
    import { pageSize, pageMargin } from '@paprize/core';
    import { PaprizeReport } from '@paprize/vanilla';

    const report = new PaprizeReport();

    report.addSection({
        id: 'section-1',
        dimension: pageSize.A4,
        margin: pageMargin.Narrow,
        ...configs,
    });

    report.addSection({
        id: 'section-2',
        dimension: pageSize.A5,
        margin: pageMargin.None,
        ...configs,
    });

    report.monitor.addEventListener('pageCompleted', (pageContext) => {
        if (pageContext.components.pageHeader) {
            pageContext.components.pageHeader.innerHTML = `<h4>Page ${pageContext.pageIndex + 1} of ${pageContext.totalPages}</h4>`;
        }
    });

    await r.schedulePagination();
</script>