How to export Radzen Chart to PDF

Radzen.Blazor Components
2

Hi @amit_gobrillianttech,

This can be done with the help of two open source JS libraries: html2canvas and jsPDF.

@inject IJSRuntime JSRuntime

<!-- include the JS libraries from a CDN -->
<script src="https://unpkg.com/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>
<script src="https://unpkg.com/html2canvas@1.4.1/dist/html2canvas.min.js"></script>

<script>
    // Define a function which exports an HTML element by its id
    function exportChart(id) {
        const element = document.getElementById(id);

        html2canvas(element, { allowTaint: true, useCORS: true }).then(canvas => {
            const A4_WIDTH = 595.28;
            const width = A4_WIDTH;
            const height = (width / canvas.width) * canvas.height;
            const image = canvas.toDataURL('image/png');
            const doc = new jspdf.jsPDF('p', 'pt', 'a4');
            doc.addImage(image, 'PNG', 0, 0, width, height);
            doc.save('myPDF.pdf');
        });
    }
</script>

<RadzenButton Click=@Export Text="Export Chart" />
<RadzenChart id="chart">
  <!-- Chart configuration -->
</RadzenChart>
@code {
    async Task Export()
    {
        // Invoke exportChart and pass its id attribute as argument
        await JSRuntime.InvokeVoidAsync("exportChart", "chart");
    }
}
1 Like