Printing in Blazor Diagram Component

6 Feb 20243 minutes to read

Diagram provides support to print the content displayed in the diagram page using the PrintAsync method.

Page setup

Some of the print options cannot be configured through JavaScript code. So the layout, paper size, and margin options have to be customized using the browser page setup dialog. Refer to the following links to know more about the browser page setup:

Printing Options

The diagram can be customized while printing using the following properties of the DiagramPrintSettings class.

Name Description
Region Sets the region of the diagram to be printed.
Margin Sets the margin of the page to be printed/exported.
FitToPage Prints the diagram into a single or multiple pages.
PageWidth Sets the page width of the diagram while printing the diagram in multiple pages.
PageHeight Sets the page height of the diagram while printing the diagram in multiple pages.
Orientation Sets the orientation of the page.

These properties behave the same as the properties in the DiagramExportSettings class. For more details, refer

The following code example illustrates how to print the region occupied by the diagram elements.

@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Buttons

<SfButton Content="Print" OnClick="@OnPrint" />
<SfDiagramComponent Height="600px" @ref="@diagram">
    <PageSettings MultiplePage="true" Width="@width" Height="@height" Orientation="@orientation" ShowPageBreaks="@showPageBreak">
        <PageMargin Left="@left" Right="@right" Top="@top" Bottom="@bottom"></PageMargin>

@code {

    //Reference the diagram
    SfDiagramComponent diagram;
    double left = 10;
    double top = 10;
    double right = 10;
    double bottom = 10;
    double width = 410;
    double height = 550;
    bool multiplePage = true;
    bool showPageBreak = true;
    DiagramPrintExportRegion region = DiagramPrintExportRegion.PageSettings;
    PageOrientation orientation = PageOrientation.Portrait;
    //Method to prin the diagram
    private async Task OnPrint()
        DiagramPrintSettings print = new DiagramPrintSettings();
        print.PageWidth = width;
        print.PageHeight = height;
        print.Region = region;
        print.FitToPage = multiplePage;
        print.Orientation = orientation;
        print.Margin = new DiagramThickness() { Left = left, Top = top, Right = right, Bottom = bottom };
        await diagram.PrintAsync(print);

You can download a complete working sample from GitHub

See Also