React-diagrams: Any ready solutions for canvas export to png or pdf ?

[kneeinnovation]

Hi folks! Can you suggest any ready solutions for react diagram canvas (with figures) export to png or pdf ?

[miso-belica]

Hi, I use the snippet below but it's far from perfect because the PDF size is not automatically scaled to the size of the whole diagram so there are some hardcoded sizes and assumptions. But if you can improve it or find something else I would like to hear about it.

import html2pdf from 'html2pdf.js';


function DownloadPdfButton () {
    const handleDownloadPdf = () => {
        const element = document.querySelector('.canvas-diagram');
        element.classList.add('double-view-height');

        const opt = {
            image: { type: 'jpeg', quality: 0.98 },
            html2canvas: {
                foreignObjectRendering: true,
                imageTimeout: 10000,
                // width: element.scrollWidth + 10000,
                // height: element.scrollHeight + 10000,
                // windowWidth: element.scrollWidth + 10000,
                // windowHeight: element.scrollHeight + 10000,
            },
            jsPDF: {
                unit: 'pt',
                format: [element.scrollHeight, element.scrollWidth],
                orientation: 'landscape',
                putOnlyUsedFonts: true,
            },
        };

        html2pdf()
            .from(element)
            .set(opt)
            .save('diagram.pdf')
            .finally(() => {
                element.classList.remove('double-view-height');
            });
    };

    return <button onClick={handleDownloadPdf}>Download PDF</button>
}

[kneeinnovation]

Thank you !!! I will let you know about my progress with this code!