Skip to content

999358-ug: Need to resolve UG failures and content for JavaScript PDF library #1970

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sameerkhan001 wants to merge 11 commits into
base: development
Choose a base branch
from
Open

999358-ug: Need to resolve UG failures and content for JavaScript PDF library #1970

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
4551525
999358-ug: Added proper code example and content.
sameerkhan001 Dec 16, 2025
12d72fc
999358-ug: Partially completed the md files.
sameerkhan001 Dec 16, 2025
07681d9
999358-ug: Added proper changes.
sameerkhan001 Dec 17, 2025
a990c7a
999358-ug: Resolved Failures.
sameerkhan001 Dec 17, 2025
4dc8600
999358-ug: Resolved CI failures.
sameerkhan001 Dec 17, 2025
ab216d3
999358-ug: Add proper link.
sameerkhan001 Dec 17, 2025
ce3510f
999358-ug: Added some topics.
sameerkhan001 Dec 17, 2025
03d396c
Merge branch 'development' of https://github.com/syncfusion-content/d…
sameerkhan001 Dec 17, 2025
6cd0587
999358-ug: Resolved the all feedback.
sameerkhan001 Dec 17, 2025
f260d63
999358-ug: Added final changes
sameerkhan001 Dec 17, 2025
7581e4e
999358-ug: reverted
sameerkhan001 Dec 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
337 changes: 220 additions & 117 deletions Document-Processing/PDF/PDF-Library/javascript/Annotations.md
View file
Open in desktop

Large diffs are not rendered by default.

135 changes: 48 additions & 87 deletions Document-Processing/PDF/PDF-Library/javascript/Bookmarks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,142 +7,101 @@ documentation: UG
---
# Bookmarks in JavaScript PDF library

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

## Adding Bookmarks in a PDF
## Adding bookmarks to a PDF

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.

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

// Create a new PDF document
let document: PdfDocument = new PdfDocument();
// Add page
// Add a page
let page: PdfPage = document.addPage();
// Get the bookmarks
let bookmarks: PdfBookmarkBase = document.bookmarks;
// Add a new outline to the PDF document
// Add a new bookmark to the PDF document
let bookmark: PdfBookmark = bookmarks.add('Introduction');
// Sets destination to the bookmark
bookmark.destination = new PdfDestination(page, { x: 100, y: 200 });
// Save the document
document.save('Output.pdf');
document.save('output.pdf');
// Close the document
document.destroy();

{% endhighlight %}
{% highlight javascript tabtitle="JavaScript" %}

// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add page
// Add a page
var page = document.addPage();
// Get the bookmarks
var bookmarks = document.bookmarks;
// Add a new outline to the PDF document
// Add a new bookmark to the PDF document
var bookmark = bookmarks.add('Introduction');
// Set destination to the bookmark
bookmark.destination = new ej.pdf.PdfDestination(page, { x: 100, y: 200 });
// Save the document
document.save('Output.pdf');
document.save('output.pdf');
// Close the document
document.destroy();

{% endhighlight %}
{% endtabs %}

## Adding Bookmarks in an existing PDF document

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.

{% tabs %}
{% highlight javascript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfBookmarkBase, PdfDestination} from '@syncfusion/ej2-pdf';

// Load an existing PDF document
let document: PdfDocument = new PdfDocument(data);
// Get page
let page: PdfPage = document.getPage(0);
// Get the bookmarks
let bookmarks: PdfBookmarkBase = document.bookmarks;
// Gets the bookmark at the specified index
let bookmark: PdfBookmark = bookmarks.at(0) as PdfBookmark;
// Set the destination
bookmark.destination = new PdfDestination(page, { x: 100, y: 200 });
// Save the document
document.save('Output.pdf');
// Close the document
document.destroy();

{% endhighlight %}
{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
var document = new ej.pdf.PdfDocument(data);
// Get page
var page = document.getPage(0);
// Get the bookmarks
var bookmarks = document.bookmarks;
// Get the bookmark at the specified index
var bookmark = bookmarks.at(0);
// Set the destination
bookmark.destination = new ej.pdf.PdfDestination(page, { x: 100, y: 200 });
// Save the document
document.save('Output.pdf');
// Close the document
document.destroy();

{% endhighlight %}
{% endtabs %}

## Inserting Bookmarks in an existing PDF
## Inserting bookmarks into an existing PDF

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.

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

// Load an existing PDF document
let document: PdfDocument = new PdfDocument(data);
// Get the first page
let page: PdfPage = document.getPage(0) as PdfPage;
// Get the bookmarks
let bookmarks: PdfBookmarkBase = document.bookmarks;
// Add a new outline to the PDF document
// Add a new bookmark at the specified bookmark index
let bookmark: PdfBookmark = bookmarks.add('Introduction', 1);
// Sets destination to the bookmark
bookmark.destination = new PdfDestination(page, { x: 100, y: 200 });
// Save the document
document.save('Output.pdf');
document.save('output.pdf');
// Close the document
document.destroy();

{% endhighlight %}
{% highlight javascript tabtitle="JavaScript" %}

// Load an existing PDF document
var document = new ej.pdf.PdfDocument(data);
// Get the first page
var page = document.getPage(0);
// Get the bookmarks
var bookmarks = document.bookmarks;
// Add a new outline to the PDF document
// Add a new bookmark at the specified bookmark index
var bookmark = bookmarks.add('Introduction', 1);
// Set destination to the bookmark
bookmark.destination = new ej.pdf.PdfDestination(page, { x: 100, y: 200 });
// Save the document
document.save('Output.pdf');
document.save('output.pdf');
// Close the document
document.destroy();

{% endhighlight %}
{% endtabs %}

## Removing Bookmarks from an existing PDF
## Removing bookmarks from an existing PDF

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

// Load an existing PDF document
Expand All @@ -154,12 +113,13 @@ let bookmarks: PdfBookmarkBase = document.bookmarks;
// Remove specified bookmark from the document.
bookmarks.remove('Introduction');
// Save the document
document.save('Output.pdf');
document.save('output.pdf');
// Close the document
document.destroy();

{% endhighlight %}
{% highlight javascript tabtitle="JavaScript" %}

// Load an existing PDF document
var document = new ej.pdf.PdfDocument(data);
// Get the first page
Expand All @@ -169,58 +129,55 @@ var bookmarks = document.bookmarks;
// Remove specified bookmark from the document
bookmarks.remove('Introduction');
// Save the document
document.save('Output.pdf');
document.save('output.pdf');
// Close the document
document.destroy();

{% endhighlight %}
{% endtabs %}

## Removing Bookmark from the document at the specified index
## Removing a bookmark from the document at a specified index

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

{% tabs %}
{% highlight javascript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfBookmarkBase} from '@syncfusion/ej2-pdf';
{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfBookmarkBase} from '@syncfusion/ej2-pdf';

// Load an existing PDF document
let document: PdfDocument = new PdfDocument(data);
// Get the first page
let page: PdfPage = document.getPage(0) as PdfPage;
// Get the bookmarks
let bookmarks: PdfBookmarkBase = document.bookmarks;
// Remove the bookmark from the document at the index 1.
bookmarks.remove(1);
// Save the document
document.save('Output.pdf');
document.save('output.pdf');
// Close the document
document.destroy();

{% endhighlight %}
{% highlight javascript tabtitle="JavaScript" %}

// Load an existing PDF document
var document = new ej.pdf.PdfDocument(data);
// Get the first page
var page = document.getPage(0);
// Get the bookmarks
var bookmarks = document.bookmarks;
// Remove the bookmark from the document at index 1
bookmarks.remove(1);
// Save the document
document.save('Output.pdf');
document.save('output.pdf');
// Close the document
document.destroy();

{% endhighlight %}
{% endtabs %}

## Removing all the Bookmark from the collection
## Removing all bookmarks from the collection

This example demonstrates how to removes all the bookmarks from the collection using the `PdfBookmark` class.
This example demonstrates how to removes all bookmarks from the collection using the `PdfBookmark` class.

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

// Load an existing PDF document
Expand All @@ -229,52 +186,56 @@ let document: PdfDocument = new PdfDocument(data);
let bookmarks: PdfBookmarkBase = document.bookmarks;
// Remove all the bookmark from the collection.
bookmarks.clear();
// Get count after removal of all outlines.
// // Get the count after removal of all bookmarks
let count: number = bookmarks.count;
// Save the document
document.save('Output.pdf');
document.save('output.pdf');
// Destroy the document
document.destroy();

{% endhighlight %}
{% highlight javascript tabtitle="JavaScript" %}

// Load an existing PDF document
var document = new ej.pdf.PdfDocument(data);
// Get the bookmarks
var bookmarks = document.bookmarks;
// Remove all the bookmarks from the collection
bookmarks.clear();
// Get count after removal of all outlines
// // Get the count after removal of all bookmarks
var count = bookmarks.count;
// Save the document
document.save('Output.pdf');
document.save('output.pdf');
// Destroy the document
document.destroy();

{% endhighlight %}
{% endtabs %}

## Bookmark page index in an existing PDF document
## Getting a bookmark's page index in an existing PDF document

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.

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

// Load an existing PDF document
let document: PdfDocument = new PdfDocument(data);
// Get bookmarks
let bookmarks: PdfBookmarkBase = document.bookmarks;
// Get bookmark at the specified index
let pageIndex: number = bookmarks.destination.pageIndex;
let bookmarks: PdfBookmarkBase = document.bookmarks;
// Get the first bookmark (or any specific one)
let bookmark = bookmarks.at(0);
// Get the page index of the bookmark's destination
let pageIndex: number = bookmark.destination.pageIndex;
// Save the document
document.save('Output.pdf');
document.save('output.pdf');
// Close the document
document.destroy();

{% endhighlight %}
{% highlight javascript tabtitle="JavaScript" %}

// Load an existing PDF document
var document = new ej.pdf.PdfDocument(data);
// Get bookmarks
Expand All @@ -284,7 +245,7 @@ var bookmark = bookmarks.at(0);
// Get the page index of the bookmark's destination
var pageIndex = bookmark.destination.pageIndex;
// Save the document
document.save('Output.pdf');
document.save('output.pdf');
// Close the document
document.destroy();

Expand Down
20 changes: 13 additions & 7 deletions Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ documentation: ug
keywords: angular create pdf, angular generate pdf, angular pdf library, ej2 pdf angular, JavaScript
---

# Create or Generate PDF file in Angular application
# Create or generate PDF file in Angular application

The Syncfusion<sup>&reg;</sup> JavaScript PDF library is used to create, read, and edit PDF documents. This library also offers functionality to merge, split, stamp, fill forms, and secure PDF files.

Expand All @@ -23,7 +23,7 @@ To install the latest Angular CLI globally use the following command.
npm install -g @angular/cli
```

N> Use the command **npm install --save @angular/cli@12.0.2** to install the Angular CLI version 12.0.2
N> To install a specific Angular CLI version, use: **npm install --save @angular/cli@12.0.2**

## Create an Angular Application

Expand All @@ -36,16 +36,22 @@ cd my-app

## Installing Syncfusion<sup>&reg;</sup> JavaScript PDF package

All the available JS 2 packages are published in `npmjs.com` registry.
All Syncfusion<sup>&reg;</sup> JS 2 packages are published in `npmjs.com` registry.

* To install PDF component, use the following command.

```bash
npm install @syncfusion/ej2-pdf --save
```
N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on.
* Copy the contents of the openjpeg folder from ./node_modules/@syncfusion/ej2-pdf-data-extract/dist to the public directory using the command:
```bash
cp -R ./node_modules/@syncfusion/ej2-pdf-data-extract/dist/openjpeg ./src/assets/openjpeg
```
* Confirm that there is an `openjpeg` directory within your src/assets directory if you are extracting images from PDFs.
* Ensure your server serves .wasm files with the Content-Type: application/wasm MIME type (Angular dev server handles this by default; configure your production server accordingly).

## Create a PDF document using TypeScript
## Create a PDF document

* Add a simple button to `app.component.html` and attach a click handler that uses the TypeScript PDF API to create a new PDF document.

Expand All @@ -66,7 +72,7 @@ N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-da

{% tabs %}
{% highlight ts tabtitle="~/app.component.ts" %}
import { PdfDocument, PdfPage, PdfStandardFont, PdfBrush } from '@syncfusion/ej2-pdf';
import { PdfDocument, PdfGraphics, PdfPage, PdfFontFamily, PdfFontStyle, PdfFont, PdfBrush } from '@syncfusion/ej2-pdf';
{% endhighlight %}
{% endtabs %}

Expand All @@ -82,7 +88,7 @@ document.getElementById('normalButton').onclick = (): void => {
// Get graphics from the page
const graphics: PdfGraphics = page.graphics;
// Set font
const font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 36, PdfFontStyle.regular);
const font: PdfFont = document.embedFont(PdfFontFamily.helvetica, 36, PdfFontStyle.regular);
// Create a new black brush
const brush = new PdfBrush({r: 0, g: 0, b: 0});
// Draw text
Expand All @@ -99,7 +105,7 @@ document.getElementById('normalButton').onclick = (): void => {

Use the following command to run the application in browser.

```javascript
```bash
ng serve --open
```

Expand Down
Loading