Skip to content

Commit 61de2f3

Browse files
BalajiLoganathanSF4826BalajiLoganathanSF4826
committed
984540: JS documentation restructuring - navigation module
1 parent caecd92 commit 61de2f3

File tree

4 files changed

+527
-0
lines changed

4 files changed

+527
-0
lines changed

‎Document-Processing/PDF/PDF-Viewer/javascript-es5/interactive-pdf-navigation/bookmark-navigation.md‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
---
2+
layout: post
3+
title: Navigation in JavaScript Pdfviewer control | Syncfusion
4+
description: Learn here all about Navigation in Syncfusion JavaScript Pdfviewer control of Syncfusion Essential JS 2 and more.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Bookmark navigation in JavaScript PDF Viewer control
12+
13+
The Bookmarks saved in PDF files are loaded and made ready for easy navigation.
14+
You can enable/disable bookmark navigation by using the following code snippet.,
15+
16+
{% tabs %}
17+
{% highlight js tabtitle="Standalone" %}
18+
19+
ej.pdfviewer.PdfViewer.Inject(
20+
ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.Annotation,
21+
ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection
22+
);
23+
24+
var pdfviewer = new ej.pdfviewer.PdfViewer({
25+
enableBookmark: true,
26+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'
27+
});
28+
pdfviewer.appendTo('#PdfViewer');
29+
30+
{% endhighlight %}
31+
{% highlight js tabtitle="Server-Backed" %}
32+
33+
ej.pdfviewer.PdfViewer.Inject(
34+
ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.Annotation,
35+
ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection
36+
);
37+
38+
var pdfviewer = new ej.pdfviewer.PdfViewer({
39+
enableBookmark: true,
40+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'
41+
});
42+
pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
43+
pdfviewer.appendTo('#PdfViewer');
44+
45+
{% endhighlight %}
46+
{% endtabs %}
47+
48+
![Bookmarks panel](../images/bookmark.png)
49+
50+
To perform bookmark navigation, you can use the **goToBookmark** method. It's important to note that the **goToBookmark** method will throw an error if the specified bookmark does not exist in the PDF document.
51+
52+
Here is an example of how to use the **goToBookmark** method:
53+
54+
```
55+
<button id="gotobookmark">Specfic Page</button>
56+
```
57+
58+
```js
59+
document.getElementById('gotobookmark').addEventListener('click', () => {
60+
viewer.bookmark.goToBookmark(x, y);
61+
});
62+
```
63+
64+
x - Specifies the pageIndex for Navigate.
65+
66+
y - Specifies the Y coordinates value of the Page.
67+
68+
Also, you can use the **getBookmarks** method to retrieve a list of all the bookmarks in a PDF document. This method returns a List of Bookmark objects, which contain information about each bookmark.
69+
70+
Here is an example of how to use the getBookmarks method:
71+
72+
```
73+
<button id="getBookmarks">retrieve bookmark</button>
74+
```
75+
76+
```js
77+
document.getElementById('getBookmarks').addEventListener('click', () => {
78+
var getBookmarks = viewer.bookmark.getBookmarks();
79+
console.log(getBookmarks)
80+
});
81+
```
82+
83+
## See also
84+
85+
* [Toolbar items](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/toolbar/)
86+
* [Feature modules](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/feature-module/)

‎Document-Processing/PDF/PDF-Viewer/javascript-es5/interactive-pdf-navigation/page-navigation.md‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
---
2+
layout: post
3+
title: Navigation in JavaScript Pdfviewer control | Syncfusion
4+
description: Learn here all about Navigation in Syncfusion JavaScript Pdfviewer control of Syncfusion Essential JS 2 and more.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Navigation in JavaScript PDF Viewer control
12+
13+
The JavaScript PDF Viewer supports different internal and external navigations.
14+
15+
## Toolbar page navigation option
16+
17+
The default toolbar of PDF Viewer contains the following navigation options
18+
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.
24+
25+
```html
26+
<html>
27+
<head>
28+
<script src="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2.min.js" type="text/javascript"></script>
29+
<link href="https://cdn.syncfusion.com/ej2/31.2.2/tailwind3.css" rel="stylesheet" />
30+
</head>
31+
<body>
32+
<div class="container">
33+
<div id="pdfViewer" style="height: 640px; width: 100%"></div>
34+
</div>
35+
</body>
36+
</html>
37+
```
38+
39+
You can enable/disable page navigation option in PDF Viewer using the following code snippet.,
40+
41+
{% tabs %}
42+
{% highlight js tabtitle="Standalone" %}
43+
44+
ej.pdfviewer.PdfViewer.Inject(
45+
ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation,
46+
ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView,
47+
ej.pdfviewer.TextSelection
48+
);
49+
50+
var pdfviewer = new ej.pdfviewer.PdfViewer({
51+
enableNavigation: true,
52+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'
53+
});
54+
55+
pdfviewer.appendTo('#PdfViewer');
56+
57+
{% endhighlight %}
58+
{% highlight js tabtitle="Server-Backed" %}
59+
60+
var pdfviewer = new ej.pdfviewer.PdfViewer({
61+
enableNavigation: true,
62+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'
63+
});
64+
65+
ej.pdfviewer.PdfViewer.Inject(
66+
ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection
67+
);
68+
69+
pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
70+
pdfviewer.appendTo('#PdfViewer');
71+
72+
{% endhighlight %}
73+
{% endtabs %}
74+
75+
![page navigation in toolbar](../images/navigation.png)
76+
77+
Also, you can programmatically perform page navigation options as follows.
78+
79+
```html
80+
<html>
81+
<head>
82+
<script src="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2.min.js" type="text/javascript"></script>
83+
<link href="https://cdn.syncfusion.com/ej2/31.2.2/tailwind3.css" rel="stylesheet" />
84+
</head>
85+
<body>
86+
<div class="container">
87+
<button id="goToFirstPage">Go To First Page</button>
88+
<button id="goToLastPage">Go To last Page</button>
89+
<button id="goToNextPage">Go To Next Page</button>
90+
<button id="goToPage">Go To Page 4</button>
91+
<button id="goToPreviousPage">Go To Previous Page</button>
92+
<div id="pdfViewer" style="height: 640px; width: 100%"></div>
93+
</div>
94+
</body>
95+
</html>
96+
```
97+
98+
{% tabs %}
99+
{% highlight js tabtitle="Standalone" %}
100+
101+
var viewer = new ej.pdfviewer.PdfViewer ({
102+
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
103+
resourceUrl:'https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib'
104+
});
105+
106+
ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.BookmarkView,
107+
ej.pdfviewer.ThumbnailView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print,
108+
ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.Annotation, ej.pdfviewer.FormFields,
109+
ej.pdfviewer.FormDesigner,ej.pdfviewer.PageOrganizer
110+
);
111+
112+
viewer.appendTo('#pdfViewer');
113+
114+
// Go To First Page
115+
document.getElementById('goToFirstPage').addEventListener('click', () => {
116+
viewer.navigation.goToFirstPage();
117+
});
118+
// Go To Last Page
119+
document.getElementById('goToLastPage').addEventListener('click', () => {
120+
viewer.navigation.goToLastPage();
121+
});
122+
// Go To Next Page
123+
document.getElementById('goToNextPage').addEventListener('click', () => {
124+
viewer.navigation.goToNextPage();
125+
});
126+
// Go To Page
127+
document.getElementById('goToPage').addEventListener('click', () => {
128+
viewer.navigation.goToPage(4);
129+
});
130+
// Go To Previous Page
131+
document.getElementById('goToPreviousPage').addEventListener('click', () => {
132+
viewer.navigation.goToPreviousPage();
133+
});
134+
135+
{% endhighlight %}
136+
{% highlight js tabtitle="Server-Backed" %}
137+
138+
var viewer = new ej.pdfviewer.PdfViewer ({
139+
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
140+
resourceUrl:'https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib'
141+
});
142+
143+
ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.BookmarkView,
144+
ej.pdfviewer.ThumbnailView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print,
145+
ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation, ej.pdfviewer.Annotation, ej.pdfviewer.FormFields,
146+
ej.pdfviewer.FormDesigner, ej.pdfviewer.PageOrganizer
147+
);
148+
149+
viewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
150+
viewer.appendTo('#pdfViewer');
151+
152+
// Go To First Page
153+
document.getElementById('goToFirstPage').addEventListener('click', () => {
154+
viewer.navigation.goToFirstPage();
155+
});
156+
// Go To Last Page
157+
document.getElementById('goToLastPage').addEventListener('click', () => {
158+
viewer.navigation.goToLastPage();
159+
});
160+
// Go To Next Page
161+
document.getElementById('goToNextPage').addEventListener('click', () => {
162+
viewer.navigation.goToNextPage();
163+
});
164+
// Go To Page
165+
document.getElementById('goToPage').addEventListener('click', () => {
166+
viewer.navigation.goToPage(4);
167+
});
168+
// Go To Previous Page
169+
document.getElementById('goToPreviousPage').addEventListener('click', () => {
170+
viewer.navigation.goToPreviousPage();
171+
});
172+
173+
{% endhighlight %}
174+
{% endtabs %}
175+
176+
Find the sample [here](https://stackblitz.com/edit/kpzmjpf7?file=index.js) to perform the page navigation options programmatically.
177+
178+
## See also
179+
180+
* [Toolbar items](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/toolbar/)
181+
* [Feature modules](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/feature-module/)

‎Document-Processing/PDF/PDF-Viewer/javascript-es5/interactive-pdf-navigation/page-thumbnail-navigation.md‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
---
2+
layout: post
3+
title: Navigation in JavaScript Pdfviewer control | Syncfusion
4+
description: Learn here all about Navigation in Syncfusion JavaScript Pdfviewer control of Syncfusion Essential JS 2 and more.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Page Thumbnail navigation in JavaScript PDF Viewer control
12+
13+
Thumbnails is the miniature representation of actual pages in PDF files. This feature displays thumbnails of the pages and allows navigation.
14+
You can enable/disable thumbnail navigation by using the following code snippet.,
15+
16+
{% tabs %}
17+
{% highlight js tabtitle="Standalone" %}
18+
19+
20+
ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification,
21+
ej.pdfviewer.Navigation, ej.pdfviewer.Annotation, ej.pdfviewer.LinkAnnotation,
22+
ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection);
23+
24+
var pdfviewer = new ej.pdfviewer.PdfViewer({
25+
enableThumbnail: true,
26+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'
27+
});
28+
pdfviewer.appendTo('#PdfViewer');
29+
30+
{% endhighlight %}
31+
{% highlight js tabtitle="Server-Backed" %}
32+
33+
34+
ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification,
35+
ej.pdfviewer.Navigation, ej.pdfviewer.Annotation, ej.pdfviewer.LinkAnnotation,
36+
ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection);
37+
38+
var pdfviewer = new ej.pdfviewer.PdfViewer({
39+
enableThumbnail: true,
40+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'
41+
});
42+
pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
43+
pdfviewer.appendTo('#PdfViewer');
44+
45+
{% endhighlight %}
46+
{% endtabs %}
47+
48+
![Alt text](../images/thumbnail.png)
49+
50+
51+
## See also
52+
53+
* [Toolbar items](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/toolbar/)
54+
* [Feature Modules](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/feature-module/)

0 commit comments

Comments
 (0)