Toolbar in EJ2 JavaScript Pdfviewer control

13 Sep 202321 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.,

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2</title>
<!-- Essential JS 2 fabric theme -->
<link href="ej2-pdfviewer/styles/fabric.css" rel="stylesheet" type="text/css"/>
<!-- Essential JS 2 PDF Viewer's global script -->
<script src="dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<!--element which is going to render-->
<div id='container'>
<div id='PdfViewer' style="height:500px;width:100%;">
</div>
</div>
</body>
</html>
  • Show/Hide toolbar using enableToolbar API as in the following code snippet
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>
          <title>Essential JS 2</title>
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/styles/material.css" rel="stylesheet">    
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-pdfviewer/styles/material.css" rel="stylesheet">
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-buttons/styles/material.css" rel="stylesheet">
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet">
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-navigations/styles/material.css" rel="stylesheet">
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-dropdowns/styles/material.css" rel="stylesheet">
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-lists/styles/material.css" rel="stylesheet">
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-inputs/styles/material.css" rel="stylesheet">    
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-splitbuttons/styles/material.css" rel="stylesheet">

            <!-- Essential JS 2 PDF Viewer's global script -->
            <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-pdfviewer/dist/global/ej2-pdfviewer.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/23.1.36/dist/ej2.min.js" type="text/javascript"></script>
       <script src="https://cdn.syncfusion.com/ej2/23.1.36/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
       <body>
            <!--element which is going to render-->
              <div id="container">
                <div id="PdfViewer" style="height:500px;width:100%;">
                </div>
               </div>
            <script>                
               // Initialize PDF Viewer component.
               var pdfviewer = new ej.pdfviewer.PdfViewer({
                    enableToolbar: true,
                    documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
                    serviceUrl: 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer'
                });
               ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation,ej.pdfviewer.Print);
               pdfviewer.appendTo('#PdfViewer');
            </script>
       
  <script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
<button class="preview-sample-button" id="PreviewSampleButton-ubj4wyciwumv2ifgjucka23b62sekexl" onclick="LoadPreviewSample('https://helpej2.syncfusion.com/javascript/documentation/code-snippet/pdfviewer/es5-toolbar/toolbar-hide-cs1-standalone',this.id);">Preview Sample</button>
<div id="PreviewSampleHolder-ubj4wyciwumv2ifgjucka23b62sekexl"></div>
<button class="preview-sample-button" id="PreviewSampleButton-tejjbi88cemf06e2ekjh7r64089ip3vc" onclick="LoadPreviewSample('https://helpej2.syncfusion.com/javascript/documentation/code-snippet/pdfviewer/es5-toolbar/toolbar-hide-cs1',this.id);">Preview Sample</button>
<div id="PreviewSampleHolder-tejjbi88cemf06e2ekjh7r64089ip3vc"></div>
  • Show/Hide toolbar using showToolbar as in the following code snippet
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>
          <title>Essential JS 2</title>
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/styles/material.css" rel="stylesheet">    
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-pdfviewer/styles/material.css" rel="stylesheet">
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-buttons/styles/material.css" rel="stylesheet">
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet">
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-navigations/styles/material.css" rel="stylesheet">
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-dropdowns/styles/material.css" rel="stylesheet">
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-lists/styles/material.css" rel="stylesheet">
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-inputs/styles/material.css" rel="stylesheet">    
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-splitbuttons/styles/material.css" rel="stylesheet">

            <!-- Essential JS 2 PDF Viewer's global script -->
            <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-pdfviewer/dist/global/ej2-pdfviewer.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/23.1.36/dist/ej2.min.js" type="text/javascript"></script>
       <script src="https://cdn.syncfusion.com/ej2/23.1.36/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
       <body>
            <!--element which is going to render-->
              <div id="container">
                <div id="PdfViewer" style="height:500px;width:100%;">
                </div>
               </div>
            <script>                
               // Initialize PDF Viewer component.
               var pdfviewer = new ej.pdfviewer.PdfViewer({
                    documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
                    serviceUrl: 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer'
                });
               ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation,ej.pdfviewer.Print);
               pdfviewer.appendTo('#PdfViewer');
               pdfviewer.toolbar.showToolbar(false);
            </script>
       
  <script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
<button class="preview-sample-button" id="PreviewSampleButton-wxzr9rwkgju6bym8idil8kqv0dx8rq6x" onclick="LoadPreviewSample('https://helpej2.syncfusion.com/javascript/documentation/code-snippet/pdfviewer/es5-toolbar/toolbar-method-cs1-standalone',this.id);">Preview Sample</button>
<div id="PreviewSampleHolder-wxzr9rwkgju6bym8idil8kqv0dx8rq6x"></div>
<button class="preview-sample-button" id="PreviewSampleButton-726rzhivk2uhhy6hd985hdmtgrk0h7q6" onclick="LoadPreviewSample('https://helpej2.syncfusion.com/javascript/documentation/code-snippet/pdfviewer/es5-toolbar/toolbar-method-cs1',this.id);">Preview Sample</button>
<div id="PreviewSampleHolder-726rzhivk2uhhy6hd985hdmtgrk0h7q6"></div>

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.
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>
          <title>Essential JS 2</title>
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/styles/material.css" rel="stylesheet">    
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-pdfviewer/styles/material.css" rel="stylesheet">
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-buttons/styles/material.css" rel="stylesheet">
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet">
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-navigations/styles/material.css" rel="stylesheet">
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-dropdowns/styles/material.css" rel="stylesheet">
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-lists/styles/material.css" rel="stylesheet">
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-inputs/styles/material.css" rel="stylesheet">    
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-splitbuttons/styles/material.css" rel="stylesheet">

            <!-- Essential JS 2 PDF Viewer's global script -->
            <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-pdfviewer/dist/global/ej2-pdfviewer.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/23.1.36/dist/ej2.min.js" type="text/javascript"></script>
       <script src="https://cdn.syncfusion.com/ej2/23.1.36/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
       <body>
            <!--element which is going to render-->
              <div id="container">
                <div id="PdfViewer" style="height:500px;width:100%;">
                </div>
               </div>
            <script>                
               // Initialize PDF Viewer component.
               var pdfviewer = new ej.pdfviewer.PdfViewer({
                    documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
                    serviceUrl: 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer',
                    toolbarSettings: { showTooltip : true, toolbarItem: ['OpenOption']}
                });
               ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation,ej.pdfviewer.Print);
               pdfviewer.appendTo('#PdfViewer');
            </script>
       
  <script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
<button class="preview-sample-button" id="PreviewSampleButton-gh2kybv3rt2qgjtvepp3l7szoode64gz" onclick="LoadPreviewSample('https://helpej2.syncfusion.com/javascript/documentation/code-snippet/pdfviewer/es5-toolbar/toolbar-items-cs1-standalone',this.id);">Preview Sample</button>
<div id="PreviewSampleHolder-gh2kybv3rt2qgjtvepp3l7szoode64gz"></div>
<button class="preview-sample-button" id="PreviewSampleButton-ere63liav4srkr7vjar4vwptu8z0gf0e" onclick="LoadPreviewSample('https://helpej2.syncfusion.com/javascript/documentation/code-snippet/pdfviewer/es5-toolbar/toolbar-items-cs1',this.id);">Preview Sample</button>
<div id="PreviewSampleHolder-ere63liav4srkr7vjar4vwptu8z0gf0e"></div>
  • Show/Hide toolbaritem using showToolbaritem as in the following code snippet
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>
          <title>Essential JS 2</title>
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/styles/material.css" rel="stylesheet">    
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-pdfviewer/styles/material.css" rel="stylesheet">
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-buttons/styles/material.css" rel="stylesheet">
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet">
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-navigations/styles/material.css" rel="stylesheet">
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-dropdowns/styles/material.css" rel="stylesheet">
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-lists/styles/material.css" rel="stylesheet">
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-inputs/styles/material.css" rel="stylesheet">    
          <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-splitbuttons/styles/material.css" rel="stylesheet">

            <!-- Essential JS 2 PDF Viewer's global script -->
            <script src="https://cdn.syncfusion.com/ej2/23.1.36/ej2-pdfviewer/dist/global/ej2-pdfviewer.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/23.1.36/dist/ej2.min.js" type="text/javascript"></script>
       <script src="https://cdn.syncfusion.com/ej2/23.1.36/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
       <body>
            <!--element which is going to render-->
              <div id="container">
                <div id="PdfViewer" style="height:500px;width:100%;">
                </div>
               </div>
            <script>                
               // Initialize PDF Viewer component.
               var pdfviewer = new ej.pdfviewer.PdfViewer({
                    documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
                    serviceUrl: 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer',
                });
                ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation,ej.pdfviewer.Print);
                pdfviewer.appendTo('#PdfViewer');
                pdfviewer.toolbar.showToolbarItem(["OpenOption"],false);
            </script>
       
  <script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
<button class="preview-sample-button" id="PreviewSampleButton-wx8slh486ff8yvx6aixbozz59ablr1dz" onclick="LoadPreviewSample('https://helpej2.syncfusion.com/javascript/documentation/code-snippet/pdfviewer/es5-toolbar/toolbar-items-method-cs1-standalone',this.id);">Preview Sample</button>
<div id="PreviewSampleHolder-wx8slh486ff8yvx6aixbozz59ablr1dz"></div>
<button class="preview-sample-button" id="PreviewSampleButton-fq5qpjn2n39dm5mpx9p2s7qkj6voy13k" onclick="LoadPreviewSample('https://helpej2.syncfusion.com/javascript/documentation/code-snippet/pdfviewer/es5-toolbar/toolbar-items-method-cs1',this.id);">Preview Sample</button>
<div id="PreviewSampleHolder-fq5qpjn2n39dm5mpx9p2s7qkj6voy13k"></div>

See also