useExport

useExport provides client-side PNG export and server-side PDF export.

Signature

function useExport(boardId: string): UseExportResult;

Return Type

interface UseExportResult {
    exportPng: () => Promise<string>;
    exportPdf: () => Promise<void>;
    isExporting: boolean;
}

Property	Description
`exportPng`	Export the current canvas as a PNG data URL
`exportPdf`	Trigger a server-side PDF export and download
`isExporting`	`true` while an export is in progress

Usage

import { useExport } from '@hfu.digital/boardkit-react';

function ExportButtons({ boardId }: { boardId: string }) {
    const { exportPng, exportPdf, isExporting } = useExport(boardId);

    const handlePngExport = async () => {
        const dataUrl = await exportPng();
        // Use the data URL (e.g., open in new tab or save)
        const link = document.createElement('a');
        link.href = dataUrl;
        link.download = 'board.png';
        link.click();
    };

    return (
        <div>
            <button onClick={handlePngExport} disabled={isExporting}>Export PNG</button>
            <button onClick={exportPdf} disabled={isExporting}>Export PDF</button>
        </div>
    );
}

PNG Export

exportPng() captures the current state of the Canvas2DRenderer as a PNG data URL. This is a client-side operation — no server request is made.

PDF Export

exportPdf() sends a POST request to {apiUrl}/boards/{boardId}/export with { format: 'pdf' }. The server generates the PDF, and the client automatically triggers a download.