Printing in Blazor Diagram Component

14 Nov 20222 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:

• Chrome
• Firefox
• Safari
• IE

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

<input type="button" value="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>
  </PageSettings>
</SfDiagramComponent>

@code{
     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;
     
     private void 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);
     }
}