HelpBot Assistant

How can I help you?

Page navigation in ASP.NET Core PDF Viewer

28 Feb 20266 minutes to read

The ASP.NET Core PDF Viewer supports internal page navigation via toolbar controls, thumbnails, bookmarks, and programmatic APIs.

Toolbar page navigation option

The default toolbar of PDF Viewer contains the following navigation options

  • Go to page :- Navigates to the specific page of a PDF document.
  • Show next page :- Navigates to the next page of PDF a document.
  • Show previous page :- Navigates to the previous page of a PDF document.
  • Show first page :- Navigates to the first page of a PDF document.
  • Show last page :- Navigates to the last page of a PDF document.

Page navigation can be enabled or disabled in PDF Viewer using the following code snippet.

Example: Enable navigation:

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   enableNavigation="true">
    </ejs-pdfviewer>
</div>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   serviceUrl='/Index'
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   enableNavigation="true">
    </ejs-pdfviewer>
</div>

Alt text

Programmatic page navigation

The following examples show how to navigate pages programmatically using the PDF Viewer navigation APIs.

Example: Programmatic page navigation

<button id="goToFirstPage" onclick="goToFirstPage()">Go To First Page</button>
<button id="goToLastPage" onclick="goToLastPage()">Go To last Page</button>
<button id="goToNextPage" onclick="goToNextPage()">Go To Next Page</button>
<button id="goToPage" onclick="goToPage()">Go To Page</button>
<button id="goToPreviousPage" onclick="goToPreviousPage()">Go To Previous Page</button>

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>

<script>
    function goToFirstPage() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.navigation.goToFirstPage();
    }
    function goToLastPage() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.navigation.goToLastPage();
    }
    function goToNextPage() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.navigation.goToNextPage();
    }
    function goToPage() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.navigation.goToPage(4);
    }
    function goToPreviousPage() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.navigation.goToPreviousPage();
    }
</script>
<button id="goToFirstPage" onclick="goToFirstPage()">Go To First Page</button>
<button id="goToLastPage" onclick="goToLastPage()">Go To last Page</button>
<button id="goToNextPage" onclick="goToNextPage()">Go To Next Page</button>
<button id="goToPage" onclick="goToPage()">Go To Page</button>
<button id="goToPreviousPage" onclick="goToPreviousPage()">Go To Previous Page</button>

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>

<script>
    function goToFirstPage() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.navigation.goToFirstPage();
    }
    function goToLastPage() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.navigation.goToLastPage();
    }
    function goToNextPage() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.navigation.goToNextPage();
    }
    function goToPage() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.navigation.goToPage(4);
    }
    function goToPreviousPage() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.navigation.goToPreviousPage();
    }
</script>

See also