Blazor
Demos
Support
Forum
Download
Search results

Navigation in Blazor PDF Viewer component

You can navigate between pages in Syncfusion PDF Viewer in the following ways:

  • Scroll through the pages.
  • Click Go to pages in the built-in toolbar.
  • Click the desired bookmark in bookmark pane.
  • Click the desired page in thumbnail pane.
  • Click hyperlink and table of contents.

Page navigation

The built-in toolbar of PDF Viewer contains the following page navigation tools:

  • First Page: Navigates you to the first page in the document.
  • Last Page: Navigates you to the last page in the document.
  • Next Page: Scrolls forwards through pages, one page at a time.
  • Go To: Allows you to quickly jump to the desired page number.
  • Previous Page: Scrolls backwards through pages, one page at a time.

Alt Text

You can enable or disable the page navigation option in PDF Viewer default toolbar by setting the EnableNavigation property.

@using Syncfusion.Blazor.PdfViewerServer

<SfPdfViewerServer Width="1060px" Height="500px" DocumentPath="@DocumentPath" EnableNavigation="false" />

@code{
    public string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf";
}

Also, you can programmatically perform page navigation as follows.

@using Syncfusion.Blazor.PdfViewerServer
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Inputs

<div style="display:inline-block">
    <SfButton OnClick="OnFirstPageClick">Go To First Page</SfButton>
</div>
<div style="display:inline-block">
    <SfButton OnClick="OnLastPageClick">Go To Last Page</SfButton>
</div>
<div style="display:inline-block">
    <SfButton OnClick="OnNextPageClick">Go To Next Page</SfButton>
</div>
<div style="display:inline-block">
    <SfTextBox @ref="@TextBox"></SfTextBox>
</div>
<div style="display:inline-block;">
    <SfButton OnClick="OnPageClick">Go To Page</SfButton>
</div>
<div style="display:inline-block">
    <SfButton OnClick="OnPreviousPageClick">Go To Previous Page</SfButton>
</div>

<SfPdfViewerServer Width="1060px" Height="500px" DocumentPath="@DocumentPath" @ref="@Viewer" />

@code{
    SfPdfViewerServer Viewer;
    SfTextBox TextBox;
    public string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf";

    public void OnFirstPageClick(MouseEventArgs args)
    {
        Viewer.GetNavigation().GoToFirstPage();
    }

    public void OnLastPageClick(MouseEventArgs args)
    {
        Viewer.GetNavigation().GoToLastPage();
    }

    public void OnNextPageClick(MouseEventArgs args)
    {
        Viewer.GetNavigation().GoToNextPage();
    }

    public void OnPageClick(MouseEventArgs args)
    {
        double pageIndex =  double.Parse(TextBox.Value.ToString());
        Viewer.GetNavigation().GoToPage(pageIndex);
    }

    public void OnPreviousPageClick(MouseEventArgs args)
    {
        Viewer.GetNavigation().GoToPreviousPage();
    }
}

Bookmark navigation

The bookmarks saved in PDF files are loaded and listed in the bookmark pane (in the left navigation pane). The users can jump to areas of interest by clicking the desired bookmark easily.

Bookmark Navigation

You can enable or disable the bookmark navigation pane by setting the EnableBookmark property.

@using Syncfusion.Blazor.PdfViewerServer

<SfPdfViewerServer Width="1060px" Height="500px" DocumentPath="@DocumentPath" EnableBookmark="true"/>

@code{
    public string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf";
}

Page thumbnail navigation

Page thumbnails is the miniature representation of actual pages in the PDF files. This feature displays thumbnails of the pages and represents a link to the respective pages. Clicking a page thumbnail will display the respective page in the document view.

Thumbnail View

You can enable or disable the thumbnail navigation pane by setting the EnableThumbnail property.

@using Syncfusion.Blazor.PdfViewerServer

<SfPdfViewerServer Width="1060px" Height="500px" DocumentPath="@DocumentPath" EnableThumbnail="true"/>

@code{
    public string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf";
}

Hyperlink navigation features enables navigation to the URLs (website links) in a PDF file.

Hyperlink navigation

Table of content navigation

Table of contents navigation allows users to navigate to different parts of a PDF file that are listed in the table of contents section.

Table of content

You can enable or disable both hyperlink and table of content navigation by setting the EnableHyperlink property.

@using Syncfusion.Blazor.PdfViewerServer

<SfPdfViewerServer Width="1060px" Height="500px" DocumentPath="@DocumentPath" EnableHyperlink="true"/>

@code{
    public string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf";
}

You can set the target attribute for a hyperlink in PDF Viewer using the HyperlinkOpenState property.

@using Syncfusion.Blazor.PdfViewer
@using Syncfusion.Blazor.PdfViewerServer

<SfPdfViewerServer Width="1060px" Height="500px" DocumentPath="@DocumentPath" EnableHyperlink="true" HyperlinkOpenState="LinkTarget.NewTab"/>

@code{
    public string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf";
}
Previous
Next