Search results

Print and Export in Blazor TreeMap component

20 Apr 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 demonstrates 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 demonstrates 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 code block to know the property value of 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, 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 code block to know the property value of GrowthReport.