You can navigate between pages in Syncfusion PDF Viewer in the following ways:
The built-in toolbar of PDF Viewer contains the following page navigation tools:
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.GoToFirstPage();
}
public void OnLastPageClick(MouseEventArgs args)
{
Viewer.GoToLastPage();
}
public void OnNextPageClick(MouseEventArgs args)
{
Viewer.GoToNextPage();
}
public void OnPageClick(MouseEventArgs args)
{
double pageIndex = double.Parse(TextBox.Value.ToString());
Viewer.GoToPage(pageIndex);
}
public void OnPreviousPageClick(MouseEventArgs args)
{
Viewer.GoToPreviousPage();
}
}
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.
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" EnableBookmarkPanel="true"/>
@code{
public string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf";
}
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.
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" EnableThumbnailPanel="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.
Table of contents navigation allows users to navigate to different parts of a PDF file that are listed in the table of contents section.
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";
}