Skip to content

Commit 3db069b

Browse files
MuralidharanGSF4527MuralidharanGSF4527
committed
986927: reverted the changes
1 parent fc702f3 commit 3db069b

File tree

7 files changed

+4836
-13
lines changed

7 files changed

+4836
-13
lines changed

‎Document-Processing-toc.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -794,6 +794,8 @@
794794
</ul>
795795
</li>
796796
<li><a href="/document-processing/pdf/pdf-viewer/vue/accessibility">Accessibility</a></li>
797+
<li><a href="/document-processing/pdf/pdf-viewer/vue/toolbar">Toolbar</a></li>
798+
<li><a href="/document-processing/pdf/pdf-viewer/vue/navigation">Navigation</a></li>
797799
<li>Toolbar Customization
798800
<ul>
799801
<li><a href="/document-processing/pdf/pdf-viewer/vue/toolbar-customization/primary-toolbar-customization">Primary Toolbar</a></li>
@@ -851,6 +853,7 @@
851853
<li><a href="/document-processing/pdf/pdf-viewer/vue/organize-pdf/organize-pdf-events">Events</a></li>
852854
</ul>
853855
</li>
856+
<li><a href="/document-processing/pdf/pdf-viewer/vue/organize-pdf">Organize Pages</a></li>
854857
<li><a href="/document-processing/pdf/pdf-viewer/vue/print">Print</a></li>
855858
<li><a href="/document-processing/pdf/pdf-viewer/vue/download">Download</a></li>
856859
<li><a href="/document-processing/pdf/pdf-viewer/vue/event">Events</a></li>
@@ -1102,6 +1105,8 @@
11021105
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/save-pdf-file/to-azure-active-directory">From Azure Active Directory</a></li>
11031106
</ul>
11041107
</li>
1108+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/toolbar">Toolbar</a></li>
1109+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/navigation">Navigation</a></li>
11051110
<li>Toolbar Customization
11061111
<ul>
11071112
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/toolbar-customization/primary-toolbar-customization">Primary Toolbar</a></li>
@@ -1160,6 +1165,7 @@
11601165
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/organize-pdf/organize-pdf-events">Events</a></li>
11611166
</ul>
11621167
</li>
1168+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/organize-pdf">Organize Pages</a></li>
11631169
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/print">Print</a></li>
11641170
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/download">Download</a></li>
11651171
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/event">Event</a></li>

‎Document-Processing/PDF/PDF-Viewer/javascript-es6/navigation.md‎

Lines changed: 336 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: post
33
title: Navigation in TypeScript PDF Viewer | Syncfusion
4-
description: Learn how to navigate PDF documents in the Syncfusion TypeScript PDF Viewer using toolbar controls, bookmarks, thumbnails, and hyperlinks.
4+
description: Learn how to navigate PDF documents using the Syncfusion TypeScript PDF Viewer, including toolbar controls, programmatic navigation, bookmarks, thumbnails, hyperlinks, and table of contents.
55
platform: document-processing
66
control: PDF Viewer
77
documentation: ug
@@ -12,16 +12,345 @@ domainurl: ##DomainURL##
1212

1313
The TypeScript PDF Viewer supports multiple navigation options, including toolbar controls, programmatic commands, bookmarks, thumbnails, hyperlinks, and table of contents.
1414

15-
Available PDF Viewer navigation options:
15+
## Toolbar page navigation option
1616

17-
* [**Toolbar page navigation option**](./interactive-pdf-navigation/page-navigation):- Scroll through the pages and Use the Go to page option in the built-in toolbar.
18-
* [**Bookmark navigation**](./interactive-pdf-navigation/bookmark-navigation):- Select a bookmark in the bookmark panel.
19-
* [**Page Thumbnail navigation**](./interactive-pdf-navigation/page-thumbnail-navigation):- Select a page in the thumbnail panel..
20-
* [**Hyperlink and Table of contents navigation**](./interactive-pdf-navigation/hyperlink-navigation):- Click hyperlinks or entries in the table of contents.
17+
The default toolbar includes the following navigation options:
2118

19+
* [**Go to page**](https://ej2.syncfusion.com/documentation/api/pdfviewer/navigation/#gotopage):- Navigates to the specific page of a PDF document.
20+
* [**Show next page**](https://ej2.syncfusion.com/documentation/api/pdfviewer/navigation/#gotonextpage):- Navigates to the next page of PDF a document.
21+
* [**Show previous page**](https://ej2.syncfusion.com/documentation/api/pdfviewer/navigation/#gotopreviouspage):- Navigates to the previous page of a PDF document.
22+
* [**Show first page**](https://ej2.syncfusion.com/documentation/api/pdfviewer/navigation/#gotofirstpage):- Navigates to the first page of a PDF document.
23+
* [**Show last page**](https://ej2.syncfusion.com/documentation/api/pdfviewer/navigation/#gotolastpage):- Navigates to the last page of a PDF document.
2224

25+
```html
26+
<!DOCTYPE html>
27+
<html lang="en">
28+
29+
<head>
30+
<title>Essential JS 2</title>
31+
<meta charset="utf-8" />
32+
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
33+
<meta name="description" content="Essential JS 2" />
34+
<meta name="author" content="Syncfusion" />
35+
<link rel="shortcut icon" href="resources/favicon.ico" />
36+
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
37+
38+
<!--style reference from app-->
39+
<link href="/styles/styles.css" rel="stylesheet" />
40+
41+
<!--system js reference and configuration-->
42+
<script src="node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
43+
<script src="system.config.js" type="text/javascript"></script>
44+
</head>
45+
46+
<body>
47+
<!--Element which will render as PdfViewer -->
48+
<div id="PdfViewer"></div>
49+
</body>
50+
51+
</html>
52+
```
53+
54+
Enable or disable page navigation using the following configuration:
55+
56+
{% tabs %}
57+
{% highlight ts tabtitle="Standalone" %}
58+
59+
60+
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer';
61+
62+
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection);
63+
64+
let pdfviewer: PdfViewer = new PdfViewer({enableNavigation: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'});
65+
pdfviewer.appendTo('#PdfViewer');
66+
67+
{% endhighlight %}
68+
{% highlight ts tabtitle="Server-Backed" %}
69+
70+
71+
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer';
72+
73+
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection);
74+
75+
let pdfviewer: PdfViewer = new PdfViewer({enableNavigation: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'});
76+
pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
77+
pdfviewer.appendTo('#PdfViewer');
78+
79+
{% endhighlight %}
80+
{% endtabs %}
81+
82+
![PDF Viewer toolbar navigation controls](./images/navigation.png)
83+
84+
You can also perform page navigation programmatically:
85+
86+
```html
87+
<!DOCTYPE html>
88+
<html lang="en">
89+
90+
<head>
91+
<title>Essential JS 2</title>
92+
<meta charset="utf-8" />
93+
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
94+
<meta name="description" content="Essential JS 2" />
95+
<meta name="author" content="Syncfusion" />
96+
<link rel="shortcut icon" href="resources/favicon.ico" />
97+
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
98+
99+
<!--style reference from app-->
100+
<link href="/styles/styles.css" rel="stylesheet" />
101+
102+
<!--system js reference and configuration-->
103+
<script src="node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
104+
<script src="system.config.js" type="text/javascript"></script>
105+
</head>
106+
107+
<body>
108+
<!--Element which will render as PdfViewer -->
109+
<button id="goToFirstPage">Go To First Page</button>
110+
<button id="goToLastPage">Go To last Page</button>
111+
<button id="goToNextPage">Go To Next Page</button>
112+
<button id="goToPage">Go To Page</button>
113+
<button id="goToPreviousPage">Go To Previous Page</button>
114+
<div id="PdfViewer"></div>
115+
</body>
116+
117+
</html>
118+
```
119+
120+
{% tabs %}
121+
{% highlight ts tabtitle="Standalone" %}
122+
123+
import {PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print TextSelection, TextSearch, Annotation, FormFields } from '@syncfusion/ej2-pdfviewer';
124+
125+
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection, TextSearch, Annotation, FormFields );
126+
127+
let viewer: PdfViewer = new PdfViewer();
128+
viewer.appendTo('#pdfViewer');
129+
viewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null);
130+
131+
// Go To First Page
132+
document.getElementById('goToFirstPage').addEventListener('click', () => {
133+
viewer.navigation.goToFirstPage();
134+
});
135+
// Go To Last Page
136+
document.getElementById('goToLastPage').addEventListener('click', () => {
137+
viewer.navigation.goToLastPage();
138+
});
139+
// Go To Next Page
140+
document.getElementById('goToNextPage').addEventListener('click', () => {
141+
viewer.navigation.goToNextPage();
142+
});
143+
// Go To Page
144+
document.getElementById('goToPage').addEventListener('click', () => {
145+
viewer.navigation.goToPage(4);
146+
});
147+
// Go To Previous Page
148+
document.getElementById('goToPreviousPage').addEventListener('click', () => {
149+
viewer.navigation.goToPreviousPage();
150+
});
151+
152+
{% endhighlight %}
153+
{% highlight ts tabtitle="Server-Backed" %}
154+
155+
import {PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print TextSelection, TextSearch, Annotation, FormFields } from '@syncfusion/ej2-pdfviewer';
156+
157+
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection, TextSearch, Annotation, FormFields );
158+
159+
let viewer: PdfViewer = new PdfViewer();
160+
viewer.serviceUrl =
161+
'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
162+
viewer.appendTo('#pdfViewer');
163+
viewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null);
164+
165+
// Go To First Page
166+
document.getElementById('goToFirstPage').addEventListener('click', () => {
167+
viewer.navigation.goToFirstPage();
168+
});
169+
// Go To Last Page
170+
document.getElementById('goToLastPage').addEventListener('click', () => {
171+
viewer.navigation.goToLastPage();
172+
});
173+
// Go To Next Page
174+
document.getElementById('goToNextPage').addEventListener('click', () => {
175+
viewer.navigation.goToNextPage();
176+
});
177+
// Go To Page
178+
document.getElementById('goToPage').addEventListener('click', () => {
179+
viewer.navigation.goToPage(4);
180+
});
181+
// Go To Previous Page
182+
document.getElementById('goToPreviousPage').addEventListener('click', () => {
183+
viewer.navigation.goToPreviousPage();
184+
});
185+
186+
{% endhighlight %}
187+
{% endtabs %}
188+
189+
View the [programmatic navigation sample](https://stackblitz.com/edit/5dqbkd?file=index.ts) for a working example.
190+
191+
## Bookmark navigation
192+
193+
Bookmarks saved in PDF files provide quick navigation. Enable or disable bookmark navigation using the following configuration:
194+
195+
{% tabs %}
196+
{% highlight ts tabtitle="Standalone" %}
197+
198+
199+
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer';
200+
201+
PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection);
202+
203+
let pdfviewer: PdfViewer = new PdfViewer({enableBookmark: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'});
204+
pdfviewer.appendTo('#PdfViewer');
205+
206+
{% endhighlight %}
207+
{% highlight ts tabtitle="Server-Backed" %}
208+
209+
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer';
210+
211+
PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection);
212+
213+
let pdfviewer: PdfViewer = new PdfViewer({enableBookmark: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'});
214+
pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
215+
pdfviewer.appendTo('#PdfViewer');
216+
217+
{% endhighlight %}
218+
{% endtabs %}
219+
220+
![PDF Viewer bookmark panel](./images/bookmark.png)
221+
222+
Use the **goToBookmark** method to navigate to a specific bookmark. The method throws an error if the bookmark does not exist in the document.
223+
224+
Example:
225+
226+
```
227+
<button id="gotobookmark">Specfic Page</button>
228+
```
229+
230+
```ts
231+
document.getElementById('gotobookmark').addEventListener('click', () => {
232+
viewer.bookmark.goToBookmark(x, y);
233+
});
234+
```
235+
236+
x - Specifies the pageIndex for Navigate.
237+
238+
y - Specifies the Y coordinates value of the Page.
239+
240+
Use the **getBookmarks** method to retrieve all bookmarks. The method returns a list of bookmark objects that include metadata for each entry.
241+
242+
Example:
243+
244+
```
245+
<button id="getBookmarks">retrieve bookmark</button>
246+
```
247+
248+
```ts
249+
document.getElementById('getBookmarks').addEventListener('click', () => {
250+
var getBookmarks = viewer.bookmark.getBookmarks();
251+
console.log(getBookmarks)
252+
});
253+
```
254+
255+
## Thumbnail navigation
256+
257+
Thumbnails provide miniature representations of PDF pages for quick navigation. Enable or disable thumbnail navigation using the following configuration:
258+
259+
{% tabs %}
260+
{% highlight ts tabtitle="Standalone" %}
261+
262+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer';
263+
264+
PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection);
265+
266+
let pdfviewer: PdfViewer = new PdfViewer({enableThumbnail: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'});
267+
pdfviewer.appendTo('#PdfViewer');
268+
269+
{% endhighlight %}
270+
{% highlight ts tabtitle="Server-Backed" %}
271+
272+
273+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer';
274+
275+
PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection);
276+
277+
let pdfviewer: PdfViewer = new PdfViewer({enableThumbnail: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'});
278+
pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
279+
pdfviewer.appendTo('#PdfViewer');
280+
281+
{% endhighlight %}
282+
{% endtabs %}
283+
284+
![PDF Viewer thumbnail pane](./images/thumbnail.png)
285+
286+
## Hyperlink navigation
287+
288+
Hyperlink navigation enables users to open URLs embedded in the PDF.
289+
290+
![PDF Viewer hyperlink navigation](./images/link.png)
291+
292+
## Table of content navigation
293+
294+
Table of contents navigation allows users to jump to sections defined in the document outline.
295+
296+
Enable or disable table of contents navigation using the following configuration:
297+
298+
{% tabs %}
299+
{% highlight ts tabtitle="Standalone" %}
300+
301+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer';
302+
303+
PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection);
304+
305+
let pdfviewer: PdfViewer = new PdfViewer({enableHyperlink: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'});
306+
pdfviewer.appendTo('#PdfViewer');
307+
308+
{% endhighlight %}
309+
{% highlight ts tabtitle="Server-Backed" %}
310+
311+
312+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer';
313+
314+
PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection);
315+
316+
let pdfviewer: PdfViewer = new PdfViewer({enableHyperlink: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'});
317+
pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
318+
pdfviewer.appendTo('#PdfViewer');
319+
320+
{% endhighlight %}
321+
{% endtabs %}
322+
323+
Change the hyperlink open state using the following configuration:
324+
325+
{% tabs %}
326+
{% highlight ts tabtitle="Standalone" %}
327+
328+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer';
329+
330+
PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection);
331+
332+
let pdfviewer: PdfViewer = new PdfViewer({enableHyperlink: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', hyperlinkOpenState:'NewTab'});
333+
pdfviewer.appendTo('#PdfViewer');
334+
335+
{% endhighlight %}
336+
{% highlight ts tabtitle="Server-Backed" %}
337+
338+
339+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer';
340+
341+
PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection);
342+
343+
let pdfviewer: PdfViewer = new PdfViewer({enableHyperlink: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', hyperlinkOpenState:'NewTab'});
344+
pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
345+
pdfviewer.appendTo('#PdfViewer');
346+
347+
348+
{% endhighlight %}
349+
{% endtabs %}
350+
351+
![PDF Viewer table of contents panel](./images/toc.png)
23352

24353
## See also
25354

26355
* [Toolbar items](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/toolbar)
27-
* [Feature modules](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/feature-module)
356+
* [Feature modules](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/feature-module)

0 commit comments

Comments
 (0)