Print and Export in Blazor TreeMap Component

15 Dec 20222 minutes to read

Print

The PrintAsync method can be used to print a rendered TreeMap directly from the browser and it can be enabled by setting the AllowPrint property to true.

@using Syncfusion.Blazor.TreeMap;

<button @onclick="PrintMap">Print Treemap</button>
<SfTreeMap @ref="Treemap" DataSource="@GrowthReport" WeightValuePath="GDP" TValue="Country" AllowPrint="true">
    <TreeMapLeafItemSettings LabelPath="Name" Fill="lightgray">
    </TreeMapLeafItemSettings>
</SfTreeMap>

@code {
    public SfTreeMap<Country> Treemap { get; set; }
    public async Task PrintMap()
    {
        await Treemap.PrintAsync();
    }
    public class Country
    {
        public string Name { get; set; }
        public double GDP { get; set; }
    }
    public List<Country> GrowthReport = new List<Country> {
        new Country  {Name="United States", GDP=17946 },
        new Country  {Name="China", GDP=10866 },
        new Country  {Name="Japan", GDP=4123 },
    };
}

Export

Image Export

Export functionality can be enabled by setting the AllowImageExport property to true. The rendered TreeMap can be exported as an image with help of ExportAsync method and the method requires two parameters: image type and file name. The orientation setting is optional.

The TreeMap can be exported as an image in the following formats.

• JPEG
• PNG
• SVG

The following code example shows how to export the TreeMap in PNG format.

@using Syncfusion.Blazor.TreeMap;

<button @onclick="ExportMap">Export Treemap</button>
<SfTreeMap @ref="Treemap" DataSource="@GrowthReport" WeightValuePath="GDP" TValue="Country" AllowImageExport="true" AllowPdfExport="true">
    <TreeMapLeafItemSettings LabelPath="Name" Fill="lightgray">
    </TreeMapLeafItemSettings>
</SfTreeMap>

@code {
    public SfTreeMap<Country> Treemap { get; set; }
    public async Task ExportMap()
    {
        await Treemap.ExportAsync(ExportType.PNG, "Export", Syncfusion.PdfExport.PdfPageOrientation.Portrait, true);
    }
}

NOTE

Refer to the code block to know about the property value of the GrowthReport.

PDF Export

PDF export functionality can be enabled by setting the AllowPdfExport property to true. The rendered TreeMap can be exported as PDF with the help of ExportAsync method and the export method requires two parameters: file type and file name. The orientation setting is optional.

@using Syncfusion.Blazor.TreeMap;

<button @onclick="ExportMap">Export Treemap</button>
<SfTreeMap @ref="Treemap" DataSource="@GrowthReport" WeightValuePath="GDP" TValue="Country" AllowImageExport="true" AllowPdfExport="true">
    <TreeMapLeafItemSettings LabelPath="Name" Fill="lightgray">
    </TreeMapLeafItemSettings>
</SfTreeMap>

@code {
    public SfTreeMap<Country> Treemap { get; set; }
    public async Task ExportMap()
    {
        await Treemap.ExportAsync(ExportType.PDF, "Export", Syncfusion.PdfExport.PdfPageOrientation.Portrait);
    }
}

NOTE

Refer to the code block to know about the property value of the GrowthReport.