Insert page number and navigate to page in Vue Document editor component
16 Mar 20234 minutes to read
You can insert page number and navigate to specific page in Vue 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.
<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 Vue from 'vue';
import {
DocumentEditorContainerPlugin,
DocumentEditorContainerComponent,
Toolbar,
} from '@syncfusion/ej2-vue-documenteditor';
Vue.use(DocumentEditorContainerPlugin);
export default {
data() {
return {
serviceUrl:
'https://ej2services.syncfusion.com/production/web-services/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>
Also, you use insertField
API in Editor module to insert the Page number in current position
//Current page number
this.$refs.container.ej2Instances.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.
<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 Vue from 'vue';
import {
DocumentEditorContainerPlugin,
DocumentEditorContainerComponent,
Toolbar,
} from '@syncfusion/ej2-vue-documenteditor';
Vue.use(DocumentEditorContainerPlugin);
export default {
data() {
return {
serviceUrl:
'https://ej2services.syncfusion.com/production/web-services/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>
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>
import Vue from 'vue';
import {
DocumentEditorContainerPlugin,
DocumentEditorContainerComponent,
Toolbar,
} from '@syncfusion/ej2-vue-documenteditor';
Vue.use(DocumentEditorContainerPlugin);
export default {
data() {
return {
serviceUrl:
'https://ej2services.syncfusion.com/production/web-services/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>