Skip to content

Commit 2052ed1

Browse files
SF2381SF2381
authored
Merge pull request #1979 from syncfusion-content/999358-hotfix
999358-hotfix: Added proper link and code changes in JavaScript UG.
2 parents 02ebebe + acf66c7 commit 2052ed1

29 files changed

+1910
-3007
lines changed

‎Document-Processing/PDF/PDF-Library/javascript/Annotations.md‎

Lines changed: 248 additions & 1076 deletions
Large diffs are not rendered by default.

‎Document-Processing/PDF/PDF-Library/javascript/Bookmarks.md‎

Lines changed: 107 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -7,142 +7,166 @@ documentation: UG
77
---
88
# Bookmarks in JavaScript PDF library
99

10-
Syncfusion<sup>&reg;</sup> PDF provides support to insert, remove and modify the bookmarks in the PDF Document.
10+
Syncfusion<sup>&reg;</sup> PDF provides support to insert, remove, and modify the bookmarks in the PDF Document.
1111

12-
## Adding Bookmarks in a PDF
12+
## Adding bookmarks to a PDF
1313

1414
This example demonstrates how to add bookmarks to a PDF document using the `PdfBookmark` class. Bookmarks provide an easy way to navigate through different sections of a PDF file.
1515

1616
{% tabs %}
17-
{% highlight javascript tabtitle="TypeScript" %}
18-
import {PdfDocument, PdfPage, PdfBookmarkBase, PdfDestination} from '@syncfusion/ej2-pdf';
17+
{% highlight typescript tabtitle="TypeScript" %}
18+
import {PdfDocument, PdfPage, PdfBookmarkBase, PdfBookmark, PdfDestination} from '@syncfusion/ej2-pdf';
1919

2020
// Create a new PDF document
2121
let document: PdfDocument = new PdfDocument();
22-
// Add page
22+
// Add a page
2323
let page: PdfPage = document.addPage();
2424
// Get the bookmarks
2525
let bookmarks: PdfBookmarkBase = document.bookmarks;
26-
// Add a new outline to the PDF document
27-
let bookmark: PdfBookmark = bookmarks.add('Introduction');
28-
// Sets destination to the bookmark
29-
bookmark.destination = new PdfDestination(page, { x: 100, y: 200 });
26+
// Add a new bookmark to the PDF document
27+
let bookmark: PdfBookmark = bookmarks.add('Introduction', 0, {
28+
destination: new PdfDestination(page, { x: 100, y: 100 }, { zoom: 1 }),
29+
namedDestination: new PdfNamedDestination('First', new PdfDestination(page, { x: 0, y: 10 }, {zoom: 1 })),
30+
color: { r: 0, g: 0, b: 255 },
31+
textStyle: PdfTextStyle.bold});
3032
// Save the document
31-
document.save('Output.pdf');
33+
document.save('output.pdf');
3234
// Close the document
3335
document.destroy();
3436

3537
{% endhighlight %}
3638
{% highlight javascript tabtitle="JavaScript" %}
39+
3740
// Create a new PDF document
3841
var document = new ej.pdf.PdfDocument();
39-
// Add page
42+
// Add a page
4043
var page = document.addPage();
4144
// Get the bookmarks
4245
var bookmarks = document.bookmarks;
43-
// Add a new outline to the PDF document
44-
var bookmark = bookmarks.add('Introduction');
45-
// Set destination to the bookmark
46-
bookmark.destination = new ej.pdf.PdfDestination(page, { x: 100, y: 200 });
46+
// Add a new bookmark to the PDF document
47+
var bookmark = bookmarks.add('Introduction', 0, {
48+
destination: new ej.pdf.PdfDestination(page, { x: 100, y: 100 }, { zoom: 1 }),
49+
namedDestination: new ej.pdf.PdfNamedDestination('First', new ej.pdf.PdfDestination(page, { x: 0, y: 10 }, {zoom: 1 })),
50+
color: { r: 0, g: 0, b: 255 },
51+
textStyle: ej.pdf.PdfTextStyle.bold});
4752
// Save the document
48-
document.save('Output.pdf');
53+
document.save('output.pdf');
4954
// Close the document
5055
document.destroy();
5156

5257
{% endhighlight %}
5358
{% endtabs %}
5459

55-
## Adding Bookmarks in an existing PDF document
60+
## Inserting bookmarks into an existing PDF
5661

57-
This example demonstrates how to add bookmarks to an existing PDF document using the `PdfBookmark` class. This allows you to enhance navigation in already created PDF document.
62+
This example demonstrates how to insert bookmarks at a specific position in an existing PDF document using the `PdfBookmark` class. This feature allows precise control over bookmark order.
5863

5964
{% tabs %}
60-
{% highlight javascript tabtitle="TypeScript" %}
61-
import {PdfDocument, PdfPage, PdfBookmarkBase, PdfDestination} from '@syncfusion/ej2-pdf';
65+
{% highlight typescript tabtitle="TypeScript" %}
66+
import {PdfDocument, PdfPage, PdfBookmark, PdfBookmarkBase, PdfDestination} from '@syncfusion/ej2-pdf';
6267

6368
// Load an existing PDF document
6469
let document: PdfDocument = new PdfDocument(data);
65-
// Get page
66-
let page: PdfPage = document.getPage(0);
70+
// Get the first page
71+
let page: PdfPage = document.getPage(0) as PdfPage;
6772
// Get the bookmarks
6873
let bookmarks: PdfBookmarkBase = document.bookmarks;
69-
// Gets the bookmark at the specified index
70-
let bookmark: PdfBookmark = bookmarks.at(0) as PdfBookmark;
71-
// Set the destination
74+
// Add a new bookmark at the specified bookmark index
75+
let bookmark: PdfBookmark = bookmarks.add('Introduction', 1);
76+
// Sets destination to the bookmark
7277
bookmark.destination = new PdfDestination(page, { x: 100, y: 200 });
7378
// Save the document
74-
document.save('Output.pdf');
79+
document.save('output.pdf');
7580
// Close the document
7681
document.destroy();
77-
82+
7883
{% endhighlight %}
7984
{% highlight javascript tabtitle="JavaScript" %}
85+
8086
// Load an existing PDF document
8187
var document = new ej.pdf.PdfDocument(data);
82-
// Get page
88+
// Get the first page
8389
var page = document.getPage(0);
8490
// Get the bookmarks
8591
var bookmarks = document.bookmarks;
86-
// Get the bookmark at the specified index
87-
var bookmark = bookmarks.at(0);
88-
// Set the destination
92+
// Add a new bookmark at the specified bookmark index
93+
var bookmark = bookmarks.add('Introduction', 1);
94+
// Set destination to the bookmark
8995
bookmark.destination = new ej.pdf.PdfDestination(page, { x: 100, y: 200 });
9096
// Save the document
91-
document.save('Output.pdf');
97+
document.save('output.pdf');
9298
// Close the document
9399
document.destroy();
94100

95101
{% endhighlight %}
96102
{% endtabs %}
97103

98-
## Inserting Bookmarks in an existing PDF
104+
## Nested Bookmark
99105

100-
This example demonstrates how to insert bookmarks at a specific position in an existing PDF document using the `PdfBookmark` class. This feature allows precise control over bookmark order.
106+
This example demonstrates how to create hierarchical (parent-child) bookmarks in a PDF using the PdfBookmark class. This feature allows organizing content with nested bookmark structures for easier navigation.
101107

102108
{% tabs %}
103-
{% highlight javascript tabtitle="TypeScript" %}
104-
import {PdfDocument, PdfPage, PdfBookmarkBase, PdfDestination} from '@syncfusion/ej2-pdf';
109+
{% highlight typescript tabtitle="TypeScript" %}
110+
import {PdfDocument, PdfPage, PdfBookmark, PdfBookmarkBase, PdfTextStyle, PdfNamedDestination, PdfDestination} from '@syncfusion/ej2-pdf';
105111

106-
// Load an existing PDF document
107-
let document: PdfDocument = new PdfDocument(data);
108-
// Get the first page
109-
let page: PdfPage = document.getPage(0) as PdfPage;
112+
// Create a new PDF document
113+
let document: PdfDocument = new PdfDocument();
114+
// Add a page
115+
let page: PdfPage = document.addPage();
110116
// Get the bookmarks
111117
let bookmarks: PdfBookmarkBase = document.bookmarks;
112-
// Add a new outline to the PDF document
113-
let bookmark: PdfBookmark = bookmarks.add('Introduction', 1);
114-
// Sets destination to the bookmark
115-
bookmark.destination = new PdfDestination(page, { x: 100, y: 200 });
118+
// Add a new bookmark to the PDF document
119+
let bookmark: PdfBookmark = bookmarks.add('Introduction', 0, {
120+
destination: new PdfDestination(page, { x: 100, y: 100 }, { zoom: 1 }),
121+
namedDestination: new PdfNamedDestination('First', new PdfDestination(page, { x: 0, y: 10 }, {zoom: 1 })),
122+
color: { r: 0, g: 0, b: 255 },
123+
textStyle: PdfTextStyle.bold});
124+
// Add a child bookmark to the PDF document
125+
let childbookmark: PdfBookmark = bookmark.add('FirstChild', 0, {
126+
destination: new PdfDestination(page, { x: 100, y: 150 }, { zoom: 1 }),
127+
namedDestination: new PdfNamedDestination('Second', new PdfDestination(page, { x: 0, y: 10 }, {zoom: 1 })),
128+
color: { r: 0, g: 0, b: 255 },
129+
textStyle: PdfTextStyle.bold});
116130
// Save the document
117-
document.save('Output.pdf');
131+
document.save('output.pdf');
118132
// Close the document
119133
document.destroy();
120134

121135
{% endhighlight %}
122136
{% highlight javascript tabtitle="JavaScript" %}
123-
// Load an existing PDF document
124-
var document = new ej.pdf.PdfDocument(data);
125-
// Get the first page
126-
var page = document.getPage(0);
137+
138+
// Create a new PDF document
139+
var document= new ej.pdf.PdfDocument();
140+
// Add a page
141+
var page= document.addPage();
127142
// Get the bookmarks
128143
var bookmarks = document.bookmarks;
129-
// Add a new outline to the PDF document
130-
var bookmark = bookmarks.add('Introduction', 1);
131-
// Set destination to the bookmark
132-
bookmark.destination = new ej.pdf.PdfDestination(page, { x: 100, y: 200 });
144+
// Add a new bookmark to the PDF document
145+
var bookmark = bookmarks.add('Introduction', 0, {
146+
destination: new ej.pdf.PdfDestination(page, { x: 100, y: 100 }, { zoom: 1 }),
147+
namedDestination: new ej.pdf.PdfNamedDestination('First', new ej.pdf.PdfDestination(page, { x: 0, y: 10 }, {zoom: 1 })),
148+
color: { r: 0, g: 0, b: 255 },
149+
textStyle: ej.pdf.PdfTextStyle.bold});
150+
// Add a child bookmark to the PDF document
151+
var childbookmark = bookmark.add('FirstChild', 0, {
152+
destination: new ej.pdf.PdfDestination(page, { x: 100, y: 150 }, { zoom: 1 }),
153+
namedDestination: new ej.pdf.PdfNamedDestination('Second', new ej.pdf.PdfDestination(page, { x: 0, y: 10 }, {zoom: 1 })),
154+
color: { r: 0, g: 0, b: 255 },
155+
textStyle: ej.pdf.PdfTextStyle.bold});
133156
// Save the document
134-
document.save('Output.pdf');
157+
document.save('output.pdf');
135158
// Close the document
136159
document.destroy();
137160

138161
{% endhighlight %}
139162
{% endtabs %}
140163

141-
## Removing Bookmarks from an existing PDF
164+
## Removing bookmarks from an existing PDF
142165

143166
This example demonstrates how to remove bookmarks from an existing PDF document using the `PdfBookmark` class.
167+
144168
{% tabs %}
145-
{% highlight javascript tabtitle="TypeScript" %}
169+
{% highlight typescript tabtitle="TypeScript" %}
146170
import {PdfDocument, PdfPage, PdfBookmarkBase} from '@syncfusion/ej2-pdf';
147171

148172
// Load an existing PDF document
@@ -154,12 +178,13 @@ let bookmarks: PdfBookmarkBase = document.bookmarks;
154178
// Remove specified bookmark from the document.
155179
bookmarks.remove('Introduction');
156180
// Save the document
157-
document.save('Output.pdf');
181+
document.save('output.pdf');
158182
// Close the document
159183
document.destroy();
160184

161185
{% endhighlight %}
162186
{% highlight javascript tabtitle="JavaScript" %}
187+
163188
// Load an existing PDF document
164189
var document = new ej.pdf.PdfDocument(data);
165190
// Get the first page
@@ -169,58 +194,55 @@ var bookmarks = document.bookmarks;
169194
// Remove specified bookmark from the document
170195
bookmarks.remove('Introduction');
171196
// Save the document
172-
document.save('Output.pdf');
197+
document.save('output.pdf');
173198
// Close the document
174199
document.destroy();
175200

176201
{% endhighlight %}
177202
{% endtabs %}
178203

179-
## Removing Bookmark from the document at the specified index
204+
## Removing a bookmark from the document at a specified index
180205

181206
This example demonstrates how to remove bookmarks from the document at the specific index using the `PdfBookmark` class.
182207

183208
{% tabs %}
184-
{% highlight javascript tabtitle="TypeScript" %}
185-
import {PdfDocument, PdfPage, PdfBookmarkBase} from '@syncfusion/ej2-pdf';
209+
{% highlight typescript tabtitle="TypeScript" %}
210+
import {PdfDocument, PdfBookmarkBase} from '@syncfusion/ej2-pdf';
186211

187212
// Load an existing PDF document
188213
let document: PdfDocument = new PdfDocument(data);
189-
// Get the first page
190-
let page: PdfPage = document.getPage(0) as PdfPage;
191214
// Get the bookmarks
192215
let bookmarks: PdfBookmarkBase = document.bookmarks;
193216
// Remove the bookmark from the document at the index 1.
194217
bookmarks.remove(1);
195218
// Save the document
196-
document.save('Output.pdf');
219+
document.save('output.pdf');
197220
// Close the document
198221
document.destroy();
199222

200223
{% endhighlight %}
201224
{% highlight javascript tabtitle="JavaScript" %}
225+
202226
// Load an existing PDF document
203227
var document = new ej.pdf.PdfDocument(data);
204-
// Get the first page
205-
var page = document.getPage(0);
206228
// Get the bookmarks
207229
var bookmarks = document.bookmarks;
208230
// Remove the bookmark from the document at index 1
209231
bookmarks.remove(1);
210232
// Save the document
211-
document.save('Output.pdf');
233+
document.save('output.pdf');
212234
// Close the document
213235
document.destroy();
214236

215237
{% endhighlight %}
216238
{% endtabs %}
217239

218-
## Removing all the Bookmark from the collection
240+
## Removing all bookmarks from the collection
219241

220-
This example demonstrates how to removes all the bookmarks from the collection using the `PdfBookmark` class.
242+
This example demonstrates how to removes all bookmarks from the collection using the `PdfBookmark` class.
221243

222244
{% tabs %}
223-
{% highlight javascript tabtitle="TypeScript" %}
245+
{% highlight typescript tabtitle="TypeScript" %}
224246
import {PdfDocument, PdfBookmarkBase} from '@syncfusion/ej2-pdf';
225247

226248
// Load an existing PDF document
@@ -229,52 +251,56 @@ let document: PdfDocument = new PdfDocument(data);
229251
let bookmarks: PdfBookmarkBase = document.bookmarks;
230252
// Remove all the bookmark from the collection.
231253
bookmarks.clear();
232-
// Get count after removal of all outlines.
254+
// Get the count after removal of all bookmarks
233255
let count: number = bookmarks.count;
234256
// Save the document
235-
document.save('Output.pdf');
257+
document.save('output.pdf');
236258
// Destroy the document
237259
document.destroy();
238260

239261
{% endhighlight %}
240262
{% highlight javascript tabtitle="JavaScript" %}
263+
241264
// Load an existing PDF document
242265
var document = new ej.pdf.PdfDocument(data);
243266
// Get the bookmarks
244267
var bookmarks = document.bookmarks;
245268
// Remove all the bookmarks from the collection
246269
bookmarks.clear();
247-
// Get count after removal of all outlines
270+
// Get the count after removal of all bookmarks
248271
var count = bookmarks.count;
249272
// Save the document
250-
document.save('Output.pdf');
273+
document.save('output.pdf');
251274
// Destroy the document
252275
document.destroy();
253276

254277
{% endhighlight %}
255278
{% endtabs %}
256279

257-
## Bookmark page index in an existing PDF document
280+
## Getting a bookmark's page index in an existing PDF document
258281

259282
This example demonstrates how to retrieve the page index associated with a bookmark in an existing PDF document using the `PdfBookmark` class. This helps identify the exact location of the bookmark.
260283

261284
{% tabs %}
262-
{% highlight javascript tabtitle="TypeScript" %}
285+
{% highlight typescript tabtitle="TypeScript" %}
263286
import {PdfDocument, PdfBookmarkBase} from '@syncfusion/ej2-pdf';
264287

265288
// Load an existing PDF document
266289
let document: PdfDocument = new PdfDocument(data);
267290
// Get bookmarks
268-
let bookmarks: PdfBookmarkBase = document.bookmarks;
269-
// Get bookmark at the specified index
270-
let pageIndex: number = bookmarks.destination.pageIndex;
291+
let bookmarks: PdfBookmarkBase = document.bookmarks;
292+
// Get the first bookmark (or any specific one)
293+
let bookmark = bookmarks.at(0);
294+
// Get the page index of the bookmark's destination
295+
let pageIndex: number = bookmark.destination.pageIndex;
271296
// Save the document
272-
document.save('Output.pdf');
297+
document.save('output.pdf');
273298
// Close the document
274299
document.destroy();
275300

276301
{% endhighlight %}
277302
{% highlight javascript tabtitle="JavaScript" %}
303+
278304
// Load an existing PDF document
279305
var document = new ej.pdf.PdfDocument(data);
280306
// Get bookmarks
@@ -284,7 +310,7 @@ var bookmark = bookmarks.at(0);
284310
// Get the page index of the bookmark's destination
285311
var pageIndex = bookmark.destination.pageIndex;
286312
// Save the document
287-
document.save('Output.pdf');
313+
document.save('output.pdf');
288314
// Close the document
289315
document.destroy();
290316

0 commit comments

Comments
 (0)