Skip to content

Commit ffd6d18

Browse files
BalajiLoganathanSF4826BalajiLoganathanSF4826
committed
984540: JS docs revamp: Reverted changes to navigation.md, organize-pdf.md & toolbar.md
1 parent 8102aca commit ffd6d18

File tree

4 files changed

+1814
-5
lines changed

4 files changed

+1814
-5
lines changed

‎Document-Processing-toc.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -956,6 +956,7 @@
956956
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/save-pdf-file/to-azure-active-directory">To Azure Active Directory</a></li>
957957
</ul>
958958
</li>
959+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/toolbar">Toolbar</a></li>
959960
<li>Toolbar Customization
960961
<ul>
961962
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/toolbar-customization/primary-toolbar-customization">Primary Toolbar</a></li>
@@ -1014,6 +1015,7 @@
10141015
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/organize-pdf/organize-pdf-events">Events</a></li>
10151016
</ul>
10161017
</li>
1018+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/organize-pdf">Organize Pages</a></li>
10171019
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/print">Print</a></li>
10181020
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/download">Download</a></li>
10191021
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/event">Event</a></li>

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

Lines changed: 332 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,339 @@ domainurl: ##DomainURL##
1212

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

22349
## See also
23350

0 commit comments

Comments
 (0)