Toolbar Customization in Javascript PdfViewer

24 Jun 202020 minutes to read

Customizing default toolbar

The default toolbar is grouped into the following set of tools.

MagnificationTools	Contains ZoomIn, ZoomOut, Zoom, FitPage, and FitWidth tools.
NavigationTools	Contains GoToNext and GoToPrevious tools.
PrintTools	Contains print tool.
DownloadTool	Contains download tool.
TextSearchTool	Contains text search tool.
TextMarkupAnnotationTools	Contains text markup annotation tools.
SignatureTool	Contains signature tool.
SelectionTool	Contains selection tool.

The ejPdfViewer control has an option to show or hide these grouped items in the default toolbar. You can hide or display any of these tools by using the toolbarSettings property. The following code snippet describes how to show the magnification tools in the widget.

JAVASCRIPT

$(function () {
    var obj = $("#container").ejPdfViewer({serviceUrl: "../api/PdfViewerAPI", toolbarSettings: {toolbarItems : ej.PdfViewer.ToolbarItems.MagnificationTools}});
});

The ejPdfViewer control also has an option to show or hide the complete default toolbar. You can achieve this by using the showToolbar(bool) method. The following code snippet describes how to hide the default toolbar in the widget.

JAVASCRIPT

$(“#container).data(“ejPdfViewer”).showToolbar(false);

Magnification tools

The magnification tools of the ejPdfViewer contain ZoomIn, ZoomOut, Zoom, FitPage, and FitWidth tools in the default toolbar. The ejPdfViewer control also has an option to show or hide the magnification tools in the default toolbar. You can achieve this by using the showMagnificationTools(bool) method. The following code snippet describes how to hide the magnification tools in the default toolbar in the widget.

JAVASCRIPT

$(“#container).data(“ejPdfViewer”).showMagnificationTools(false);

APIs available for Magnification tools

fitToPage()

You can fit the page size of the PDF document loaded in the ejPdfViewer control using the fitToPage() method.

JAVASCRIPT

$(“#container).data(“ejPdfViewer”).fitToPage();

fitToWidth()

You can fit the page width of the PDF document loaded in the ejPdfViewer control using the fitToWidth() method.

JAVASCRIPT

$(“#container).data(“ejPdfViewer”).fitToWidth();

zoomIn()

You can zoom the PDF document page loaded in the ejPdfViewer control using zoomIn() method. The maximum zoom percentage is 400%.

JAVASCRIPT

$(“#container).data(“ejPdfViewer”).zoomIn();

zoomOut()

You can zoom out the PDF document page loaded in the ejPdfViewer control using the zoomOut() method. The minimum zoom percentage is 50%.

JAVASCRIPT

$(“#container).data(“ejPdfViewer”).zoomOut();

zoomTo(zoomValue)

The PDF document page loaded in the PDF viewer control can be zoomed to a specific value using the zoomTo(zoomValue) method.

JAVASCRIPT

$(“#container).data(“ejPdfViewer”).zoomTo(154);

zoomPercentage

The zoomPercentage property of the PDF viewer control returns the current zoom value of the PDF document.

JAVASCRIPT

var pdfviewer = $("#container").data(“ejPdfViewer”);
    var zoomValue = pdfviewer. zoomPercentage;

zoomChange

When the zoom value of the PDF document is changed using the magnification tools, the zoomChange event will be triggered. We can define the event method using the zoomChange property of the control.

JAVASCRIPT

$(function () {
    $("#container").ejPdfViewer({serviceUrl: "../api/PdfViewerAPI", zoomChange: "zoomChanged" });
});
function zoomChanged(args) {
    alert("The magnification changes from " + args.previousZoomPercentage + " to" + args.currentZoomPercentage);
}

Navigation Tools

The navigation tools of the PDF viewer contain GoToNext, GoToPrevious, and current page number tools in the default toolbar. The PDF viewer control also has an option to show or hide the navigation tools in the default toolbar. You can achieve this by using the showPageNavigationTools(bool) method. The following code snippet describes how to hide the navigation tools in the default toolbar in the widget.

JAVASCRIPT

$(“#container”).data(“ejPdfViewer”).showPageNavigationTools(false);

APIs available for Navigation Tools

goToPreviousPage()

The previous page of the PDF document from the current page can be navigated in the ejPdfViewer using goToPreviousPage() method.

JAVASCRIPT

$(“#container”).data(“ejPdfViewer”).goToPreviousPage();

goToNextPage()

The next page of the PDF document from the current page can be navigated in the ejPdfViewer using the goToNextPage() method.

JAVASCRIPT

$(“#container”).data(“ejPdfViewer”).goToNextPage();

goToFirstPage()

The first page of the PDF document can be navigated in the ejPdfViewer using the goToFirstPage() method.

JAVASCRIPT

$(“#container”).data(“ejPdfViewer”).goToFirstPage();

goToLastPage()

The last page of the PDF document can be navigated in the ejPdfViewer using the goToLastPage() method.

JAVASCRIPT

$(“#container”).data(“ejPdfViewer”).goToLastPage();

goToPage(pageNumber)

The specific page in the PDF document can be navigated using the goToPage(pageNumber) method. If the page is not available for the given pageNumber, the PDF viewer retains the existing page in view.

JAVASCRIPT

$(“#container”).data(“ejPdfViewer”).goToPage(4);

pageClick

When a page of the PDF document is clicked, the pageClick event will be triggered. We can define the event method using the pageClick property of the control.

JAVASCRIPT

$(function () {
    $("#container").ejPdfViewer({serviceUrl: "../api/PdfViewerAPI", pageClick: "pageClicked" });
});
function pageClicked (args) {
    alert("The page is clicked”);
}

Text Markup Annotation Tools

The text markup annotation tools of the ejPdfViewer contain strikeout, highlight, and underline tools in the default toolbar. The ejPdfViewer control also has an option to show or hide the text markup annotation tools in the default toolbar. You can achieve this by using the showTextMarkupAnnotationTools(bool) method. The following code snippet describes how to hide the text markup annotation tools in the default toolbar in the widget.

JAVASCRIPT

$(“#container”).data(“ejPdfViewer”).showTextMarkupAnnotationTools(false);

Print Tool

The print tool of the ejPdfViewer contains an option to print the PDF document. When the print button is clicked, the changes made in the PDF document will be printed along with the document using the browser’s default printer settings. The ejPdfViewer control provides the option to show or hide the print tool in the default toolbar. You can achieve this by using the showPrintTools(bool) method.

JAVASCRIPT

$(“#container”).data(“ejPdfViewer”).showPrintTools(false);

The printing of the PDF document can be achieved in the client side by calling the print() method.

JAVASCRIPT

$(“#container”).data(“ejPdfViewer”).print();

beforePrint

When the print option is clicked, the beforePrint event will be triggered before printing the PDF document from the ejPdfViewer control. We can define the event method using the beforePrint property of the control.

JAVASCRIPT

$(function () {
    $("#container").ejPdfViewer({serviceUrl: "../api/PdfViewerAPI", beforePrint: "beforePrint" });
});
function beforePrint(args) {
    alert("The PDF document is made ready for printing.");
}

afterPrint

After the printing process is completed, the afterPrint event will be triggered. We can define the event method using the afterPrint property of the control.

JAVASCRIPT

$(function () {
    $("#container").ejPdfViewer({serviceUrl: "../api/PdfViewerAPI", afterPrint: "afterPrint" });
});
function afterPrint (args) {
    alert("Printing completed successfully");
}

Download Tool

The download tool of the ejPdfViewer contains an option to download the PDF document. When the download button is clicked, the changes made in the PDF document will be saved in a copy of the original PDF document and it will be downloaded in the browser. The ejPdfViewer control provides the option to show or hide the download tool in the default toolbar. You can achieve this by using the showDownloadTool(bool) method.

JAVASCRIPT

$(“#container”).data(“ejPdfViewer”).showDownloadTool(false);

The PDF document can be downloaded in the client side by calling the download() method.

JAVASCRIPT

$(“#container”).data(“ejPdfViewer”).download();

Signature tool

The signature tool of the ejPdfViewer contains an option to include handwritten signatures in the PDF document. The ejPdfViewer control provides the option to show or hide the signature tool in the default toolbar. You can achieve this by using the showSignatureTool(bool) method.

JAVASCRIPT

$(“#container”).data(“ejPdfViewer”).showSignatureTool(false);

Selection tool

The selection tool of the ejPdfViewer control contains options for selection and panning interaction modes. The ejPdfViewer control provides the option to show or hide the selection tool in the default toolbar. You can achieve this by using the showSelectionTool(bool) method.

JAVASCRIPT

$(“#container”).data(“ejPdfViewer”).showSelectionTool(false);

Text Search tool

The text search tool of the ejPdfViewer control is used to initiate and close the text search process in the control. The ejPdfViewer control provides the option to show or hide the text search tool in the default toolbar. You can achieve this by using the showTextSearchTool(bool) method.

JAVASCRIPT

$(“#container”).data(“ejPdfViewer”).showTextSearchTool(false);

APIs available for Text Search tool

searchText(targetText)

searchText(targetText) method allows us to search the target text in the PDF document and highlights the occurrences in the pages.

JAVASCRIPT

$(“#container”).data("ejPdfViewer").searchText("name");

searchNext()

The next occurrences of the searched text from the current occurrence can be searched using the searchNext() method.

JAVASCRIPT

$(“#container”).data("ejPdfViewer").searchNext();

searchPrevious()

The previous occurrence of the searched text from the current occurrence can be searched using the searchPrevious() method.

JAVASCRIPT

$(“#container”).data("ejPdfViewer").searchPrevious();

matchCase(enableMatchCase)

The target text in the PDF document can be searched with its casing using the matchCase(enableMatchCase) method.

JAVASCRIPT

$(“#container”).data("ejPdfViewer").matchCase(true);

cancelSearchText()

The text search can be canceled and the highlighted occurrences from the ejPdfViewer can be removed using the cancelSearchText() method.

JAVASCRIPT

$(“#container”).data("ejPdfViewer").cancelSearchText();

Adding Custom toolbar

The toolbar can be customized by hiding the existing toolbar.
The following code snippet shows how to create a customer toolbar by using the client side APIs.

HTML

<body>
    <div>
        <div id="toolbarDiv" style="height:38px;width:100%;border:solid black 1px" class="toolbarclass " role="toolbar">
            <div style="float:left; padding:5px;">
                <div class="e-pdfviewer-icon e-pdfviewer-gotoprevious" id="viewer-previous" onclick="callClientSideMethod('previous')"></div>
                <div class="e-pdfviewer-icon e-pdfviewer-gotonext" id="viewer-next" onclick="callClientSideMethod('next')"></div>
                <input id="currentPage" class="e-pdfviewer-pagenumber e-pdfviewer-elementalignments" type="text" onkeypress="updatePageNumber(event)" />
                <span id="totalPageCount" class="e-pdfviewer-labelpageno"></span>
                <div class="e-pdfviewer-icon e-pdfviewer-zoomin" id="viewer-zoomin" onclick="callClientSideMethod('zoomin')"></div>
                <div class="e-pdfviewer-icon e-pdfviewer-zoomout" id="viewer-zoomout" onclick="callClientSideMethod('zoomout')"></div>
                <div class="e-pdfviewer-icon e-pdfviewer-fitwidth" id="viewer-fitwidth" onclick="callClientSideMethod('fitwidth')"></div>
                <div class="e-pdfviewer-icon e-pdfviewer-fitpage" id="viewer-fitpage" onclick="callClientSideMethod('fitpage')"></div>
            </div>
            <div style="float:right; padding:5px;">
                <div class="e-pdfviewer-icon e-pdfviewer-print" id="viewer-print" onclick="callClientSideMethod('print')"></div>
                <div class="e-pdfviewer-icon e-pdfviewer-download" id="viewer-download" onclick="callClientSideMethod('download')"></div>
            </div>
        </div>

        <div style="width:100%;height:780px;margin-top:3px">
            <div id="viewer"></div>
        </div>
    </div>
    <script type="text/javascript">
        var currentPageNumber = 1;
        $(function () {
            $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', documentLoad: "onDocumentLoad", pageChange: "pageChange" });
            var pdfviewer = $('#viewer').data('ejPdfViewer');
            document.getElementById('currentPage').value = 1;
            document.getElementById('totalPageCount').innerHTML = "/" + pdfviewer.pageCount;
            pdfviewer.showToolbar(false);
        });

        function onDocumentLoad() {
            var _ejPdfViewer = $('#viewer').data('ejPdfViewer');
            document.getElementById('totalPageCount').innerHTML = "/" + _ejPdfViewer.pageCount;
        }
        function pageChange(args) {
            currentPageNumber = args.currentPageNumber;
            document.getElementById('currentPage').value = args.currentPageNumber;
        }
        function updatePageNumber(event) {
            var _ejPdfViewer = $('#viewer').data("ejPdfViewer");
            currentPageNumber = document.getElementById('currentPage').value;
            if (event.which == 13) {
                if (currentPageNumber > 0 && currentPageNumber <= _ejPdfViewer.pageCount) {
                    _ejPdfViewer.goToPage(currentPageNumber);
                } else {
                    currentPageNumber = _ejPdfViewer.currentPageNumber;
                }
            }
        }
        function callClientSideMethod(apiName) {
            var _ejPdfViewer = $('#viewer').data("ejPdfViewer");
            switch (apiName) {
                case 'print':
                    _ejPdfViewer.print();
                    break;
                case 'zoomin':
                    _ejPdfViewer.zoomIn();
                    break;
                case 'zoomout':
                    _ejPdfViewer.zoomOut();
                    break;
                case 'fitpage':
                    _ejPdfViewer.fitToPage();
                    break;
                case 'fitwidth':
                    _ejPdfViewer.fitToWidth();
                    break;
                case 'previous':
                    _ejPdfViewer.goToPreviousPage();
                    break;
                case 'next':
                    _ejPdfViewer.goToNextPage();
                    break;
                case 'download':
                    _ejPdfViewer.download();
                    break;
            }
        }
    </script>
    <style>
        #totalPageCount {
            float: none !important;
        }
    </style>
</body>

Run the sample. You can view the PDF viewer with custom toolbar.

Sample:

http://www.syncfusion.com/downloads/support/directtrac/general/ze/PdfViewer_ToolbarCustomization63328491