Toolbar in Vue Pdfviewer component
11 Nov 202312 minutes to read
The PDF Viewer comes with a powerful built-in toolbar to execute important actions such as page navigation, text search,view mode,download,print,bookmark, and thumbnails.
The following table shows built-in toolbar items and its actions:-
Option | Description |
---|---|
OpenOption | This option provides an action to load the PDF documents to the PDF Viewer. |
PageNavigationTool | This option provides an action to navigate the pages in the PDF Viewer. It contains GoToFirstPage,GoToLastPage,GotoPage,GoToNext, and GoToLast tools. |
MagnificationTool | This option provides an action to magnify the pages either with predefined or user defined zoom factors in the PDF Viewer. Contains ZoomIn, ZoomOut, Zoom, FitPage and FitWidth tools |
PanTool | This option provides an action for panning the pages in the PDF Viewer. |
SelectionTool | This option provides an action to enable/disable the text selection in the PDF Viewer. |
SearchOption | This option provides an action to search a word in the PDF documents. |
PrintOption | This option provides an action to print the PDF document being loaded in the PDF Viewer. |
DownloadOption | This Download option provides an action to download the PDF document that has been loaded in the PDF Viewer. |
UndoRedoTool | This tool provides options to undo and redo the annotation actions performed in the PDF Viewer. |
AnnotationEditTool | This tool provides options to enable or disable the edit mode of annotation in the PDF Viewer. |
FormDesignerEditTool | This tool provides options to enable or disable the edit mode of form fields in the PDF Viewer. |
Show/Hide the default toolbar
The PDF Viewer has an option to show or hide the complete default toolbar. You can achieve this by using following two ways.,
- Show/Hide toolbar using enableToolbar API as in the following code snippet
<template>
<div id="app">
<ejs-pdfviewer
id="pdfViewer"
:documentPath="documentPath"
:enableToolbar="false"
:resourceUrl="resourceUrl">
</ejs-pdfviewer>
</div>
</template>
<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation,
BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
name: 'app',
data () {
return {
documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
resourceUrl:"https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib",
};
},
provide: {
PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner ]}
}
</script>
NOTE
To set up the server-backed PDF Viewer in the app.vue file, include the following
serviceUrl
:
serviceUrl: “https://services.syncfusion.com/vue/production/api/pdfviewer”
Within thetemplate
, configure the PDF Viewer by adding the:serviceUrl="serviceUrl"
attribute inside the <div> element.
- Show/Hide toolbar using showToolbar as in the following code snippet
<template>
<div id="app">
<button v-on:click="showToolbarClicked">showToolbarClicked</button>
<ejs-pdfviewer
id="pdfViewer"
ref="pdfviewer"
:documentPath="documentPath"
:documentLoad="documentLoad"
:resourceUrl="resourceUrl">
</ejs-pdfviewer>
</div>
</template>
<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation,
BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
var viewer;
export default {
name: 'app',
data () {
return {
documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
resourceUrl:"https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib"
};
},
provide: {
PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView,
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner ]},
methods: {
showToolbarClicked: function (args) {
viewer.toolbar.showToolbar(false);
},
documentLoad: function (args) {
viewer = this.$refs.pdfviewer.ej2Instances;
},
}
}
</script>
NOTE
To set up the server-backed PDF Viewer in the app.vue file, include the following
serviceUrl
:
serviceUrl: “https://services.syncfusion.com/vue/production/api/pdfviewer”
Within thetemplate
, configure the PDF Viewer by adding the:serviceUrl="serviceUrl"
attribute inside the <div> element.
Show/Hide the default toolbaritem
The PDF Viewer has an option to show or hide these grouped items in the default toolbar.
- Show/Hide toolbaritem using toolbarSettings as in the following code snippet.
<template>
<div id="app">
<ejs-pdfviewer
id="pdfViewer"
ref="pdfviewer"
:documentPath="documentPath"
:enableTextSelection="false"
:toolbarSettings="toolbarSettings"
:resourceUrl="resourceUrl">
</ejs-pdfviewer>
</div>
</template>
<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation,
BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
name: 'app',
data () {
return {
documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
resourceUrl:"https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib",
toolbarSettings:{ showTooltip : true, toolbarItems: ['OpenOption', 'UndoRedoTool', 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'CommentTool', 'SubmitForm', 'AnnotationEditTool', 'FormDesignerEditTool', 'FreeTextAnnotationOption', 'InkAnnotationOption', 'ShapeAnnotationOption', 'StampAnnotation', 'SignatureOption', 'SearchOption', 'PrintOption', 'DownloadOption'], annotationToolbarItems: ['HighlightTool', 'UnderlineTool', 'StrikethroughTool', 'ColorEditTool', 'OpacityEditTool', 'AnnotationDeleteTool', 'StampAnnotationTool', 'HandWrittenSignatureTool', 'InkAnnotationTool', 'ShapeTool', 'CalibrateTool', 'StrokeColorEditTool', 'ThicknessEditTool', 'FreeTextAnnotationTool', 'FontFamilyAnnotationTool', 'FontSizeAnnotationTool', 'FontStylesAnnotationTool', 'FontAlignAnnotationTool', 'FontColorAnnotationTool', 'CommentPanelTool'], formDesignerToolbarItems: ['TextboxTool', 'PasswordTool', 'CheckBoxTool', 'RadioButtonTool', 'DropdownTool', 'ListboxTool', 'DrawSignatureTool', 'DeleteTool']}
};
},
provide: {
PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView,
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner ]}
}
</script>
NOTE
To set up the server-backed PDF Viewer in the app.vue file, include the following
serviceUrl
:
serviceUrl: “https://services.syncfusion.com/vue/production/api/pdfviewer”
Within thetemplate
, configure the PDF Viewer by adding the:serviceUrl="serviceUrl"
attribute inside the <div> element.
- Show/Hide toolbaritem using showToolbaritem as in the following code snippet
<template>
<div id="app">
<button v-on:click="showToolbarClicked">ShowToolbar</button>
<ejs-pdfviewer
id="pdfViewer"
ref="pdfviewer"
:documentPath="documentPath"
:documentLoad="documentLoad"
:resourceUrl="resourceUrl">
</ejs-pdfviewer>
</div>
</template>
<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation,
BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
var viewer;
export default {
name: 'app',
data () {
return {
documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
resourceUrl:"https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib"
};
},
provide: {
PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView,
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner ]
},
methods: {
showToolbarClicked: function (args) {
viewer.toolbar.showToolbarItem(["OpenOption"],false);
},
documentLoad: function (args) {
viewer = this.$refs.pdfviewer.ej2Instances;
},
}
}
</script>
NOTE
To set up the server-backed PDF Viewer in the app.vue file, include the following
serviceUrl
:
serviceUrl: “https://services.syncfusion.com/vue/production/api/pdfviewer”
Within thetemplate
, configure the PDF Viewer by adding the:serviceUrl="serviceUrl"
attribute inside the <div> element.