How to Insert Page Numbers and Navigate in Vue DOCX Editor
28 Aug 20269 minutes to read
You can insert page number and navigate to specific page in Vue DOCX Editor (Document Editor) component using the following ways.
Insert page number
You can use insertPageNumber API in editor module to insert the page number in current cursor position. By default, the page number will be inserted in Arabic number style. You can change it by providing the number style in parameter.
Currently, DOCX Editor has options to insert page number at the current cursor position.
The following example code illustrates how to insert page number in header.
<template>
<div id="app">
<ejs-documenteditorcontainer ref="container" :serviceUrl="serviceUrl" height="590px" id="container"
:enableToolbar="true" v-on:created="onCreated.bind(this)"></ejs-documenteditorcontainer>
</div>
</template>
<script setup>
import { DocumentEditorContainerComponent as EjsDocumenteditorcontainer, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
import { provide, ref } from 'vue';
const container = ref(null);
const serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
//Inject require modules.
provide('DocumentEditorContainer', [Toolbar]);
const onCreated = function () {
// To insert text in cursor position
container.value.ej2Instances.documentEditor.editor.insertText('Document editor');
// To move the selection to header
container.value.ej2Instances.documentEditor.selection.goToHeader();
// Insert page number in the current cursor position
container.value.ej2Instances.documentEditor.editor.insertPageNumber();
}
</script><template>
<div id="app">
<ejs-documenteditorcontainer ref="container" :serviceUrl="serviceUrl" height="590px" id="container"
:enableToolbar="true" v-on:created="onCreated.bind(this)"></ejs-documenteditorcontainer>
</div>
</template>
<script>
import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
export default {
components: {
'ejs-documenteditorcontainer': DocumentEditorContainerComponent
},
data() {
return {
serviceUrl:
'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/',
};
},
provide: {
//Inject require modules.
DocumentEditorContainer: [Toolbar]
},
methods: {
onCreated: function () {
// To insert text in cursor position
this.$refs.container.ej2Instances.documentEditor.editor.insertText('Document editor');
// To move the selection to header
this.$refs.container.ej2Instances.documentEditor.selection.goToHeader();
// Insert page number in the current cursor position
this.$refs.container.ej2Instances.documentEditor.editor.insertPageNumber();
}
}
};
</script>The Web API hosted link
https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/utilized in the DOCX Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.
You can also use insertField API in Editor module to insert the page number in the current position.
//Current page number
this.$refs.container.ej2Instances.documentEditor.editor.insertField('PAGE \* MERGEFORMAT', '1');
Get page count
You can use pageCount API 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.
<template>
<div id="app">
<ejs-documenteditorcontainer ref="container" :serviceUrl="serviceUrl" height="590px" id="container"
:enableToolbar="true" v-on:created="onCreated.bind(this)"></ejs-documenteditorcontainer>
</div>
</template>
<script setup>
import { DocumentEditorContainerComponent as EjsDocumenteditorcontainer, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
import { provide, ref } from 'vue';
const container = ref(null);
const serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
//Inject require modules.
provide('DocumentEditorContainer', [Toolbar])
const onCreated = function () {
// To insert text in cursor position
container.value.ej2Instances.documentEditor.editor.insertText('Document editor');
// To get the total number of pages
let pageCount = container.value.ej2Instances.documentEditor.pageCount;
}
</script><template>
<div id="app">
<ejs-documenteditorcontainer ref="container" :serviceUrl="serviceUrl" height="590px" id="container"
:enableToolbar="true" v-on:created="onCreated.bind(this)"></ejs-documenteditorcontainer>
</div>
</template>
<script>
import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
export default {
components: {
'ejs-documenteditorcontainer': DocumentEditorContainerComponent
},
data() {
return {
serviceUrl:
'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/',
};
},
provide: {
//Inject require modules.
DocumentEditorContainer: [Toolbar]
},
methods: {
onCreated: function () {
// To insert text in cursor position
this.$refs.container.ej2Instances.documentEditor.editor.insertText('Document editor');
// To get the total number of pages
let pageCount = this.$refs.container.ej2Instances.documentEditor.pageCount;
}
}
};
</script>The Web API hosted link
https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/utilized in the DOCX Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.
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.
<template>
<div id="app">
<ejs-documenteditorcontainer ref="container" :serviceUrl="serviceUrl" height="590px" id="container"
:enableToolbar="true" v-on:created="onCreated.bind(this)"></ejs-documenteditorcontainer>
</div>
</template>
<script setup>
import { DocumentEditorContainerComponent as EjsDocumenteditorcontainer, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
import { provide, ref } from 'vue';
const container = ref(null);
const serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
//Inject require modules.
provide('DocumentEditorContainer', [Toolbar])
const onCreated = function () {
// To move selection to page number 2
container.value.ej2Instances.documentEditor.selection.goToPage(2);
}
</script><template>
<div id="app">
<ejs-documenteditorcontainer ref="container" :serviceUrl="serviceUrl" height="590px" id="container"
:enableToolbar="true" v-on:created="onCreated.bind(this)"></ejs-documenteditorcontainer>
</div>
</template>
<script>
import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
export default {
components: {
'ejs-documenteditorcontainer': DocumentEditorContainerComponent
},
data() {
return {
serviceUrl:
'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/',
};
},
provide: {
//Inject require modules.
DocumentEditorContainer: [Toolbar]
},
methods: {
onCreated: function () {
// To move selection to page number 2
this.$refs.container.ej2Instances.documentEditor.selection.goToPage(2);
}
}
};
</script>The Web API hosted link
https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/utilized in the DOCX Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.