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>

Print Tool

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