Search results

Print and Export in Blazor TreeMap component

03 Aug 2021 / 2 minutes to read

Print

Print functionality can be enabled by setting the AllowPrint property to true. The rendered TreeMap can be printed directly from the browser.

The following code example shows the print method.

Copied to clipboard
@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.Print();
    }
    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 },
    };
}

TreeMap with print option

Export

Image Export

Export functionality can be enabled by setting the AllowImageExport property to true. The rendered TreeMap can be exported as an image 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.

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

Copied to clipboard
@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.Export(ExportType.PNG, "Export", Syncfusion.PdfExport.PdfPageOrientation.Portrait, true);
}
}

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 and the export method requires two parameters: file type and file name. The orientation setting is optional.

Copied to clipboard
@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.Export(ExportType.PDF, "Export", Syncfusion.PdfExport.PdfPageOrientation.Portrait);
}
}

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