Toolbar Customization in ASP.NET MVC PdfViewer

23 Feb 202320 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 GoToLast 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 PDF viewer 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
  • <div style="width:100%;height:780px;">
        @(Html.EJ().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer"))
            .ToolbarSettings(t=>t.Items(Syncfusion.JavaScript.PdfViewerEnums.ToolbarItems.MagnificationTools)))
    </div>

    The PDF viewer 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
  • <script>
        $(“#pdfviewer).data(ejPdfViewer).showToolbar(false);
    </script>

    Magnification tools

    The magnification tools of the PDF viewer contain ZoomIn, ZoomOut, Zoom, FitPage, and FitWidth tools in the default toolbar. The PDF viewer 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
  • <script>
        $(“#pdfviewer).data(ejPdfViewer).showMagnificationTools(false);
    </script>

    APIs available for Magnification tools

    fitToPage()

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

  • JAVASCRIPT
  • <script>
        $(“#pdfviewer).data(ejPdfViewer).fitToPage();
    </script>

    fitToWidth()

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

  • JAVASCRIPT
  • <script>
        $(“#pdfviewer).data(ejPdfViewer).fitToWidth();
    </script>

    zoomIn()

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

  • JAVASCRIPT
  • <script>
        $(“#pdfviewer).data(ejPdfViewer).zoomIn();
    </script>

    zoomOut()

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

  • JAVASCRIPT
  • <script>
        $(“#pdfviewer).data(ejPdfViewer).zoomOut();
    </script>

    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
  • <script>
        $(“#pdfviewer).data(ejPdfViewer).zoomTo(200);
    </script>

    zoomPercentage

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

  • JAVASCRIPT
  • <script>
        var pdfviewer = $(pdfviewer).data(ejPdfViewer);
        var zoomValue = pdfviewer. zoomPercentage;
    </script>

    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
  • <script>
        $(“#pdfviewer).data(ejPdfViewer).showPageNavigationTools(false);
    </script>

    APIs available for Navigation Tools

    goToPreviousPage()

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

  • JAVASCRIPT
  • <script>
        $(“#pdfviewer).data(ejPdfViewer).goToPreviousPage();
    </script>

    goToNextPage()

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

  • JAVASCRIPT
  • <script>
        $(“#pdfviewer).data(ejPdfViewer).goToNextPage();
    </script>

    goToFirstPage()

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

  • JAVASCRIPT
  • <script>
        $(“#pdfviewer).data(ejPdfViewer).goToFirstPage();
    </script>

    goToLastPage()

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

  • JAVASCRIPT
  • <script>
        $(“#pdfviewer).data(ejPdfViewer).goToLastPage();
    </script>

    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
  • <script>
        $(“#pdfviewer).data(ejPdfViewer).goToPage(4);
    </script>

    Text Markup Annotation Tools

    The text markup annotation tools of the PDF viewer contain strikeout, highlight, and underline tools in the default toolbar. The PDF viewer 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
  • <script>
        $(“#pdfviewer).data(ejPdfViewer).showTextMarkupAnnotationTools(false);
    </script>

    The print tool of the PDF viewer 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 PDF viewer 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
  • <script>
        $(“#pdfviewer).data(ejPdfViewer).showPrintTools(false);
    </script>

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

  • JAVASCRIPT
  • <script>
        $(“#pdfviewer).data(ejPdfViewer).print();
    </script>

    Download Tool

    The download tool of the PDF viewer 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 PDF viewer 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
  • <script>
        $(“#pdfviewer).data(ejPdfViewer).showDownloadTool(false);
    </script>

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

  • JAVASCRIPT
  • <script>
        $(“#pdfviewer).data(ejPdfViewer).download();
    </script>

    Signature tool

    The signature tool of the PDF viewer contains an option to include handwritten signatures in the PDF document. The PDF viewer 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
  • <script>
        $(“#pdfviewer).data(ejPdfViewer).showSignatureTool(false);
    </script>

    Selection tool

    The selection tool of the PDF viewer control contains options for selection and panning interaction modes. The PDF viewer 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
  • <script>
        $(“#pdfviewer).data(ejPdfViewer).showSelectionTool(false);
    </script>

    Text Search tool

    The text search tool of the PDF viewer control is used to initiate and close the text search process in the PDF viewer control. The PDF viewer 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
  • <script>
        $(“#pdfviewer).data(ejPdfViewer).showTextSearchTool(false);
    </script>

    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
  • <script>
    	$("#pdfviewer").data("ejPdfViewer").searchText("name");
    </script>

    searchNext()

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

  • JAVASCRIPT
  • <script>
    	$("#pdfviewer").data("ejPdfViewer").searchNext();
    </script>

    SearchPrevious()

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

  • JAVASCRIPT
  • <script>
    	$("#pdfviewer").data("ejPdfViewer").searchPrevious();
    </script>

    matchCase(enableMatchCase)

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

  • JAVASCRIPT
  • <script>
    	$("#pdfviewer").data("ejPdfViewer").matchCase(true);
    </script>

    cancelSearchText()

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

  • JAVASCRIPT
  • <script>
    	$("#pdfviewer").data("ejPdfViewer").cancelSearchText();
    </script>

    Events in the PDF viewer control

    BeforePrint

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

  • JAVASCRIPT
  • @(Html.EJ().PdfViewer("pdfviewer").ServiceUrl("https://js.syncfusion.com/ejServices/api/PdfViewer").ClientSideEvents(e=>e.BeforePrint(beforePrint)))
    <script type="text/javascript">
            function beforePrint(args) {
                alert("The PDF document is made ready for printing.");
            }
    </script>

    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
  • @(Html.EJ().PdfViewer("pdfviewer").ServiceUrl("https://js.syncfusion.com/ejServices/api/PdfViewer").ClientSideEvents(e=>e.AfterPrint(afterPrint)))
    <script type="text/javascript">
            function afterPrint (args) {
                alert("Printing completed successfully");
            }
    </script>

    ZoomChanged

    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 ZoomChanged property of the control.

  • JAVASCRIPT
  • @(Html.EJ().PdfViewer("pdfviewer").ServiceUrl("https://js.syncfusion.com/ejServices/api/PdfViewer").ClientSideEvents(e=>e.ZoomChanged(zoomChanged)))
    <script type="text/javascript">
            function zoomChanged(args) {
                alert("The magnification changes from " + args.previousZoomPercentage + " to" + args.currentZoomPercentage);
            }
    </script>

    PageClicked

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

  • JAVASCRIPT
  • @(Html.EJ().PdfViewer("pdfviewer").ServiceUrl("https://js.syncfusion.com/ejServices/api/PdfViewer").ClientSideEvents(e=>e.PageClicked(pageClicked)))
    <script type="text/javascript">
            function pageClicked (args) {
                alert("The page is clicked);
            }
    </script>

    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">
            @Html.EJ().PdfViewer("PdfViewer1").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer")).ClientSideEvents(e => e.DocumentLoaded("onDocumentLoad").PageChanged("pageChange"))
        </div>
    </div>
    @(Html.EJ().ScriptManager())
       <script type="text/javascript">
    var currentPageNumber = 1;
        $(function () {
            var pdfviewer = $('#PdfViewer1').data('ejPdfViewer');
            document.getElementById('currentPage').value = 1;
            document.getElementById('totalPageCount').innerHTML = "/" + pdfviewer.pageCount;
            pdfviewer.showToolbar(false);
        });
        function onDocumentLoad() {
            var _ejPdfViewer = $('#PdfViewer1').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 = $('#PdfViewer1').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 = $('#PdfViewer1').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>

    NOTE

    Ensure the icon images available in the referred location for the custom toolbar.

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

    Sample:

    http://www.syncfusion.com/downloads/support/directtrac/general/ze/PdfViewer_CustomToolbar-656684563