Inject Data

This feature allows you to pass a serializable object to the reportToPdf function during the report building process, making the data available inside your report components.

script.ts

import { promises as fs } from 'fs';

const jsonData = await fs.readFile('my-json-data.json', 'utf-8');
await reportToPdf(page, '/', jsonData);

MyReportData.ts

interface MyReportData {
    info: {
        name: string;
        lastName: string;
        age: number;
    };
}

const defaultData = {
    info: { name: 'John', lastName: 'Doe', age: 44 },
};

Zero

<span data-pz-v-json-data-key="info.lastName"></span>

The element’s content will be replaced with the provided data after pagination is completed.

Vanilla

• By attribute: The element’s content will be replaced with the provided data after pagination is completed.

<span data-pz-v-json-data-key="info.name"></span>

• Or by code:

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

const report = new PaprizeReport();

...

report.monitor.addEventListener('pageCompleted', async (pageContext) => {
    const json = await report.getJsonData(defaultData);
    pageContext.components.pageContent.textContent.replaceAll(
        '{NAME}',
        json.info.name
    );
});

...

React

function MyComponent() {
    const data = useJsonData<MyData>(defaultData);

    return `By ${data.info.name} ${data.info.lastName}`;
}

Recipe

Valid Parent

Direct or indirect child of Section