How to insert page number and navigate to specific page in Document Editor component

19 Dec 20223 minutes to read

You can insert page number and navigate to specific page in Document Editor component by following ways.

Insert page number

You can use [insertPageNumber] API in editor module to insert the page number in current cursor position. By default, Page number will insert in Arabic number style. You can change it, by providing the number style in parameter.

NOTE

Currently, Documenteditor have options to insert page number at current cursor position.

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

<div class="control-section">
    <ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
</div>

<script>
    var documenteditor;
    var container;
    function onCreated() {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
       // To insert text in cursor position
       container.documentEditor.editor.insertText('Document editor');
       // To move the selection to header
       container.documentEditor.selection.goToHeader();
       // Insert page number in the current cursor position
       container.documentEditor.editor.insertPageNumber();
    }
</script>

Also, you use [insertField] API in Editor module to insert the Page number in current position

//Current page number
container.documentEditor.editor.insertField('PAGE \* MERGEFORMAT', '1');

Get page count

You can use [pageCount] API to gets the total number of pages in Document.

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

<div class="control-section">
    <ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
</div>

<script>
    var documenteditor;
    var container;
    function onCreated() {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
       // To insert text in cursor position
       container.documentEditor.editor.insertText('Document editor');
       // To get the total number of pages
       var pageCount =container.documentEditor.pageCount;
    }
</script>

Navigate to specific page

You can use [goToPage] API in Selection module to move selection to the start of the specified page number.

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

<div class="control-section">
    <ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
</div>

<script>
    var documenteditor;
    var container;
    function onCreated() {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
        // To move selection to page number 2
        container.documentEditor.selection.goToPage(2);
    }
</script>