Print in Blazor DocumentEditor Component

2 Aug 20231 minute to read

To print the document, use the PrintAsync method from document editor instance.

Refer to the following example for print.

@using Syncfusion.Blazor.DocumentEditor

<button @onclick="OnPrint">Print</button>
<SfDocumentEditorContainer @ref="container" EnableToolbar=true></SfDocumentEditorContainer>

@code {
    SfDocumentEditorContainer container;
    protected async void OnPrint(object args)
    {
        await container.DocumentEditor.PrintAsync();
    }
}

Improve print quality

Document editor provides an option to improve the print quality using PrintDevicePixelRatio in Document editor settings. Document editor using canvas approach to render content. Then, canvas are converted to image and it process for print. Using PrintDevicePixelRatio API, you can increase the image quality based on your requirement.

The following example code illustrates how to improve the print quality in Document editor container.

<SfDocumentEditorContainer ID="cont" @ref="container" EnableToolbar="true" DocumentEditorSettings="settings" Height="590px">
</SfDocumentEditorContainer>

@code {
    SfDocumentEditorContainer container;
    DocumentEditorSettingsModel settings = new DocumentEditorSettingsModel() { PrintDevicePixelRatio = 2 };
}

NOTE

By default, printDevicePixelRatio value is 1.