|
1 | | ---- |
2 | | -layout: post |
3 | | -title: Table of contents navigation in PDF Viewer | Syncfusion |
4 | | -description: Learn how to navigate PDFs using the table of contents in the Syncfusion PDF Viewer control for ASP.NET Core. |
5 | | -platform: document-processing |
6 | | -control: PDF Viewer |
7 | | -publishingplatform: ASP.NET Core |
8 | | -documentation: ug |
9 | | ---- |
10 | | - |
11 | | -# Table of contents navigation in PDF Viewer |
12 | | - |
13 | | -The PDF Viewer supports a built-in table of contents (TOC) experience to help users jump to sections defined by the document’s bookmarks or outline. |
14 | | - |
15 | | -## Table of contents navigation |
16 | | - |
17 | | -Use the table of contents to quickly navigate to headings and sections defined in the PDF. When the document contains a bookmarks/outline structure, the viewer exposes those entries in the table of contents (Bookmarks) pane. Selecting an entry navigates directly to the mapped destination. If the PDF does not include a table of contents, the pane will not list any entries. |
18 | | - |
19 | | - |
20 | | - |
21 | | -## Hyperlink Navigation |
22 | | - |
23 | | -The PDF Viewer provides robust support for hyperlink navigation within PDF documents. This allows users to interact with embedded links, which can point to external websites or other locations within the same document. This section covers how to configure hyperlink behavior, including enabling or disabling links, controlling how they open, and responding to hyperlink-related events. |
24 | | - |
25 | | - |
26 | | - |
27 | | -### Enabling and Disabling Hyperlinks |
28 | | - |
29 | | -By default, the PDF Viewer automatically detects and enables all hyperlinks present in a loaded document. This behavior can be controlled using the `enableHyperlink` property. |
30 | | - |
31 | | -- **Property**: `enableHyperlink` |
32 | | -- **Type**: `boolean` |
33 | | -- **Default**: `true` |
34 | | - |
35 | | -When `enableHyperlink` is set to `false`, all hyperlinks in the document become non-interactive. This means that users cannot click them, and no hyperlink-related events will be triggered. |
36 | | - |
37 | | -The following example demonstrates how to disable hyperlink navigation: |
38 | | - |
39 | | -{% tabs %} |
40 | | -{% highlight html tabtitle="Standalone" %} |
41 | | -```html |
42 | | -<div style="width:100%;height:600px"> |
43 | | - @Html.EJS().PdfViewer("pdfviewer").EnableHyperlink(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() |
44 | | -</div> |
45 | | -``` |
46 | | -{% endhighlight %} |
47 | | -{% highlight html tabtitle="Server-Backed" %} |
48 | | -```html |
49 | | -<div style="width:100%;height:600px"> |
50 | | - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableHyperlink(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() |
51 | | -</div> |
52 | | -``` |
53 | | -{% endhighlight %} |
54 | | -{% endtabs %} |
55 | | - |
56 | | -> Note: Disabling hyperlinks only affects the viewer's behavior and does not alter the original PDF document. |
57 | | -### Controlling Link Behavior |
58 | | - |
59 | | -The `hyperlinkOpenState` property determines how external URLs are opened when a hyperlink is clicked. |
60 | | - |
61 | | -- **Property**: `hyperlinkOpenState` |
62 | | -- **Type**: `'CurrentTab' | 'NewTab'` |
63 | | -- **Default**: `'CurrentTab'` |
64 | | - |
65 | | -By default, links open in the same browser tab (`CurrentTab`). To open links in a new tab, set this property to `'NewTab'`. This is useful for preserving the user's current viewing session. |
66 | | - |
67 | | -The following example configures hyperlinks to open in a new tab: |
68 | | - |
69 | | -{% tabs %} |
70 | | -{% highlight html tabtitle="Standalone" %} |
71 | | -```html |
72 | | -<div style="width:100%;height:600px"> |
73 | | - @Html.EJS().PdfViewer("pdfviewer").HyperlinkOpenState(Syncfusion.EJ2.PdfViewer.LinkTarget.NewTab).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() |
74 | | -</div> |
75 | | -``` |
76 | | -{% endhighlight %} |
77 | | -{% highlight html tabtitle="Server-Backed" %} |
78 | | -```html |
79 | | -<div style="width:100%;height:600px"> |
80 | | - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).HyperlinkOpenState(Syncfusion.EJ2.PdfViewer.LinkTarget.NewTab).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() |
81 | | -</div> |
82 | | -``` |
83 | | -{% endhighlight %} |
84 | | -{% endtabs %} |
85 | | - |
86 | | -### Handling Hyperlink Events |
87 | | - |
88 | | -The PDF Viewer exposes events that allow for monitoring and customizing hyperlink interactions. |
89 | | - |
90 | | -#### hyperlinkClick |
91 | | - |
92 | | -The `hyperlinkClick` event is triggered when a user clicks a hyperlink. This event can be used to implement custom logic, such as validating a URL or preventing the default navigation behavior. |
93 | | - |
94 | | -The event arguments provide the following information: |
95 | | -- `hyperlink`: The URL of the clicked hyperlink. |
96 | | -- `cancel`: A boolean that, when set to `true`, prevents the default navigation action. |
97 | | - |
98 | | -#### hyperlinkMouseOver |
99 | | - |
100 | | -The `hyperlinkMouseOver` event is triggered when the mouse pointer hovers over a hyperlink. This can be used to display custom tooltips or other visual feedback. |
101 | | - |
102 | | -The event arguments include: |
103 | | -- `hyperlinkElement`: The HTML anchor element (`<a>`) corresponding to the hyperlink. |
104 | | - |
105 | | -The following example demonstrates how to use these events: |
106 | | - |
107 | | -{% tabs %} |
108 | | -{% highlight cshtml tabtitle="Standalone" %} |
109 | | - |
110 | | -<div id="e-pv-e-sign-pdfViewer-div"> |
111 | | - @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").HyperlinkClick("hyperlinkClicked").HyperlinkMouseOver("hyperlinkMouseOver").Render() |
112 | | -</div> |
113 | | - |
114 | | -<script> |
115 | | - function hyperlinkClicked(args) { |
116 | | - // Log the URL of the clicked hyperlink |
117 | | - console.log('Hyperlink Clicked:', args.hyperlink); |
118 | | - |
119 | | - // To prevent the default navigation behavior, set args.cancel to true |
120 | | - // args.cancel = true; |
121 | | - } |
122 | | - |
123 | | - function hyperlinkMouseOver(args) { |
124 | | - // Log the URL of the hyperlink being hovered over |
125 | | - console.log('Hyperlink Mouse Over:', args.hyperlinkElement.href); |
126 | | - } |
127 | | -</script> |
128 | | - |
129 | | -{% endhighlight %} |
130 | | -{% highlight cshtml tabtitle="Server-Backed" %} |
131 | | - |
132 | | -<div id="e-pv-e-sign-pdfViewer-div"> |
133 | | - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").HyperlinkClick("hyperlinkClicked").HyperlinkMouseOver("hyperlinkMouseOver").Render() |
134 | | -</div> |
135 | | - |
136 | | -<script> |
137 | | - function hyperlinkClicked(args) { |
138 | | - // Log the URL of the clicked hyperlink |
139 | | - console.log('Hyperlink Clicked:', args.hyperlink); |
140 | | - |
141 | | - // To prevent the default navigation behavior, set args.cancel to true |
142 | | - // args.cancel = true; |
143 | | - } |
144 | | - |
145 | | - function hyperlinkMouseOver(args) { |
146 | | - // Log the URL of the hyperlink being hovered over |
147 | | - console.log('Hyperlink Mouse Over:', args.hyperlinkElement.href); |
148 | | - } |
149 | | -</script> |
150 | | - |
151 | | -{% endhighlight %} |
152 | | -{% endtabs %} |
153 | | - |
154 | | -## See also |
155 | | - |
156 | | -- [Bookmark navigation](./bookmark-navigation.md) |
157 | | -- [Page navigation](./page-navigation.md) |
158 | | -- [Page thumbnail navigation](./page-thumbnail-navigation.md) |
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Hyperlink navigation in ASP.NET MVC PDF Viewer | Syncfusion |
| 4 | +description: Learn how to configure hyperlink navigation, including table-of-contents entries, in the Syncfusion PDF Viewer control for ASP.NET MVC. |
| 5 | +platform: document-processing |
| 6 | +control: PDF Viewer |
| 7 | +publishingplatform: ASP.NET Core |
| 8 | +documentation: ug |
| 9 | +--- |
| 10 | + |
| 11 | +# Hyperlink navigation in ASP.NET MVC PDF Viewer |
| 12 | + |
| 13 | +The PDF Viewer consolidates hyperlink-driven experiences, including inline links and table-of-contents (TOC) entries that target in-document destinations. These elements surface contextual entry points so users can jump directly to relevant sections without manual scrolling. |
| 14 | + |
| 15 | +> **Note:** The table of contents pane and hyperlink interactions rely on the same navigation infrastructure. When these capabilities are enabled, the PDF Viewer automatically surfaces TOC entries and clickable links defined in the PDF. |
| 16 | +
|
| 17 | +## Required modules |
| 18 | + |
| 19 | +Inject the following modules to enable both navigation experiences: `Toolbar`, `Magnification`, `Navigation`, `LinkAnnotation`, `BookmarkView`, `TextSelection`, `ThumbnailView`, and optionally `Annotation`. |
| 20 | + |
| 21 | +## Table of contents navigation |
| 22 | + |
| 23 | +Use the table of contents to quickly navigate to headings and sections defined in the PDF. When the document contains a bookmarks/outline structure, the viewer exposes those entries in the table of contents (Bookmarks) pane. Selecting an entry navigates directly to the mapped destination. If the PDF does not include a table of contents, the pane will not list any entries. |
| 24 | + |
| 25 | + |
| 26 | + |
| 27 | +## Hyperlink Navigation |
| 28 | + |
| 29 | +The PDF Viewer provides robust support for hyperlink navigation within PDF documents. This allows users to interact with embedded links, which can point to external websites or other locations within the same document. This section covers how to configure hyperlink behavior, including enabling or disabling links, controlling how they open, and responding to hyperlink-related events. |
| 30 | + |
| 31 | + |
| 32 | + |
| 33 | +### Enabling and Disabling Hyperlinks |
| 34 | + |
| 35 | +By default, the PDF Viewer automatically detects and enables all hyperlinks present in a loaded document. This behavior can be controlled using the `enableHyperlink` property. |
| 36 | + |
| 37 | +- **Property**: `enableHyperlink` |
| 38 | +- **Type**: `boolean` |
| 39 | +- **Default**: `true` |
| 40 | + |
| 41 | +When `enableHyperlink` is set to `false`, all hyperlinks in the document become non-interactive. This means that users cannot click them, and no hyperlink-related events will be triggered. |
| 42 | + |
| 43 | +The following example demonstrates how to disable hyperlink navigation: |
| 44 | + |
| 45 | +{% tabs %} |
| 46 | +{% highlight html tabtitle="Standalone" %} |
| 47 | +```html |
| 48 | +<div style="width:100%;height:600px"> |
| 49 | + @Html.EJS().PdfViewer("pdfviewer").EnableHyperlink(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() |
| 50 | +</div> |
| 51 | +``` |
| 52 | +{% endhighlight %} |
| 53 | +{% highlight html tabtitle="Server-Backed" %} |
| 54 | +```html |
| 55 | +<div style="width:100%;height:600px"> |
| 56 | + @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableHyperlink(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() |
| 57 | +</div> |
| 58 | +``` |
| 59 | +{% endhighlight %} |
| 60 | +{% endtabs %} |
| 61 | + |
| 62 | +> Note: Disabling hyperlinks only affects the viewer's behavior and does not alter the original PDF document. |
| 63 | +### Controlling Link Behavior |
| 64 | + |
| 65 | +The `hyperlinkOpenState` property determines how external URLs are opened when a hyperlink is clicked. |
| 66 | + |
| 67 | +- **Property**: `hyperlinkOpenState` |
| 68 | +- **Type**: `'CurrentTab' | 'NewTab'` |
| 69 | +- **Default**: `'CurrentTab'` |
| 70 | + |
| 71 | +By default, links open in the same browser tab (`CurrentTab`). To open links in a new tab, set this property to `'NewTab'`. This is useful for preserving the user's current viewing session. |
| 72 | + |
| 73 | +The following example configures hyperlinks to open in a new tab: |
| 74 | + |
| 75 | +{% tabs %} |
| 76 | +{% highlight html tabtitle="Standalone" %} |
| 77 | +```html |
| 78 | +<div style="width:100%;height:600px"> |
| 79 | + @Html.EJS().PdfViewer("pdfviewer").HyperlinkOpenState(Syncfusion.EJ2.PdfViewer.LinkTarget.NewTab).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() |
| 80 | +</div> |
| 81 | +``` |
| 82 | +{% endhighlight %} |
| 83 | +{% highlight html tabtitle="Server-Backed" %} |
| 84 | +```html |
| 85 | +<div style="width:100%;height:600px"> |
| 86 | + @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).HyperlinkOpenState(Syncfusion.EJ2.PdfViewer.LinkTarget.NewTab).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() |
| 87 | +</div> |
| 88 | +``` |
| 89 | +{% endhighlight %} |
| 90 | +{% endtabs %} |
| 91 | + |
| 92 | +### Handling Hyperlink Events |
| 93 | + |
| 94 | +The PDF Viewer exposes events that allow for monitoring and customizing hyperlink interactions. |
| 95 | + |
| 96 | +#### hyperlinkClick |
| 97 | + |
| 98 | +The `hyperlinkClick` event is triggered when a user clicks a hyperlink. This event can be used to implement custom logic, such as validating a URL or preventing the default navigation behavior. |
| 99 | + |
| 100 | +The event arguments provide the following information: |
| 101 | +- `hyperlink`: The URL of the clicked hyperlink. |
| 102 | +- `cancel`: A boolean that, when set to `true`, prevents the default navigation action. |
| 103 | + |
| 104 | +#### hyperlinkMouseOver |
| 105 | + |
| 106 | +The `hyperlinkMouseOver` event is triggered when the mouse pointer hovers over a hyperlink. This can be used to display custom tooltips or other visual feedback. |
| 107 | + |
| 108 | +The event arguments include: |
| 109 | +- `hyperlinkElement`: The HTML anchor element (`<a>`) corresponding to the hyperlink. |
| 110 | + |
| 111 | +The following example demonstrates how to use these events: |
| 112 | + |
| 113 | +{% tabs %} |
| 114 | +{% highlight cshtml tabtitle="Standalone" %} |
| 115 | + |
| 116 | +<div id="e-pv-e-sign-pdfViewer-div"> |
| 117 | + @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").HyperlinkClick("hyperlinkClicked").HyperlinkMouseOver("hyperlinkMouseOver").Render() |
| 118 | +</div> |
| 119 | + |
| 120 | +<script> |
| 121 | + function hyperlinkClicked(args) { |
| 122 | + // Log the URL of the clicked hyperlink |
| 123 | + console.log('Hyperlink Clicked:', args.hyperlink); |
| 124 | + |
| 125 | + // To prevent the default navigation behavior, set args.cancel to true |
| 126 | + // args.cancel = true; |
| 127 | + } |
| 128 | + |
| 129 | + function hyperlinkMouseOver(args) { |
| 130 | + // Log the URL of the hyperlink being hovered over |
| 131 | + console.log('Hyperlink Mouse Over:', args.hyperlinkElement.href); |
| 132 | + } |
| 133 | +</script> |
| 134 | + |
| 135 | +{% endhighlight %} |
| 136 | +{% highlight cshtml tabtitle="Server-Backed" %} |
| 137 | + |
| 138 | +<div id="e-pv-e-sign-pdfViewer-div"> |
| 139 | + @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").HyperlinkClick("hyperlinkClicked").HyperlinkMouseOver("hyperlinkMouseOver").Render() |
| 140 | +</div> |
| 141 | + |
| 142 | +<script> |
| 143 | + function hyperlinkClicked(args) { |
| 144 | + // Log the URL of the clicked hyperlink |
| 145 | + console.log('Hyperlink Clicked:', args.hyperlink); |
| 146 | + |
| 147 | + // To prevent the default navigation behavior, set args.cancel to true |
| 148 | + // args.cancel = true; |
| 149 | + } |
| 150 | + |
| 151 | + function hyperlinkMouseOver(args) { |
| 152 | + // Log the URL of the hyperlink being hovered over |
| 153 | + console.log('Hyperlink Mouse Over:', args.hyperlinkElement.href); |
| 154 | + } |
| 155 | +</script> |
| 156 | + |
| 157 | +{% endhighlight %} |
| 158 | +{% endtabs %} |
| 159 | + |
| 160 | +## See also |
| 161 | + |
| 162 | +- [Bookmark navigation](./bookmark-navigation) |
| 163 | +- [Page navigation](./page-navigation) |
| 164 | +- [Page thumbnail navigation](./page-thumbnail-navigation) |
0 commit comments