Printing in Blazor Diagram Component
12 Dec 20243 minutes to read
Diagram provides support to print the content displayed on the diagram page using the PrintAsync method.
Page setup
Some of the print options cannot be configured through JavaScript code. Therefore, the layout, paper size, and margin options must be customized using the browser page setup dialog. Refer to the following links to learn 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>
</PageSettings>
</SfDiagramComponent>
@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