Print a camponent

[Luigi]

Hello,

I have a simply app with a Component in Index.razor page

example Index.razor page

<Component1 valori="@_ListDataChart" />

This component1 contain a ChartPie and populate data with  @_ListDataChart data passed.

I'll create a pdf that in the second page contains this component.

It's possible ?

Thank

[Joshna Lingala Uthama Reddy Lingala]

Hi Luigi,

Greetings from Syncfusion.

We have prepared a sample for your reference to print the component on button click which you can download from the below link

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PrintPage2124234658

Code Snippets:

Index.razor:

 

<SfButton OnClick="PrintFunc">Print</SfButton>

 

<SurveyPrompt Title="How is Blazor working for you?"/>

 

@code{

 

    private async Task PrintFunc()

    {

        await Js.InvokeVoidAsync("printPage");

    }

}

 

 

Custom.js:

 

function printPage() {

    window.print();

}

 

 

SurveyPrompt.razor

 

@using Syncfusion.Blazor.Charts

 

<div class="alert alert-secondary mt-4">

    <span class="oi oi-pencil me-2" aria-hidden="true"></span>

    <strong>@Title</strong>

 

    <span class="text-nowrap">

        Please take our

        <a target="_blank" class="font-weight-bold link-dark" rel='nofollow' href=https://go.microsoft.com/fwlink/?linkid=2149017>brief survey</a>

    </span>

    and tell us what you think.

</div>

<div>

    <SfChart Title="Sales Analysis">

    <ChartPrimaryXAxis Title="Month" ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>

    <ChartPrimaryYAxis Title="Sales in Dollar"></ChartPrimaryYAxis>

    <ChartSeriesCollection>

        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">

            <ChartMarker>

                <ChartDataLabel Visible="true"></ChartDataLabel>

            </ChartMarker>

        </ChartSeries>

    </ChartSeriesCollection>

</SfChart>

</div>

 

@code {

    [Parameter]

    public string? Title { get; set; }

 

    public class SalesInfo

    {

        public string Month { get; set;}

        public double SalesValue { get; set;}

    }

 

    public List<SalesInfo> Sales = new List<SalesInfo>

    {

        new SalesInfo { Month = "Jan", SalesValue = 35 },

        new SalesInfo { Month = "Feb", SalesValue = 28 },

        new SalesInfo { Month = "Mar", SalesValue = 34 },

        new SalesInfo { Month = "Apr", SalesValue = 32 },

        new SalesInfo { Month = "May", SalesValue = 40 },

        new SalesInfo { Month = "Jun", SalesValue = 32 },

        new SalesInfo { Month = "Jul", SalesValue = 35 }

    };

 

}

 

Kindly try with the above sample and get back to us if you have any queries.

Regards,

Joshna L