How to Insert Page Numbers and Navigate in Blazor DOCX Editor

28 Aug 20263 minutes to read

You can insert a page number and navigate to a specific page in the Blazor DOCX Editor (Document Editor) component in the following ways.

Insert page number

The InsertFieldAsync API in the Editor module is used to insert the page number at the current position. By default, the page number will be inserted in Arabic number style.

Currently, the DOCX Editor has an option to insert a page number at the current cursor position.

The following example code illustrates how to insert a page number in the header.

@using Syncfusion.Blazor.DocumentEditor

<SfDocumentEditorContainer @ref="container" EnableToolbar=true>
    <DocumentEditorContainerEvents Created="OnCreated"></DocumentEditorContainerEvents>
</SfDocumentEditorContainer>

@code {
    SfDocumentEditorContainer container;

    public async void OnCreated(object args)
    {
        // To insert text at the cursor position
        await container.DocumentEditor.Editor.InsertTextAsync("Document Editor");
        // To move the selection to the header
        await container.DocumentEditor.Selection.GoToHeaderAsync();
        // Insert page number at the current cursor position
        await container.DocumentEditor.Editor.InsertFieldAsync("PAGE \\* MERGEFORMAT", "1");
    }
}

Get page count

The GetPageCountAsync API is used to get the total number of pages in the document.

The following example code illustrates how to get the number of pages in the document.

@using Syncfusion.Blazor.DocumentEditor

<SfDocumentEditorContainer @ref="container" EnableToolbar=true>
    <DocumentEditorContainerEvents Created="OnCreated"></DocumentEditorContainerEvents>
</SfDocumentEditorContainer>

@code {
    SfDocumentEditorContainer container;

    public async void OnCreated(object args)
    {
        // To insert text at the cursor position
        await container.DocumentEditor.Editor.InsertTextAsync("Document Editor");
        // To get the total number of pages
        int pageCount = await container.DocumentEditor.GetPageCountAsync();
    }
}

Navigate to a specific page

Use the GoToPageAsync API in the Selection module to move the selection to the start of the specified page number.

The following example code illustrates how to move the selection to a specific page.

@using Syncfusion.Blazor.DocumentEditor

<SfDocumentEditorContainer @ref="container" EnableToolbar=true>
    <DocumentEditorContainerEvents Created="OnCreated"></DocumentEditorContainerEvents>
</SfDocumentEditorContainer>

@code {
    SfDocumentEditorContainer container;

    public async void OnCreated(object args)
    {
        // To move the selection to page number 2
        await container.DocumentEditor.Selection.GoToPageAsync(2);
    }
}