|
1 | | ---- |
2 | | -layout: post |
3 | | -title: Navigation in ASP.NET Core PDF Viewer control | Syncfusion |
4 | | -description: Learn here all about Navigation in Syncfusion ASP.NET Core PDF Viewer control of Syncfusion Essential JS 2 and more. |
5 | | -platform: document-processing |
6 | | -control: PDF Viewer |
7 | | -publishingplatform: ASP.NET Core |
8 | | -documentation: ug |
9 | | ---- |
10 | | - |
11 | | -# Bookmark navigation |
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 cshtml tabtitle="Standalone" %} |
18 | | - |
19 | | -<div style="width:100%;height:600px"> |
20 | | - <ejs-pdfviewer id="pdfviewer" |
21 | | - documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" |
22 | | - enableBookmark="true"> |
23 | | - </ejs-pdfviewer> |
24 | | -</div> |
25 | | - |
26 | | -{% endhighlight %} |
27 | | -{% highlight cshtml tabtitle="Server-Backed" %} |
28 | | - |
29 | | -<div style="width:100%;height:600px"> |
30 | | - <ejs-pdfviewer id="pdfviewer" |
31 | | - serviceUrl='/Index' |
32 | | - documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" |
33 | | - enableBookmark="true"> |
34 | | - </ejs-pdfviewer> |
35 | | -</div> |
36 | | - |
37 | | -{% endhighlight %} |
38 | | -{% endtabs %} |
39 | | - |
40 | | - |
41 | | - |
42 | | -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. |
43 | | - |
44 | | -Here is an example of how to use the **goToBookmark** method: |
45 | | - |
46 | | -{% tabs %} |
47 | | -{% highlight cshtml tabtitle="Standalone" %} |
48 | | - |
49 | | -<button id="gotobookmark" onclick="gotobookmark()">Specfic Page</button> |
50 | | - |
51 | | -<div style="width:100%;height:600px"> |
52 | | - <ejs-pdfviewer id="pdfviewer" |
53 | | - style="height:600px" |
54 | | - documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"> |
55 | | - </ejs-pdfviewer> |
56 | | -</div> |
57 | | - |
58 | | -<script> |
59 | | - function gotobookmark() { |
60 | | - var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0]; |
61 | | - pdfViewer.bookmark.goToBookmark(3, 2); |
62 | | - } |
63 | | -</script> |
64 | | - |
65 | | -{% endhighlight %} |
66 | | -{% highlight cshtml tabtitle="Server-Backed" %} |
67 | | - |
68 | | -<button id="gotobookmark" onclick="gotobookmark()">Specfic Page</button> |
69 | | - |
70 | | -<div style="width:100%;height:600px"> |
71 | | - <ejs-pdfviewer id="pdfviewer" |
72 | | - style="height:600px" |
73 | | - serviceUrl="/api/PdfViewer" |
74 | | - documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"> |
75 | | - </ejs-pdfviewer> |
76 | | -</div> |
77 | | - |
78 | | -<script> |
79 | | - function gotobookmark() { |
80 | | - var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0]; |
81 | | - pdfViewer.bookmark.goToBookmark(3, 2); |
82 | | - } |
83 | | -</script> |
84 | | - |
85 | | -{% endhighlight %} |
86 | | -{% endtabs %} |
87 | | - |
88 | | -x - Specifies the pageIndex for Navigate. |
89 | | - |
90 | | -y - Specifies the Y coordinates value of the Page. |
91 | | - |
92 | | -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. |
93 | | - |
94 | | -Here is an example of how to use the getBookmarks method: |
95 | | - |
96 | | -{% tabs %} |
97 | | -{% highlight cshtml tabtitle="Standalone" %} |
98 | | - |
99 | | -<button id="getBookmarks" onclick="getBookmarks()">Retrieve Bookmark</button> |
100 | | - |
101 | | -<div style="width:100%;height:600px"> |
102 | | - <ejs-pdfviewer id="pdfviewer" |
103 | | - style="height:600px" |
104 | | - documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"> |
105 | | - </ejs-pdfviewer> |
106 | | -</div> |
107 | | - |
108 | | -<script> |
109 | | - function getBookmarks() { |
110 | | - var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0]; |
111 | | - var getBookmarks = pdfViewer.bookmark.getBookmarks(); |
112 | | - console.log(getBookmarks); |
113 | | - } |
114 | | -</script> |
115 | | - |
116 | | -{% endhighlight %} |
117 | | -{% highlight cshtml tabtitle="Server-Backed" %} |
118 | | - |
119 | | -<button id="getBookmarks" onclick="getBookmarks()">Retrieve Bookmark</button> |
120 | | - |
121 | | -<div style="width:100%;height:600px"> |
122 | | - <ejs-pdfviewer id="pdfviewer" |
123 | | - style="height:600px" |
124 | | - serviceUrl="/api/PdfViewer" |
125 | | - documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"> |
126 | | - </ejs-pdfviewer> |
127 | | -</div> |
128 | | - |
129 | | -<script> |
130 | | - function getBookmarks() { |
131 | | - var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0]; |
132 | | - var getBookmarks = pdfViewer.bookmark.getBookmarks(); |
133 | | - console.log(getBookmarks); |
134 | | - } |
135 | | -</script> |
136 | | - |
137 | | -{% endhighlight %} |
138 | | -{% endtabs %} |
139 | | - |
140 | | -## See also |
141 | | - |
142 | | -* [Toolbar items](../toolbar-customization/) |
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Navigation in ASP.NET Core PDF Viewer control | Syncfusion |
| 4 | +description: Learn here all about Navigation in Syncfusion ASP.NET Core PDF Viewer control of Syncfusion Essential JS 2 and more. |
| 5 | +platform: document-processing |
| 6 | +control: PDF Viewer |
| 7 | +publishingplatform: ASP.NET Core |
| 8 | +documentation: ug |
| 9 | +--- |
| 10 | + |
| 11 | +# Bookmark navigation |
| 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 cshtml tabtitle="Standalone" %} |
| 18 | + |
| 19 | +<div style="width:100%;height:600px"> |
| 20 | + <ejs-pdfviewer id="pdfviewer" |
| 21 | + documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" |
| 22 | + enableBookmark="true"> |
| 23 | + </ejs-pdfviewer> |
| 24 | +</div> |
| 25 | + |
| 26 | +{% endhighlight %} |
| 27 | +{% highlight cshtml tabtitle="Server-Backed" %} |
| 28 | + |
| 29 | +<div style="width:100%;height:600px"> |
| 30 | + <ejs-pdfviewer id="pdfviewer" |
| 31 | + serviceUrl='/Index' |
| 32 | + documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" |
| 33 | + enableBookmark="true"> |
| 34 | + </ejs-pdfviewer> |
| 35 | +</div> |
| 36 | + |
| 37 | +{% endhighlight %} |
| 38 | +{% endtabs %} |
| 39 | + |
| 40 | + |
| 41 | + |
| 42 | +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. |
| 43 | + |
| 44 | +Here is an example of how to use the **goToBookmark** method: |
| 45 | + |
| 46 | +{% tabs %} |
| 47 | +{% highlight cshtml tabtitle="Standalone" %} |
| 48 | + |
| 49 | +<button id="gotobookmark" onclick="gotobookmark()">Specfic Page</button> |
| 50 | + |
| 51 | +<div style="width:100%;height:600px"> |
| 52 | + <ejs-pdfviewer id="pdfviewer" |
| 53 | + style="height:600px" |
| 54 | + documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"> |
| 55 | + </ejs-pdfviewer> |
| 56 | +</div> |
| 57 | + |
| 58 | +<script> |
| 59 | + function gotobookmark() { |
| 60 | + var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0]; |
| 61 | + pdfViewer.bookmark.goToBookmark(3, 2); |
| 62 | + } |
| 63 | +</script> |
| 64 | + |
| 65 | +{% endhighlight %} |
| 66 | +{% highlight cshtml tabtitle="Server-Backed" %} |
| 67 | + |
| 68 | +<button id="gotobookmark" onclick="gotobookmark()">Specfic Page</button> |
| 69 | + |
| 70 | +<div style="width:100%;height:600px"> |
| 71 | + <ejs-pdfviewer id="pdfviewer" |
| 72 | + style="height:600px" |
| 73 | + serviceUrl="/api/PdfViewer" |
| 74 | + documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"> |
| 75 | + </ejs-pdfviewer> |
| 76 | +</div> |
| 77 | + |
| 78 | +<script> |
| 79 | + function gotobookmark() { |
| 80 | + var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0]; |
| 81 | + pdfViewer.bookmark.goToBookmark(3, 2); |
| 82 | + } |
| 83 | +</script> |
| 84 | + |
| 85 | +{% endhighlight %} |
| 86 | +{% endtabs %} |
| 87 | + |
| 88 | +x - Specifies the pageIndex for Navigate. |
| 89 | + |
| 90 | +y - Specifies the Y coordinates value of the Page. |
| 91 | + |
| 92 | +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. |
| 93 | + |
| 94 | +Here is an example of how to use the getBookmarks method: |
| 95 | + |
| 96 | +{% tabs %} |
| 97 | +{% highlight cshtml tabtitle="Standalone" %} |
| 98 | + |
| 99 | +<button id="getBookmarks" onclick="getBookmarks()">Retrieve Bookmark</button> |
| 100 | + |
| 101 | +<div style="width:100%;height:600px"> |
| 102 | + <ejs-pdfviewer id="pdfviewer" |
| 103 | + style="height:600px" |
| 104 | + documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"> |
| 105 | + </ejs-pdfviewer> |
| 106 | +</div> |
| 107 | + |
| 108 | +<script> |
| 109 | + function getBookmarks() { |
| 110 | + var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0]; |
| 111 | + var getBookmarks = pdfViewer.bookmark.getBookmarks(); |
| 112 | + console.log(getBookmarks); |
| 113 | + } |
| 114 | +</script> |
| 115 | + |
| 116 | +{% endhighlight %} |
| 117 | +{% highlight cshtml tabtitle="Server-Backed" %} |
| 118 | + |
| 119 | +<button id="getBookmarks" onclick="getBookmarks()">Retrieve Bookmark</button> |
| 120 | + |
| 121 | +<div style="width:100%;height:600px"> |
| 122 | + <ejs-pdfviewer id="pdfviewer" |
| 123 | + style="height:600px" |
| 124 | + serviceUrl="/api/PdfViewer" |
| 125 | + documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"> |
| 126 | + </ejs-pdfviewer> |
| 127 | +</div> |
| 128 | + |
| 129 | +<script> |
| 130 | + function getBookmarks() { |
| 131 | + var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0]; |
| 132 | + var getBookmarks = pdfViewer.bookmark.getBookmarks(); |
| 133 | + console.log(getBookmarks); |
| 134 | + } |
| 135 | +</script> |
| 136 | + |
| 137 | +{% endhighlight %} |
| 138 | +{% endtabs %} |
| 139 | + |
| 140 | +## See also |
| 141 | + |
| 142 | +* [Toolbar items](../toolbar-customization/) |
143 | 143 | * [Feature Modules](../feature-module) |
0 commit comments