+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+By executing the program, you will get the PDF document as follows.
+
+
+
diff --git a/Document-Processing/PDF/PDF-Library/Javascript-es6/Open-and-save-PDF-files.md b/Document-Processing/PDF/PDF-Library/Javascript-es6/Open-and-save-PDF-files.md
new file mode 100644
index 000000000..f92c5ff71
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/Javascript-es6/Open-and-save-PDF-files.md
@@ -0,0 +1,95 @@
+---
+layout: post
+title: Open and save PDF files in JavaScript PDF library | Syncfusion
+description: Learn to load and save PDFs in Syncfusion JavaScript PDF library using URLs, base64 strings, or byte arrays with server-backed services.
+platform: document-processing
+control: PDF
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Open and save PDF files in JavaScript PDF library
+
+## Opening an existing PDF document
+
+Open an existing PDF document using the `PdfDocument` class with the specified string data.
+
+```javascript
+// Load an existing PDF document from string data
+let document: PdfDocument = new PdfDocument("Input.pdf");
+
+```
+
+ ## Opening an existing PDF document from a byte array
+
+Open an existing PDF document using the `PdfDocument` class with the specified byte array.
+
+```javascript
+// Load the PDF data from a file
+const inputPDFByteArray: Uint8Array = new Uint8Array(fs.readFileSync('Input.pdf'));
+// Create a new PdfDocument instance using the byte array
+const loadedDocument = new PdfDocument(inputPDFByteArray);
+```
+
+## Opening an Encrypted PDF document
+
+Open an encrypted PDF document using the `PdfDocument` class by providing the correct password.
+
+```javascript
+// Load an existing PDF document from string data
+let document: PdfDocument = new PdfDocument("Input.pdf", "password");
+```
+
+## Opening an Encrypted PDF document from a byte array
+
+Open an encrypted PDF document from a byte array using the `PdfDocument` class by providing the correct password.
+
+```javascript
+// Load the PDF data from a file
+const inputPDFByteArray: Uint8Array = new Uint8Array(fs.readFileSync('Input.pdf'));
+// Load an existing PDF document from string data
+let document: PdfDocument = new PdfDocument(inputPDFByteArray, "password");
+```
+
+## Saving a PDF document
+
+Save the manipulated PDF document using the `Save` method of `PdfDocument` class with the specified string data.
+
+```javascript
+// Load an existing PDF document from string data
+let document: PdfDocument = new PdfDocument("Input.pdf");
+//To-Do some manipulation
+//To-Do some manipulation
+// Save the PDF document
+document.save('Output.pdf');
+```
+
+## Saving a PDF Document from a byte array
+
+Open an existing PDF document using the `PdfDocument` class with the specified byte array.
+
+```javascript
+// Load the PDF data from a file
+const inputPDFByteArray: Uint8Array = new Uint8Array(fs.readFileSync('Input.pdf'));
+// Create a new PdfDocument instance using the byte array
+const loadedDocument = new PdfDocument(inputPDFByteArray);
+//To-Do some manipulation
+//To-Do some manipulation
+// Save the document
+let data: Uint8Array = document.save();
+```
+
+## Closing a document
+
+After the document manipulation and save operation are completed, you should close the instance of `PdfDocument`, in order to release all the memory consumed by PDF DOM. The following code example illustrates how to destroy a `PdfDocument` instance.
+
+```javascript
+// Load an existing PDF document from string data
+let document: PdfDocument = new PdfDocument("Input.pdf");
+//To-Do some manipulation
+//To-Do some manipulation
+// Save the PDF document
+document.save('Output.pdf');
+// Destroy the document
+document.destroy();
+```
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/Javascript-es6/Overview.md b/Document-Processing/PDF/PDF-Library/Javascript-es6/Overview.md
new file mode 100644
index 000000000..8127266e0
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/Javascript-es6/Overview.md
@@ -0,0 +1,35 @@
+---
+layout: post
+title: Overview of the JavaScript PDF Library Component | Syncfusion
+description: Learn about the Syncfusion JavaScript PDF library component, its key capabilities, and supported platforms.
+platform: document-processing
+control: PDF
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Overview of the JavaScript PDF library control
+
+The Essential® JavaScript PDF library is a feature-rich and high-performance non-UI PDF library that is written natively in JavaScript. It enables you to seamlessly incorporate robust PDF functionalities into your JavaScript applications. The library allows users to read and manipulate PDF documents without requiring Adobe Acrobat.
+
+## Key features
+
+The following are the key features of this library.
+
+* Create PDF documents from scratch with ease.
+* Load, edit, and save existing PDF files.
+* Open and manipulate password-protected PDF documents.
+* Enhance PDFs by adding text, images, shapes, and other graphical elements.
+* Add and manage interactive components such as bookmarks, annotations, and form fields.
+* Flatten form fields and annotations for a finalized document.
+* Import and export form field data and annotations seamlessly.
+* Merge multiple PDFs or split a document into separate files.
+* Apply text watermarks, image watermarks, and watermark annotations.
+* Insert hyperlinks for both web and document navigation.
+* Add, remove, or modify bookmarks for better document organization.
+* Create, remove, and flatten layers within PDFs.
+* Design and apply templates for consistent layouts and branding.
+* Digitally sign PDF documents for secure authentication.
+* Extract or redact text from PDF files.
+* Extract images from PDF documents.
+* Redact shapes to protect sensitive graphical content.
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/Javascript-es6/Supported-and-Unsupported-Features.md b/Document-Processing/PDF/PDF-Library/Javascript-es6/Supported-and-Unsupported-Features.md
new file mode 100644
index 000000000..bf4d6346d
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/Javascript-es6/Supported-and-Unsupported-Features.md
@@ -0,0 +1,557 @@
+---
+title: Supported and Unsupported EJ2 Features | Syncfusion
+description: This section explains about features available in Essential EJ2 PDF and their availability in different platforms.
+platform: document-processing
+control: PDF
+documentation: UG
+---
+# Supported and Unsupported EJ2 Features
+
+The following table shows the various features available in the Essential® EJ2 PDF and their availability in different platforms.
+
+|
+Features |
+EJ2 | + |
|---|---|---|
|
+Drawing Text |
+Yes | + |
|
+Text Formatting |
+Yes | + |
|
+Multilingual Support |
+Yes | + |
|
+Drawing RTL text |
+Yes | + |
|
+Drawing complex script text |
+No | + |
|
+Text Extraction |
+Yes | + |
|
+Unicode |
+Yes | + |
|
+Pagination |
+No | + |
|
+Features |
+EJ2 | + |
|---|---|---|
|
+Pen and Brush |
+Yes | + |
|
+Layers |
+Yes | + |
|
+Transparent Graphics |
+Yes | + |
|
+Color Spaces |
+No | + |
|
+Image Extraction |
+Yes | + |
|
+Enhanced Printing Support |
+No | + |
|
+Barcode |
+No | + |
|
+Features |
+EJ2 | + |
|---|---|---|
|
+Merge Documents |
+Yes | + |
|
+Split Document |
+Yes | + |
|
+Overlay Documents |
+No | + |
|
+Import Pages |
+Yes | + |
|
+Stamp |
+Yes | + |
|
+Booklet |
+Yes | + |
|
+Features |
+EJ2 | + |
|---|---|---|
|
+Custom Metadata |
+No | + |
|
+Document Properties |
+Yes | + |
|
+Page Orientation |
+Yes | + |
|
+Page Sizes |
+Yes | + |
|
+Viewer Preferences |
+No | + |
|
+Tagged PDF with section 508 compliant |
+No | + |
|
+Features |
+EJ2 | + |
|---|---|---|
|
+Fields |
+Yes | + |
|
+Form Filling |
+Yes | + |
|
+Flatten |
+Yes | + |
|
+Import Form Data |
+Yes | + |
|
+Form Export |
+Yes | + |
|
+Features |
+EJ2 | + |
|---|---|---|
|
+Fields |
+No | + |
|
+Form Filling |
+No | + |
+Document Conversion: + +
|
+Features |
+EJ2 | + |
|---|---|---|
|
+TIFF to PDF |
+No | + |
|
+HTML to PDF |
+No | + |
|
+RTF To PDF |
+No | + |
|
+DOC To PDF |
+No | + |
|
+Excel To PDF |
+No | + |
|
+PDF OCR |
+No | + |
|
+XPS to PDF |
+No | + |
|
+SVG to PDF |
+No | + |
|
+EMF to PDF |
+No | + |
|
+JPEG to PDF |
+No | + |
|
+PDF to JPEG |
+No | + |
|
+PDF to PDF/A-1b |
+No | + |
+PDF Standards: + +
|
+Features |
+EJ2 | + |
|---|---|---|
|
+PDF/ A-1b Compliance |
+No | + |
|
+PDF/ A-2b Compliance |
+No | + |
|
+PDF/ A-3b Compliance |
+No | + |
|
+PDF/x1a: 2001 Compliance |
+No | + |
|
+ZUGFeRD Invoice |
+No | + |
|
+Features |
+EJ2 | + |
|---|---|---|
|
+Standard Fonts |
+Yes | + |
|
+CJK Fonts |
+Yes | + |
|
+TrueType Fonts |
+Yes | + |
|
+Unicode TrueType |
+Yes | + |
|
+Features |
+EJ2 | + |
|---|---|---|
|
+Scalar Images |
+Yes | + |
|
+Soft Mask |
+Yes | + |
|
+Vector Images |
+Yes | + |
|
+Watermarks |
+Yes | + |
|
+Raster images (JPEG and PNG) |
+Yes | + |
|
+Features |
+EJ2 | + |
|---|---|---|
|
+ADO.Net Tables Support |
+No | + |
|
+Cell / Row / Column Formatting |
+No | + |
|
+Header |
+No | + |
|
+Pagination |
+No | + |
|
+Borders |
+No | + |
|
+RowSpan and ColumnSpan |
+No | + |
|
+Nested table |
+No | + |
|
+Cell Padding and Spacing |
+No | + |
|
+Features |
+EJ2 | + |
|---|---|---|
|
+Headers and Footers |
+No | + |
|
+Page Label |
+No | + |
|
+Automatic Fields |
+No | + |
|
+Features |
+EJ2 | + |
|---|---|---|
|
+3D-Annotation |
+No | + |
|
+Measurement Annotations |
+Yes | + |
|
+Action |
+No | + |
|
+Attachment |
+No | + |
|
+Bookmark |
+Yes | + |
|
+Hyperlink |
+Yes | + |
|
+Portfolio |
+No | + |
|
+Import Annotation Data |
+Yes | + |
|
+Export Annotation Data |
+Yes | + |
|
+Features |
+EJ2 | + |
|---|---|---|
|
+Digital Signature |
+Yes | + |
|
+Digital Signature with LTV |
+No | + |
|
+Validate Digital Signature |
+No | + |
|
+Encryption and Decryption |
+No | + |
|
+Redaction |
+Yes | + |
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a popup annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new popup annotation
+ const annotation: PdfPopupAnnotation = new PdfPopupAnnotation('Test popup annotation', 10, 40, 30, 30);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Supported annotation types
+
+### 3D Annotation
+
+3D Annotations are used to represent 3D artworks in a PDF document. EJ2 PDF provides support to embed 3D files (u3d) in PDF.
+
+This example demonstrates how to access a 3D annotation from a PDF page using the `Pdf3DAnnotation` class. A 3D annotation allows embedding and interacting with 3D content within a PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Access the annotation at index 0
+ let annotation: Pdf3DAnnotation = page.annotations.at(0) as Pdf3DAnnotation;
+ // Added bounds
+ annotation.bounds = {x: 10, y: 10, width: 150, height: 5};
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### File Link Annotation
+
+This example demonstrates how to add a file link annotation to a PDF page using the `PdfFileLinkAnnotation` class. A file link annotation allows linking to an external file from within a PDF document, enabling users to access related resources directly.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Create a new file link annotation
+ let annotation: PdfFileLinkAnnotation = new PdfFileLinkAnnotation(10, 40, 30, 30, "image.png");
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a file link annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new file link annotation
+ let annotation: PdfFileLinkAnnotation = new PdfFileLinkAnnotation(10, 40, 30, 30, "image.png");
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Rich Media Annotation
+
+A rich media annotation is used to play the media clip in a PDF Document.
+
+The following rich media types are supported:
+
+1. Video
+2. Sound
+
+This example demonstrates how to access a rich media annotation to a PDF page using the `PdfRichMediaAnnotation` class.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Access the annotation at index 0
+ let annotation: PdfRichMediaAnnotation = page.annotations.at(0) as PdfRichMediaAnnotation;
+ // Added bounds
+ annotation.bounds = {x: 10, y: 10, width: 150, height: 5};
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Free Text Annotation
+
+This example demonstrates how to add a free text annotation to a PDF page using the `PdfFreeTextAnnotation` class. A free text annotation allows placing text directly on a PDF page, enabling users to add comments or notes that remain visible without requiring interaction.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Create a new free text annotation
+ const annotation: PdfFreeTextAnnotation = new PdfFreeTextAnnotation(50, 100, 100, 50);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a free text annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new free text annotation
+ const annotation: PdfFreeTextAnnotation = new PdfFreeTextAnnotation(50, 100, 100, 50);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Line Annotation
+
+This example demonstrates how to add a line annotation to a PDF page using the `PdfLineAnnotation` class. A line annotation allows drawing straight lines between two points on a PDF page, often used to highlight connections or indicate measurements.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Create a new line annotation with line points
+ const annotation: PdfLineAnnotation = new PdfLineAnnotation([10, 50, 250, 50]);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a line annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new line annotation with line points
+ const annotation: PdfLineAnnotation = new PdfLineAnnotation([10, 50, 250, 50]);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Rubber stamp Annotation
+
+This example demonstrates how to add a rubber stamp annotation to a PDF page using the `PdfRubberStampAnnotation` class. A rubber stamp annotation allows applying predefined or custom stamp to visually indicate the status or purpose of a document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Create a new rubber stamp annotation
+ const annotation: PdfRubberStampAnnotation = new PdfRubberStampAnnotation (50, 100, 100, 50);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a rubber stamp annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new rubber stamp annotation
+ const annotation: PdfRubberStampAnnotation = new PdfRubberStampAnnotation (50, 100, 100, 50);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Ink Annotation
+
+This example demonstrates how to add an ink annotation to a PDF page using the `PdfInkAnnotation` class. An ink annotation allows drawing freehand marks or sketches directly on a PDF page.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Create a new ink annotation with the bounds and ink points
+ const annotation: PdfInkAnnotation = new PdfInkAnnotation([0, 0, 300, 400], [40, 300, 60, 100, 40, 50, 40, 300]);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a ink annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new ink annotation with the bounds and ink points
+ const annotation: PdfInkAnnotation = new PdfInkAnnotation([0, 0, 300, 400], [40, 300, 60, 100, 40, 50, 40, 300]);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Pop-up Annotation
+
+This example demonstrates how to add a popup annotation to a PDF document using the `PdfPopupAnnotation` class. A popup annotation allows you to display additional information or comments within the PDF at a specified position and size.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Create a new popup annotation
+ const annotation: PdfPopupAnnotation = new PdfPopupAnnotation('Test popup annotation', 10, 40, 30, 30);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a popup annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new popup annotation
+ const annotation: PdfPopupAnnotation = new PdfPopupAnnotation('Test popup annotation', 10, 40, 30, 30);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### File Attachment Annotation
+
+This example demonstrates how to add a file attachment annotation to a PDF page using the `PdfAttachmentAnnotation` class. A file attachment annotation allows embedding external files within a PDF document, enabling users to include supporting documents or resources for easy access.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Create a new attachment annotation
+ const annotation: PdfAttachmentAnnotation = new PdfAttachmentAnnotation(300, 200, 30, 30, "Nature.jpg", imageData);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a attachment annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new attachment annotation
+ const annotation: PdfAttachmentAnnotation = new PdfAttachmentAnnotation(300, 200, 30, 30, "Nature.jpg", imageData);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Sound Annotation
+
+This example demonstrates how to access a sound annotation to a PDF page using the `PdfSoundAnnotation` class.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Access the annotation at index 0
+ let annotation: PdfSoundAnnotation = page.annotations.at(0) as PdfSoundAnnotation;
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### URI Annotation
+
+This example demonstrates how to add a URI annotation to a PDF page using the `PdfUriAnnotation` class. A URI annotation allows linking to a web address or online resource from within a PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Create a new URI annotation
+ let annotation: PdfUriAnnotation = new PdfUriAnnotation(100, 150, 200, 100, ‘http://www.google.com’);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a URI annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new URI annotation
+ let annotation: PdfUriAnnotation = new PdfUriAnnotation(100, 150, 200, 100, ‘http://www.google.com’);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Document Link Annotation
+
+This example demonstrates how to add a document link annotation to a PDF page using the `PdfDocumentLinkAnnotation` class. A document link annotation allows creating clickable links that navigate to a specific page or location within the same PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Create a new document link annotation
+ let annotation: PdfDocumentLinkAnnotation = new PdfDocumentLinkAnnotation(100, 150, 40, 60);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a document link annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new document link annotation
+ let annotation: PdfDocumentLinkAnnotation = new PdfDocumentLinkAnnotation(100, 150, 40, 60);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Redaction Annotation
+
+This example demonstrates how to add a redaction annotation to a PDF page using the `PdfRedactionAnnotation` class. A redaction annotation allows marking areas of a PDF for permanent removal of sensitive content, ensuring confidentiality and compliance with privacy requirements.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Create a new redaction annotation
+ const annotation: PdfRedactionAnnotation = new PdfRedactionAnnotation (50, 100, 100, 50);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a document link annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new redaction annotation
+ const annotation: PdfRedactionAnnotation = new PdfRedactionAnnotation (50, 100, 100, 50);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Watermark Annotation
+
+This example demonstrates how to add a watermark annotation to a PDF page using the `PdfWatermarkAnnotation` class. A watermark annotation allows overlaying text or images on a PDF page, typically used for branding, confidentiality notices, or document status indicators.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Create a new water mark annotation
+ const annotation: PdfWatermarkAnnotation = new PdfWatermarkAnnotation('Water Mark', 50, 100, 100, 50);
+ // Set the color of the annotation
+ annotation.color = [0, 0, 0];
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a watermark annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new water mark annotation
+ const annotation: PdfWatermarkAnnotation = new PdfWatermarkAnnotation('Water Mark', 50, 100, 100, 50);
+ // Set the color of the annotation
+ annotation.color = [0, 0, 0];
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Text Markup Annotation
+
+This example demonstrates how to add a text markup annotation to a PDF page using the `PdfTextMarkupAnnotation` class. A text markup annotation allows highlighting, underlining, or striking out text within a PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Create a new text markup annotation
+ const annotation: PdfTextMarkupAnnotation = new PdfTextMarkupAnnotation();
+ // Sets the bounds of the annotation.
+ annotation.bounds = {x: 50, y: 100, width: 100, height: 100};
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a text markup annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new text markup annotation
+ const annotation: PdfTextMarkupAnnotation = new PdfTextMarkupAnnotation();
+ // Sets the bounds of the annotation.
+ annotation.bounds = {x: 50, y: 100, width: 100, height: 100};
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Cloud border style Annotation
+
+### PdfRectangleAnnotation
+
+This example demonstrates how to add a rectangle annotation to a PDF page using the `PdfRectangleAnnotation` class. A rectangle annotation allows drawing rectangular shapes on a PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Create a new square annotation with bounds
+ const annotation: PdfRectangleAnnotation = new PdfRectangleAnnotation(10, 10, 200, 100);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a rectangle annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new square annotation with bounds
+ const annotation: PdfRectangleAnnotation = new PdfRectangleAnnotation(10, 10, 200, 100);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Polygon Annotation
+
+This example demonstrates how to add a polygon annotation to a PDF page using the `PdfPolygonAnnotation` class. A polygon annotation allows drawing multi-sided shapes on a PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Create a new polygon annotation with bounds
+ const annotation: PdfPolygonAnnotation = new PdfPolygonAnnotation([100, 300, 150, 200, 300, 200, 350, 300, 300, 400, 150, 400]);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a polygon annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new polygon annotation with bounds
+ const annotation: PdfPolygonAnnotation = new PdfPolygonAnnotation([100, 300, 150, 200, 300, 200, 350, 300, 300, 400, 150, 400]);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### PdfCircleAnnotation
+
+This example demonstrates how to add a circle annotation to a PDF page using the `PdfCircleAnnotation` class. A circle annotation allows drawing circular or oval shapes on a PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Create a new circle annotation with circle bounds
+ const annotation: PdfCircleAnnotation = new PdfCircleAnnotation(10, 10, 100, 100);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a circle annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new circle annotation with circle bounds
+ const annotation: PdfCircleAnnotation = new PdfCircleAnnotation(10, 10, 100, 100);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### PdfEllipseAnnotation
+
+This example demonstrates how to add an ellipse annotation to a PDF page using the `PdfEllipseAnnotation` class. An ellipse annotation allows drawing elliptical shapes on a PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Create a new ellipse annotation with bounds
+ const annotation: PdfEllipseAnnotation = new PdfEllipseAnnotation(10, 10, 100, 100);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a ellipse annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new ellipse annotation with bounds
+ const annotation: PdfEllipseAnnotation = new PdfEllipseAnnotation(10, 10, 100, 100);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Measurement Annotations
+
+This example demonstrates how to access a measurement annotation from a PDF page using the PdfLineAnnotation class. A measurement annotation allows defining and displaying dimensions such as distances or lengths within a PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Access the annotation at index 0
+ let annotation: PdfLineAnnotation = page.annotations.at(0) PdfLineAnnotation;
+ // Sets the measurement unit of line measurement annoation as centimeter
+ annotation.unit = PdfMeasurementUnit.centimeter;
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Modifying the annotations
+
+This example demonstrates how to modify an existing annotation in a PDF page using the PdfAnnotation class. Modifying annotations allows updating properties such as position, color, content, or appearance, enabling customization and refinement of the document’s interactive elements.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Get the first annotation of the page
+ let annotation: PdfPopupAnnotation = page.annotations.at(0) as PdfPopupAnnotation;
+ // Gets the boolean flag indicating whether annotation has open or not.
+ let open: boolean = annotation.open;
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Removing annotations from an existing PDF
+
+This example demonstrates how to remove an annotation from a PDF page using the PdfAnnotationCollection class. Removing annotations allows deleting comments, shapes, or other interactive elements from a PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Access first annotation from the PDF page
+ let annotation: PdfAnnotation = page.annotations.at(0);
+ // Remove an annotation from the collection
+ page.annotations.remove(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Flatten annotation
+
+This example demonstrates how to flatten annotations in a PDF document using the PdfAnnotation class. Flattening annotations converts interactive elements such as comments, highlights, and shapes into static content.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Flatten PDF annotations and form fields
+ document.flatten = true;
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Importing annotations
+
+This example demonstrates how to import annotations into a PDF document using the PdfDocument. `importAnnotations` method.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load the base PDF document from resources
+ let pdfDocument: PdfDocument = new PdfDocument('Input.pdf');
+ // Imports annotations from to the PDF document.
+ document.importAnnotations('annotations.json', DataFormat.json);
+ // Save the PDF document
+ pdfDocument.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Exporting annotations
+
+This example demonstrates how to export annotations from a PDF document using the PdfDocument.exportAnnotations method.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Exports the annotations from the PDF document.
+ let data: Uint8Array = document.exportAnnotations();
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-Bookmarks.md b/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-Bookmarks.md
new file mode 100644
index 000000000..e805ad3d4
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-Bookmarks.md
@@ -0,0 +1,231 @@
+---
+title: Working with EJ2 Bookmarks | PDF library | Syncfusion
+description: This section explains how to add, modify and remove bookmarks in the PDF document by using Essential EJ2 PDF
+platform: document-processing
+control: PDF
+documentation: UG
+---
+# Working with EJ2 Bookmarks
+
+Essential® EJ2 PDF provides support to insert, remove and modify the bookmarks in the PDF Document.
+
+## Adding Bookmarks in 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 ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Get the bookmarks
+ let bookmarks: PdfBookmarkBase = document.bookmarks;
+ // Add a new outline to the PDF document
+ let bookmark: PdfBookmark = bookmarks.add('Introduction');
+ // Sets destination to the bookmark
+ bookmark.destination = new PdfDestination(page, [10, 10]);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% 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 ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // 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, [100, 200]);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Inserting Bookmarks in 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 ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // 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
+ let bookmark: PdfBookmark = bookmarks.add('Introduction');
+ // Sets destination to the bookmark
+ bookmark.destination = new PdfDestination(page, [10, 10]);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Removing Bookmarks from an existing PDF
+
+This example demonstrates how to remove bookmarks from an existing PDF document using the `PdfBookmark` class. Removing bookmarks helps clean up unnecessary navigation links.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Get the first page
+ let page: PdfPage = document.getPage(0) as PdfPage;
+ // Get the bookmarks
+ let bookmarks: PdfBookmarkBase = document.bookmarks;
+ // Remove specified bookmark from the document.
+ bookmarks.remove('Introduction');
+ // Sets destination to the bookmark
+ bookmark.destination = new PdfDestination(page, [10, 10]);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Bookmark 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 ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Get bookmarks
+ let bookmarks: PdfBookmarkBase = document.bookmarks;
+ // Get bookmark at the specified index
+ let bookmark: PdfBookmark = bookmarks.at(0) as PdfBookmark;
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-DigitalSignature.md b/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-DigitalSignature.md
new file mode 100644
index 000000000..f34a0d56b
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-DigitalSignature.md
@@ -0,0 +1,579 @@
+---
+title: Working with EJ2 Digital Signature | Syncfusion
+description: This section explains how to create a digital signature in the PDF document by using Syncfusion .NET EJ2 PDF library.
+platform: document-processing
+control: PDF
+documentation: UG
+---
+# Working with EJ2 Digital Signature
+
+## Adding a digital signature
+
+This example demonstrates how to add a digital signature to a PDF document using the `PdfSignature` class. Digital signatures ensure document authenticity and integrity by applying cryptographic standards.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Create a new signature field
+ let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', {x: 10, y: 10, width: 100, height: 50});
+ // Create a new signature using PFX data and private key
+ const sign: PdfSignature = PdfSignature.create({ cryptographicStandard: CryptographicStandard.cms, digestAlgorithm: DigestAlgorithm.sha256 }, certData, password);
+ // Sets the signature to the field
+ field.setSignature(sign);
+ // Add the field into PDF form
+ form.add(field);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Adding a digital signature using byte array
+
+This example demonstrates how to add a digital signature to a PDF document by loading certificate data from a byte array. This approach is useful when certificates are stored in memory or retrieved dynamically.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Create a new signature field
+ let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', {x: 10, y: 10, width: 100, height: 50});
+ // Create a new signature using PFX data and private key
+ const sign: PdfSignature = PdfSignature.create({ cryptographicStandard: CryptographicStandard.cms, digestAlgorithm: DigestAlgorithm.sha256 }, certData, password);
+ // Sets the signature to the field
+ field.setSignature(sign);
+ // Add the field into PDF form
+ form.add(field);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Signature Without Certificate Data for External Signing
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load the document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Gets the first page of the document
+ let page: PdfPage = document.getPage(0);
+ // Access the PDF form
+ let form: PdfForm = document.form;
+ // Create a new signature field
+ let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 100, height: 50 });
+ // Define a callback function used for external signing
+ const externalSignatureCallback = (data: Uint8Array,
+ options: {
+ algorithm: DigestAlgorithm,
+ cryptographicStandard: CryptographicStandard,
+ }): {signedData: Uint8Array, timestampData?: Uint8Array} => {
+ // Implement external signing logic here
+ return new Uint8Array(); // Placeholder return
+ };
+ // Create a new signature using external signing
+ const signature: PdfSignature = PdfSignature.create({
+ cryptographicStandard: CryptographicStandard.cms,
+ algorithm: DigestAlgorithm.sha256
+ }, externalSignatureCallback);
+ // Set the signature to the field
+ field.setSignature(signature);
+ // Add the field into PDF form
+ form.add(field);
+ // Save the document
+ document.save('output.pdf');
+ // Destroy the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create Signature with Public Certificates for External Signing
+
+This example demonstrates how to create a new PDF signature using the `PdfSignature` class with public certificates for external signing. External signing allows you to implement custom signing logic outside the PDF library while maintaining compliance with cryptographic standards.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+
+// Load the document
+let document: PdfDocument = new PdfDocument('Input.pdf');
+// Get the first page of the document
+let page: PdfPage = document.getPage(0);
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new signature field
+let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 100, height: 50 });
+// Define a callback function used for external signing
+const externalSignatureCallback = (
+ data: Uint8Array,
+ options: {
+ algorithm: DigestAlgorithm,
+ cryptographicStandard: CryptographicStandard
+ }
+): { signedData: Uint8Array; timestampData?: Uint8Array } => {
+ // Implement external signing logic here
+ return new Uint8Array(); // Placeholder return
+};
+// Create a new signature using external signing with public certificate collection
+const signature: PdfSignature = PdfSignature.create(
+ {
+ cryptographicStandard: CryptographicStandard.cms,
+ algorithm: DigestAlgorithm.sha256
+ },
+ externalSignatureCallback,
+ publicCertificates
+);
+// Set the signature to the field
+field.setSignature(signature);
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('output.pdf');
+// Destroy the document
+document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create Signature Using PFX Data and Private Key
+
+This example demonstrates how to create a new PDF signature using the `PdfSignature` class with PFX certificate data and a private key. This approach is commonly used for digital signing when you have access to a personal certificate file and its password.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+// Function to create PDF
+function createPdf() {
+// Load the document
+let document: PdfDocument = new PdfDocument('Input.pdf');
+// Get the first page of the document
+let page: PdfPage = document.getPage(0);
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new signature field
+let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 100, height: 50 });
+// Create a new signature using PFX data and private key
+const sign: PdfSignature = PdfSignature.create(
+ {
+ cryptographicStandard: CryptographicStandard.cms,
+ digestAlgorithm: DigestAlgorithm.sha256
+ },
+ certData,
+ password
+);
+// Set the signature to the field
+field.setSignature(sign);
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('output.pdf');
+// Destroy the document
+document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Check Signature Visibility
+
+This example demonstrates how to check whether a PDF signature is visible using the `isVisible()` method of the `PdfSignature` class. This property helps determine if the signature appearance is displayed on the document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+// Function to create PDF
+function createPdf() {
+
+// Load the document
+let document: PdfDocument = new PdfDocument('Input.pdf');
+// Get the first page of the document
+let page: PdfPage = document.getPage(0);
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new signature field
+let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 100, height: 50 });
+// Create a new signature using PFX data and private key
+const sign: PdfSignature = PdfSignature.create(
+ {
+ cryptographicStandard: CryptographicStandard.cms,
+ digestAlgorithm: DigestAlgorithm.sha256
+ },
+ certData,
+ password
+);
+// Set the signature to the field
+field.setSignature(sign);
+// Check the signature visibility
+sign.isVisible();
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('output.pdf');
+// Destroy the document
+document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Get Signed Date
+
+This example demonstrates how to retrieve the signed date of a PDF signature using the `getSignedDate()` method of the `PdfSignature` class. This property helps identify when the document was digitally signed.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+// Function to create PDF
+function createPdf() {
+
+// Load the document
+let document: PdfDocument = new PdfDocument('Input.pdf');
+// Get the first page of the document
+let page: PdfPage = document.getPage(0);
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new signature field
+let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 100, height: 50 });
+// Create a new signature using PFX data and private key
+const sign: PdfSignature = PdfSignature.create(
+ {
+ cryptographicStandard: CryptographicStandard.cms,
+ digestAlgorithm: DigestAlgorithm.sha256
+ },
+ certData,
+ password
+);
+// Set the signature to the field
+field.setSignature(sign);
+// Get the signed date
+sign.getSignedDate();
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('output.pdf');
+// Destroy the document
+document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Get Certificate Information of the Signature
+
+This example demonstrates how to retrieve the certificate information of a PDF signature using the `getCertificateInformation()` method of the `PdfSignature` class. This information includes details about the signer’s certificate used for digital signing.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+// Function to create PDF
+function createPdf() {
+// Load the document
+let document: PdfDocument = new PdfDocument(data);
+// Get the first page of the document
+let page: PdfPage = document.getPage(0);
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new signature field
+let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 100, height: 50 });
+// Create a new signature using PFX data and private key
+const sign: PdfSignature = PdfSignature.create(
+ {
+ cryptographicStandard: CryptographicStandard.cms,
+ digestAlgorithm: DigestAlgorithm.sha256
+ },
+ certData,
+ password
+);
+// Set the signature to the field
+field.setSignature(sign);
+// Get the certificate information of the signature
+const certificateInfo: PdfCertificateInformation = sign.getCertificateInformation();
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('output.pdf');
+// Destroy the document
+document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Get Digital Signature Options
+
+This example demonstrates how to retrieve the configuration options of a digital signature in a PDF document using the `getSignatureOptions()` method of the `PdfSignature` class. These options include details such as the cryptographic standard and digest algorithm used for signing.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+// Function to create PDF
+function createPdf() {
+// Load the document
+let document: PdfDocument = new PdfDocument(data);
+// Get the first page of the document
+let page: PdfPage = document.getPage(0);
+// Access the PDF form
+let form: PdfForm = document.form;
+// Get the signature field
+let field: PdfSignatureField = form.fieldAt(0) as PdfSignatureField;
+// Get the PDF signature
+let signature: PdfSignature = field.getSignature();
+// Get the signature options
+let options: PdfSignatureOptions = signature.getSignatureOptions();
+// Get the cryptographic standard of the signature
+let cryptographicStandard: CryptographicStandard = options.cryptographicStandard;
+// Destroy the document
+document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Replace Empty Signature with Externally Signed Data
+
+This example demonstrates how to replace an empty signature field in a PDF document with externally signed data using the `replaceEmptySignature()` method of the `PdfSignature` class. This method allows embedding externally signed content, certificates, and optional timestamp data into the PDF.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+// Function to create PDF
+function createPdf() {
+// Load the document
+let document: PdfDocument = new PdfDocument('data');
+// Get the first page of the document
+let page: PdfPage = document.getPage(0);
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new signature field
+let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 100, height: 50 });
+// Placeholder for signed data
+let signedData: Uint8Array;
+// Define a callback function used for external signing
+const externalSignatureCallback = (
+ data: Uint8Array,
+ options: {
+ algorithm: DigestAlgorithm;
+ cryptographicStandard: CryptographicStandard;
+ }
+): void => {
+ // Implement external signing logic here
+ signedData = new Uint8Array(); // Placeholder return
+};
+// Create a new signature using external signing with public certificate collection
+const signature: PdfSignature = PdfSignature.create(
+ {
+ cryptographicStandard: CryptographicStandard.cms,
+ algorithm: DigestAlgorithm.sha256
+ },
+ externalSignatureCallback,
+ publicCertificates
+);
+// Set the signature to the field
+field.setSignature(signature);
+// Add the field into PDF form
+form.add(field);
+// Save the document data
+const data: Uint8Array = document.save();
+// Destroy the document
+document.destroy();
+// Replace the empty signature with externally signed hash and certificates
+const signedDocumentData: Uint8Array = PdfSignature.replaceEmptySignature(
+ data,
+ 'Signature',
+ signedData,
+ DigestAlgorithm.sha256,
+ publicCertificates
+);
+// Destroy the document
+document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-HyperLinks.md b/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-HyperLinks.md
new file mode 100644
index 000000000..2a8639193
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-HyperLinks.md
@@ -0,0 +1,308 @@
+---
+title: Working with EJ2 Hyperlinks | Syncfusion
+description: This section explains how to add hyperlink in a new and existing PDF document using Syncfusion EJ2 PDF library
+platform: document-processing
+control: PDF
+documentation: UG
+---
+# Working with EJ2 Hyperlinks in PDF
+
+In EJ2 PDF, hyperlinks can be added to allow the users to navigate to another part of PDF file, web page or any other external content. Essential® EJ2 PDF provides support for all these types of hyperlink.
+
+## Working with Web navigation
+
+This example demonstrates how to create a web link annotation in a PDF document using the `PdfTextWebLinkAnnotation` class. A web link annotation allows users to navigate to a specified URL directly from the PDF by clicking the annotated text.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Create a new PDF string format
+ const format: PdfStringFormat = new PdfStringFormat(PdfTextAlignment.left, PdfVerticalAlignment.top);
+ // Create a new standard font
+ const font: PdfStandardFont = new PdfStandardFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+ // Get the text size
+ let size: number[] = font.measureString("Syncfusion Site", format, [0, 0], 0, 0);
+ // Create a new text web link annotation
+ let annot: PdfTextWebLinkAnnotation = new PdfTextWebLinkAnnotation(50, 40, size[0], size[1], [0, 0, 0], [165, 42, 42], 1);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a text web link annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new PDF string format
+ const format: PdfStringFormat = new PdfStringFormat(PdfTextAlignment.left, PdfVerticalAlignment.top);
+ // Create a new standard font
+ const font: PdfStandardFont = new PdfStandardFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+ // Get the text size
+ let size: number[] = font.measureString("Syncfusion Site", format, [0, 0], 0, 0);
+ // Create a new text web link annotation
+ let annot: PdfTextWebLinkAnnotation = new PdfTextWebLinkAnnotation(50, 40, size[0], size[1], [0, 0, 0], [165, 42, 42], 1);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Working with internal document navigation
+
+This example demonstrates how to create internal navigation within a PDF document using destination-based annotations.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Create a new PDF string format
+ const format: PdfStringFormat = new PdfStringFormat(PdfTextAlignment.left, PdfVerticalAlignment.top);
+ // Create a new standard font
+ const font: PdfStandardFont = new PdfStandardFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+ // Get the text size
+ let size: number[] = font.measureString("Syncfusion Site", format, [0, 0], 0, 0);
+ // Create a new text web link annotation
+ let annot: PdfTextWebLinkAnnotation = new PdfTextWebLinkAnnotation(50, 40, size[0], size[1], [0, 0, 0], [165, 42, 42], 1);
+ // Initializes a new instance of the `PdfDestination` class.
+ let destination: PdfDestination = new PdfDestination();
+ // Sets the zoom factor.
+ destination.zoom = 20;
+ // Sets the page where the destination is situated.
+ destination.page = page;
+ // Sets the mode of the destination.
+ destination.mode = PdfDestinationMode.fitToPage;
+ // Sets the location of the destination.
+ destination.location = [20, 20];
+ // Sets the bounds of the destination.
+ destination.destinationBounds = [20, 20, 100, 50];
+ // Sets destination to document link annotation.
+ annotation.destination = destination;
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet demonstrates how to add internal document navigation to a web link annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the annotation at index 0
+ let annotation: PdfDocumentLinkAnnotation = document.getPage(0).annotations.at(0) as PdfDocumentLinkAnnotation;
+ // Initializes a new instance of the `PdfDestination` class.
+ let destination: PdfDestination = new PdfDestination();
+ // Sets the zoom factor.
+ destination.zoom = 20;
+ // Sets the page where the destination is situated.
+ destination.page = page;
+ // Sets the mode of the destination.
+ destination.mode = PdfDestinationMode.fitToPage;
+ // Sets the location of the destination.
+ destination.location = [20, 20];
+ // Sets the bounds of the destination.
+ destination.destinationBounds = [20, 20, 100, 50];
+ // Sets destination to document link annotation.
+ annotation.destination = destination;
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Working with external document navigation
+
+This example demonstrates how to create external navigation in a PDF document using `PdfFileLinkAnnotation` annotations. External navigation allows users to open and navigate to another PDF or an external file from within the current document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Create a new file link annotation
+ let annotation: PdfFileLinkAnnotation = new PdfFileLinkAnnotation(10, 40, 30, 30, "image.png");
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet demonstrates how to add internal document navigation to a web link annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Get the first page
+ let page: PdfPage = document.getPage(0) as PdfPage;
+ // Create a new file link annotation
+ let annotation: PdfFileLinkAnnotation = new PdfFileLinkAnnotation(10, 40, 30, 30, "image.png");
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-Images.md b/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-Images.md
new file mode 100644
index 000000000..91c499beb
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-Images.md
@@ -0,0 +1,279 @@
+---
+title: Working with EJ2 Images | Syncfusion
+description: This section explains how to add and replace images in the EJ2 PDF document using Essential PDF. It supports both raster and vector images.
+platform: document-processing
+control: PDF
+documentation: UG
+domainurl: ##DomainURL##
+---
+
+# Working with EJ2 images using various options
+
+Essential® PDF supports both raster and vector images.
+
+Images are supported through the `PdfImage` class, which is an abstract base class that provides the common functionality for `PdfBitmap` class.
+
+## Inserting an EJ2 image in a new document
+
+The following raster images are supported in Essential® PDF.
+
+* BMP
+* JPEG
+* JPEG with Exif standard
+* GIF
+* PNG
+* TIFF
+* ICO and ICON
+
+## Adding image in PDF document
+
+This example demonstrates how to add an image to a PDF document using the `PdfBitmap` class and the `draw` method of the `PdfImage` class. The image is loaded from a file and drawn at the specified coordinates on the page.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Get graphics from the page
+ let graphics = page.graphics;
+ // Load the image
+ let image: PdfImage = new PdfBitmap('Image.jpg');
+ // Draw the image.
+ image.draw(graphics, 0,0);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Inserting an image in an existing document
+
+This example demonstrates how to insert an image into an existing PDF document using the `PdfBitmap` class and the `draw` method of the `PdfImage` class. The image is loaded from a file and rendered at the specified position on the selected page.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('input.pdf');
+ // Access first page
+ let page: PdfPage = document.getPage(0);
+ // Get graphics from the page
+ let graphics = page.graphics;
+ // Load the image
+ let image: PdfImage = new PdfBitmap('Image.jpg');
+ // Draw the image.
+ image.draw(graphics, 0,0);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Image Pagination
+
+This example demonstrates how to enable image pagination in a PDF document using the `PdfLayoutFormat` class. By setting the `break` property to PdfLayoutBreakType.fitPage and the `layout` property to PdfLayoutType.paginate, the image is automatically split across multiple pages when it exceeds the page size.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Get graphics from the page
+ let graphics = page.graphics;
+ // Load the image
+ let image: PdfImage = new PdfBitmap('Image.jpg');
+ // Create a layout for drawing
+ let pageLayout: PdfLayoutFormat = new PdfLayoutFormat();
+ // Set the layout break type for drawing
+ pageLayout.break = PdfLayoutBreakType.fitPage;
+ pageLayout.Layout = PdfLayoutType.paginate;
+ // Draw the image.
+ image.draw(graphics, 20, 20, pageLayout);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Clipping and graphics state
+
+This example demonstrates how to apply clipping and manage graphics state in a PDF document using the `PdfGraphics` class. The `save` and `restore` methods preserve the current graphics state, while the `setClip` method defines a clipping region to restrict drawing operations, ensuring precise control over rendering.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Get graphics from the page
+ let graphics = page.graphics;
+ // Load the image— only the part within the clipping region will be visible
+ let image: PdfImage = new PdfBitmap('Image.jpg');
+ // Save the current graphics state (to restore later)
+ let state: PdfGraphicsState = graphics.save();
+ graphics.setClip( [50, 50, 200, 100] );
+ // Draw the image.
+ image.draw(graphics, 20, 20);
+ // Restore the graphics state to remove the clipping region
+ graphics.restore(state);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Applying transparency and rotation to the image
+
+This example demonstrates how to apply transparency and rotation to an image in a PDF document using the `PdfGraphics` class. Transparency can be controlled through the graphics state, while rotation is applied by transforming the graphics context before drawing the image, enabling advanced visual effects in the document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Get graphics from the page
+ let graphics = page.graphics;
+ // Load the image— only the part within the clipping region will be visible
+ let image: PdfImage = new PdfBitmap('Image.jpg');
+ // Save the current graphics state (to restore later)
+ let state: PdfGraphicsState = graphics.save();
+ //Translate the coordinate system to the required position
+ graphics.translateTransform(20, 100);
+ //Apply transparency
+ graphics.setTransparency(0.5);
+ //Rotate the coordinate system
+ graphics.rotateTransform(-45);
+ // Draw the image.
+ image.draw(graphics, 20, 20);
+ // Restore the graphics state to remove the clipping region
+ graphics.restore(state);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-Layers.md b/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-Layers.md
new file mode 100644
index 000000000..175298811
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-Layers.md
@@ -0,0 +1,266 @@
+---
+title: Working with EJ2 Layers | Syncfusion
+description: This section explains adding the layer in the EJ2 PDF document and the layers refers to section of Content of EJ2 PDF document
+platform: document-processing
+control: PDF
+documentation: UG
+---
+
+# Working with EJ2 Layers
+
+Layers, also known as Option Content refers to sections of content in a PDF document that can be selectively viewed or hidden by document authors or consumers. This capability is useful in items such as CAD drawings, layered artwork, maps, and multi-language documents.
+
+Essential® EJ2 PDF provides support to create, add and merge the layers into PDF document.
+
+## Adding Layers in a PDF document
+
+This example demonstrates how to add layers to a PDF document using the `PdfLayer` class. Layers allow you to organize content into separate, optional sections that can be shown or hidden by the user.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Access the collection of layers in the PDF document
+ let layers: PdfLayerCollection = document.layers;
+ // Add a new layer named 'Layer1' to the PDF document
+ let layer: PdfLayer = layers.add('Layer1');
+ // Create a graphics object for the newly added layer on the specified page
+ let graphics: PdfGraphics = layer.createGraphics(page);
+ // Translate the graphics origin to the specified coordinates (x: 100, y: 60)
+ graphics.translateTransform({ x: 100, y: 60 });
+ // Create a black pen with a thickness of 1 unit
+ let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1);
+ // Draw a line using the pen from point (200, 10) to point (300, 100)
+ graphics.drawLine(pen, { x: 200, y: 10 }, { x: 300, y: 100 });
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Adding annotation to layer
+
+This example demonstrates how to add an annotation to a specific layer in a PDF document using the `PdfLayer` class. Associating annotations with layers allows you to control their visibility dynamically.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Access the collection of layers in the document
+ let layers: PdfLayerCollection = document.layers;
+ // Add a new layer to the document with the name 'Layer1'
+ let layer: PdfLayer = layers.add('Layer1');
+ // Access the first annotation on the page
+ let annotation: PdfAnnotation = page.annotations.at(0);
+ // Assign the layer to the annotation
+ annotation.layer = layer;
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Nested Layers
+
+This example demonstrates how to create nested layers in a PDF document using the `PdfLayer` class. Nested layers enable hierarchical organization of content for better control and user experience.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Get the collection of layers from the PDF document
+ let layers: PdfLayerCollection = document.layers;
+ // Add a new layer named 'Layer1' to the document
+ let layer: PdfLayer = layers.add('Layer1');
+ // Create graphics context for 'Layer1' on the specified page
+ let graphics: PdfGraphics = layer.createGraphics(page);
+ // Add two child layers under 'Layer1': 'ChildLayer1' and 'ChildLayer2'
+ let layer1: PdfLayer = layer.layers.add('ChildLayer1');
+ let layer2: PdfLayer = layer.layers.add('ChildLayer2');
+ // Create graphics context for 'ChildLayer2' on the same page
+ graphics = layer2.createGraphics(page);
+ // Apply a translation transform to shift the drawing origin by (100, 60)
+ graphics.translateTransform({ x: 100, y: 60 });
+ // Create a black pen with a thickness of 1 unit for drawing
+ let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1);
+ // Draw a straight line from point (200, 10) to point (300, 100) using the pen
+ graphics.drawLine(pen, { x: 200, y: 10 }, { x: 300, y: 100 });
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Removing layers from an existing PDF document
+
+This example demonstrates how to remove layers from an existing PDF document using the `PdfLayerCollection` class. Removing unnecessary layers helps simplify the document structure.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Get the layer collection.
+ let layers: PdfLayerCollection = document.layers;
+ //Remove the layer
+ layers.RemoveAt(0);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Lock or Unlock layers
+
+This example demonstrates how to lock or unlock layers in a PDF document using the `PdfLayer` class. Locking layers prevents users from toggling their visibility, ensuring that critical content remains displayed.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Access the collection of layers in the PDF document
+ let layers: PdfLayerCollection = document.layers;
+ // Add a new layer named 'Layer1' to the PDF document
+ let layer: PdfLayer = layers.add('Layer1');
+ // Create a graphics object for the newly added layer on the specified page
+ let graphics: PdfGraphics = layer.createGraphics(page);
+ //Set a lock state.
+ layer.Locked = true;
+ // Translate the graphics origin to the specified coordinates (x: 100, y: 60)
+ graphics.translateTransform({ x: 100, y: 60 });
+ // Create a black pen with a thickness of 1 unit
+ let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1);
+ // Draw a line using the pen from point (200, 10) to point (300, 100)
+ graphics.drawLine(pen, { x: 200, y: 10 }, { x: 300, y: 100 });
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-Lists.md b/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-Lists.md
new file mode 100644
index 000000000..b2f5f9145
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-Lists.md
@@ -0,0 +1,134 @@
+---
+title: Working with EJ2 Lists | Syncfusion
+description: This section explains working with EJ2 lists, which are used to display and manage a collection of items in a structured list format.
+platform: document-processing
+control: PDF
+documentation: UG
+---
+
+# Bullets and Lists in EJ2 PDF
+
+The Syncfusion® EJ2 PDF allows you list the content in ordered and unordered list. The ordered list can be number or alphabets and the unordered list can be bullets, circles, and images.
+
+## Adding an ordered list
+
+This example demonstrates how to add a ListBox field to a PDF form using the PdfListBoxField class. A ListBox allows users to select one or more items from a predefined list, making it useful for capturing choices in interactive PDF documents.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Adding an unordered list
+
+This example demonstrates how to add an unordered list to a PDF form using the PdfListBoxField class. An unordered list displays items without a specific sequence, allowing users to choose from multiple options presented in a simple list format.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Adding a sub list
+
+This example demonstrates how to add a sub list within a ListBox field using the PdfListBoxField class. Sub lists enable hierarchical organization of items, making it easier to group related options under a parent category for better user navigation.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-Named-Destination.md b/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-Named-Destination.md
new file mode 100644
index 000000000..70a8d2c09
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-Named-Destination.md
@@ -0,0 +1,183 @@
+---
+title: Working with EJ2 named destination | Syncfusion
+description: This section explains about how to add, remove and modify the named destination in the Essential EJ2 PDF document with example.
+platform: document-processing
+control: PDF
+documentation: UG
+---
+# Working with EJ2 Named Destination
+
+Essential® EJ2 PDF provides support to add, remove and modify the named destination in the PDF document. When you open a PDF file in a web browser, the first page of the PDF file will be shown by default. By adding a named destination, you can open the PDF with the desired location and magnification. The following link example shows how to open a PDF document with named destination in a web page.
+
+**Points to remembers:**
+
+* Individual parameters, together with their values (separated by & or #), can be no greater than 32 characters in length.
+* You cannot use the reserved characters =, #, and &. There is no way to escape these special characters.
+
+## Adding Named Destination to a PDF document
+
+This example demonstrates how to add a named destination to a PDF document using the `PdfNamedDestination` class. Named destinations allow you to create a reference point within the document that can be used for navigation or linking.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Adding Named Destination to an existing PDF document
+
+This example demonstrates how to add a named destination to an existing PDF document using the `PdfNamedDestination` class. This feature helps improve navigation in already created PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Get the bookmarks
+ let bookmarks: PdfBookmarkBase = document.bookmarks;
+ // Gets the bookmark at the specified index
+ let bookmark: PdfBookmark = bookmarks.at(0) as PdfBookmark;
+ // Gets the named destination
+ let namedDestination: PdfNamedDestination = bookmark.namedDestination;
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Removing/Modifying the named destination
+
+This example demonstrates how to remove or modify a named destination in a PDF document using the `PdfNamedDestination` class. You can update the destination or delete it to maintain accurate navigation.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // 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, [100, 200]);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Adding named destination to the bookmarks
+
+This example demonstrates how to associate a named destination with a bookmark in a PDF document using the PdfBookmark and `PdfNamedDestination` classes. This allows bookmarks to point to predefined locations for better navigation.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-PDF-Pages.md b/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-PDF-Pages.md
new file mode 100644
index 000000000..fedd1db27
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-PDF-Pages.md
@@ -0,0 +1,459 @@
+---
+title: Working with EJ2 PDF pages | Syncfusion
+description: This section explains how to add, rearrange, remove pages and detect empty pages from the EJ2 PDF document
+platform: document-processing
+control: PDF
+documentation: UG
+---
+# Working with EJ2 PDF Pages
+
+## Adding a new page to the document
+
+The following code sample explains you on how to add a `PdfPage` in a PDF document. When multiple pages are added, the new page is always added to the end of the document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a PDF document
+ let document: PdfDocument = new PdfDocument('input.pdf', 'password');
+ // Add a new PDF page
+ let page: PdfPage = document.addPage();
+ // Save the document
+ document.save('output.pdf');
+ // Destroy the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Adding margin to the PDF pages
+
+The `PdfPageSettings` class is used to define properties such as margins, orientation, rotation, and page size. In this example, margins are set using the `PdfMargins` class to ensure consistent spacing around the page content. These settings can be applied when creating sections or pages in the PDF for precise layout control.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Create a new PDF page settings instance
+ let pageSettings: PdfPageSettings = new PdfPageSettings();
+
+ // Sets the margins
+ pageSettings.margins = new PdfMargins(40);
+
+ // Add a page
+ const page = document.addPage(pageSettings);
+ // Get graphics from the page
+ let graphics = page.graphics;
+ // Set font
+ font: PdfStandardFont = new PdfStandardFont(PdfFontFamily.helvetica, 10);
+ // Draw text
+ graphics.drawString('Hello World!!!', font, [70, 10, 200, 50], new PdfPen([255, 0, 0], 1), new PdfBrush([0, 0, 255]));
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Adding sections with different page settings
+
+This example demonstrates how to add sections with different page settings in a PDF document. It shows how to configure rotation, orientation, margins, and page size using `PdfPageSettings`. The `PdfSection` class is used to apply unique page customizations within a single PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+
+ // Define first page settings
+ let settings1: PdfPageSettings = new PdfPageSettings();
+ settings1.rotation = PdfRotationAngle.angle90;
+ settings1.orientation = PdfPageOrientation.landscape;
+ settings1.margins = new PdfMargins(40);
+ settings1.size = [595, 842];
+ // Add a section to the document with the specified settings
+ let section1: PdfSection = document.addSection(settings1);
+ // Add a page to the section
+ let page1: PdfPage = section1.addPage();
+ // Get graphics object to draw on the page
+ let graphics1 = page1.graphics;
+ // Set font for text
+ let font: PdfStandardFont = new PdfStandardFont(PdfFontFamily.helvetica, 20);
+ // Draw text on the page with specified font, position, and styles
+ graphics1.drawString('Rotated by 90 degree', font, [10, 10, 200, 50], new PdfPen([255, 0, 255], 1), new PdfBrush([0, 0, 0]));
+
+ // Define Second page settings
+ let settings2: PdfPageSettings = new PdfPageSettings();
+ settings2.rotation = PdfRotationAngle.angle180;
+ settings2.orientation = PdfPageOrientation.landscape;
+ settings2.margins = new PdfMargins(40);
+ settings2.size = [595, 842];
+ // Add a section to the document with the specified settings
+ let section2: PdfSection = document.addSection(settings2);
+ // Add a page to the section
+ let page2: PdfPage = section2.addPage();
+ // Get graphics object to draw on the page
+ let graphics2 = page2.graphics;
+ // Draw text on the page with specified font, position, and styles
+ graphics2.drawString('Hello World!!!', font, [10, 10, 200, 50], new PdfPen([255, 0, 255], 1), new PdfBrush([0, 0, 0]));
+
+ // Save the PDF document
+ let data = document.save('Output.pdf');
+ // Close and dispose the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Get number of pages from a PDF document
+
+This example demonstrates how to retrieve the total number of pages in a PDF document using the `pageCount` property of the `PdfDocument` class. The page count returns an integer value representing the number of pages currently in the document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Gets the page count
+ let count: number = document.pageCount;
+ // Destroy the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Importing pages from an existing document
+
+This example demonstrates how to import pages from an existing PDF document into a new PDF document using the `importPageRange` method of the `PdfDocument` class. This method allows you to specify a start and end index to copy a range of pages from the source document into the target document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Define start and end page indices
+ const startIndex = 0;
+ const endIndex = document.pageCount - 1;
+
+ // Import all pages from the loaded document into the new document
+ document.importPageRange(document, startIndex, endIndex);
+
+ // Save the new document
+ document.save('Output.pdf');
+ // Close the loaded document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Rearranging pages in an existing document
+
+This example demonstrates how to rearrange the pages in an existing PDF document using the `reorderPages` method of the `PdfDocument` class. The method accepts an array of page indices that defines the new order of pages within the document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Reorders the pages in the PDF document
+ document.reorderPages([3, 2, 1]);
+ // Save the document
+ document.save('output.pdf');
+ // Destroy the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Removing pages from a document
+
+This example demonstrates how to remove a page from a PDF document using the `removePage` method of the `PdfDocument` class. The method takes the zero-based index of the page to be removed, effectively deleting that page from the document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument("Input.pdf");
+ // Removes the first page
+ document.removePage(0);
+ // Save the document
+ document.save('output.pdf');
+ // Destroy the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Rotating a PDF page
+
+This example demonstrates how to rotate a PDF page using the `rotation` property of the `PdfPageSettings` class. The property accepts a value from the `PdfRotationAngle` enumeration, such as angle180, to specify the rotation angle applied to the page.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ //Rotate a section/page
+ let settings: PdfPageSettings = new PdfPageSettings();
+ settings.rotation = PdfRotationAngle.angle180;
+
+ // Add a section to the document with the specified settings
+ let section: PdfSection = document.addSection(settings);
+
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Get graphics object to draw on the page
+ let graphics = page.graphics;
+ // Set font for text
+ let font: PdfStandardFont = new PdfStandardFont(PdfFontFamily.helvetica, 20);
+ // Draw text on the page with specified font, position, and styles
+ graphics.drawString('Hello World!!!', font, [10, 10, 200, 50], new PdfPen([255, 0, 255], 1), new PdfBrush([0, 0, 0]));
+ // Save the PDF document
+ let data = document.save('Output.pdf');
+ // Close and dispose the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Rotating an existing PDF page
+
+This example demonstrates how to rotate an existing PDF page using the `rotation` property of the `PdfPage` class. The property accepts a value from the `PdfRotationAngle` enumeration, such as angle180, to specify the rotation angle applied to the selected page.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access first page
+ let page: PdfPage = document.getPage(0);
+ //Set the rotation for loaded page
+ page.rotation = PdfRotationAngle.angle180;
+ // Save the document
+ document.save('output.pdf');
+ // Destroy the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Splitting a PDF file to individual pages
+
+This example demonstrates how to split a PDF file into individual pages by importing a specific page from the source document using the `importPage` method of the `PdfDocument` class. The method takes the zero-based index of the page to be copied and adds it as a new page in the target document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let sourceDocument: PdfDocument = new PdfDocument('Input.pdf');
+ // Copy the second page and add it as third page
+ sourceDocument.importPage(1);
+ // Save the output PDF
+ sourceDocument.save('Output.pdf');
+ // Destroy the documents
+ sourceDocument.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-PDF-Templates.md b/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-PDF-Templates.md
new file mode 100644
index 000000000..43ca8e0a9
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-PDF-Templates.md
@@ -0,0 +1,111 @@
+---
+title: Working with EJ2 PDF templates | Syncfusion
+description: This section explains how to create a PDF template is a drawing surface, where contents can be added using EJ2 PDF library.
+platform: document-processing
+control: PDF
+documentation: UG
+---
+# Working with EJ2 PDF Templates
+
+A EJ2 PDF template is a drawing surface, where contents can be added. All the elements that can be added to a PdfPage is supported in PdfTemplate as well. The template in turn can be drawn over the page or can be positioned at any part of the page.
+
+## Creating a new PDF template
+
+This example demonstrates how to create a new PDF template using the `PdfTemplate` class. A PDF template allows you to define reusable graphics or content that can be drawn on multiple pages or annotations within a PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Create a new rubber stamp annotation
+ const annotation: PdfRubberStampAnnotation = new PdfRubberStampAnnotation(50, 100, 100, 50);
+ // Get the normal appearance of the annotation
+ let normalAppearance: PdfTemplate = annotation.appearance.normal;
+ // Create new image object by using JPEG image data as Base64 string format
+ let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z');
+ // Draw the image as the custom appearance for the annotation
+ normalAppearance.graphics.drawImage(image, 0, 0, 100, 50);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Creating templates from existing PDF document
+
+This example demonstrates how to create templates from an existing PDF document using the `PdfTemplate` class. A PDF template allows you to extract and reuse content from a PDF page or annotation, enabling consistent design and repeated elements across multiple pages.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Get the first page
+ let page: PdfPage = document.getPage(0) as PdfPage;
+ // Create a new rubber stamp annotation
+ const annotation: PdfRubberStampAnnotation = new PdfRubberStampAnnotation(50, 100, 100, 50);
+ // Get the normal appearance of the annotation
+ let normalAppearance: PdfTemplate = annotation.appearance.normal;
+ // Create new image object by using JPEG image data as Base64 string format
+ let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z');
+ // Draw the image as the custom appearance for the annotation
+ normalAppearance.graphics.drawImage(image, 0, 0, 100, 50);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
diff --git a/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-PDF-document.md b/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-PDF-document.md
new file mode 100644
index 000000000..f84ebe37b
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-PDF-document.md
@@ -0,0 +1,215 @@
+---
+title: Working with EJ2 PDF Document | Syncfusion
+description: This section explains how to set document Settings and properties to the EJ2 PDF document using Essential PDF
+platform: document-processing
+control: PDF
+documentation: UG
+---
+# Working with EJ2 PDF Document
+
+## Adding the document settings
+
+This example shows how to configure custom page settings before adding a page to a PDF document. It creates a `PdfPageSettings` instance, applies margins, page size and sets the orientation.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Create a new PDF page settings instance
+ let pageSettings: PdfPageSettings = new PdfPageSettings();
+ // Sets the margins
+ pageSettings.margins = new PdfMargins(40);
+ // Sets the page size
+ pageSettings.size = [595, 842];
+ // Sets the page orientation
+ pageSettings.orientation = PdfPageOrientation.landscape;
+ // Add a page
+ const page = document.addPage(pageSettings);
+ // Get graphics from the page
+ let graphics = page.graphics;
+ // Set font
+ font: PdfStandardFont = new PdfStandardFont(PdfFontFamily.helvetica, 10);
+ // Draw text
+ graphics.drawString('Hello World!!!', font, [70, 10, 200, 50], new PdfPen([255, 0, 0], 1), new PdfBrush([0, 0, 255]));
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Creating sections in a PDF
+
+This example demonstrates how to create a section in a PDF document with custom page settings. It shows how to configure rotation, orientation, margins, and page size using `PdfPageSettings`. The `PdfSection` class is used to apply different page customizations within a single PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Define page settings
+ let settings: PdfPageSettings = new PdfPageSettings();
+ settings.rotation = PdfRotationAngle.angle180;
+ settings.orientation = PdfPageOrientation.landscape;
+ settings.margins = new PdfMargins(40);
+ settings.size = [595, 842];
+
+ // Add a section to the document with the specified settings
+ let section: PdfSection = document.addSection(settings);
+
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Get graphics object to draw on the page
+ let graphics = page.graphics;
+ // Set font for text
+ let font: PdfStandardFont = new PdfStandardFont(PdfFontFamily.helvetica, 20);
+ // Draw text on the page with specified font, position, and styles
+ graphics.drawString('Hello World!!!', font, [10, 10, 200, 50], new PdfPen([255, 0, 255], 1), new PdfBrush([0, 0, 0]));
+ // Save the PDF document
+ let data = document.save('Output.pdf');
+ // Close and dispose the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Working with document properties
+
+This example demonstrates how to create a PDF document, set its metadata properties such as title, author, subject, keywords, creator, producer, language, and dates, and then retrieve these properties using the `PdfDocumentInformation` class.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Access the document information (metadata)
+ let documentProperties: PdfDocumentInformation = document.getDocumentInformation();
+
+ // Set document properties
+ documentProperties.title = "Sample PDF Document"; // Title of the PDF
+ documentProperties.author = "John Doe"; // Author name
+ documentProperties.subject = "PDF Metadata Example"; // Subject of the document
+ documentProperties.keywords = "PDF, Metadata, Example"; // Keywords for search
+ documentProperties.creator = "Syncfusion PDF Library"; // Application that created the PDF
+ documentProperties.producer = "Syncfusion PDF Engine"; // PDF producer
+ documentProperties.language = "en-US"; // Language of the document
+ documentProperties.creationDate = new Date(); // Creation date
+ documentProperties.modificationDate = new Date(); // Last modified date
+ // Add a page
+ const page = document.addPage();
+ // Get graphics from the page
+ let graphics = page.graphics;
+ // Set font
+ font: PdfStandardFont = new PdfStandardFont(PdfFontFamily.helvetica, 10);
+ // Draw text
+ graphics.drawString('Hello World!!!', font, [70, 10, 200, 50], new PdfPen([255, 0, 0], 1), new PdfBrush([0, 0, 255]));
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Performing incremental update for PDF document
+
+The `isIncrementalUpdate` property allows you to check if the PDF document supports incremental updates, which can improve performance during modifications by appending changes rather than rewriting the entire document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a PDF document
+ let document: PdfDocument = new PdfDocument();
+
+ // Disable incremental update to rewrite the entire file
+ document.fileStructure.isIncrementalUpdate = false;
+
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-Redaction.md b/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-Redaction.md
new file mode 100644
index 000000000..afff9ae16
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-Redaction.md
@@ -0,0 +1,411 @@
+---
+title: Working with EJ2 Redaction |Syncfusion
+description: This section explains how to Redact the content from an existing PDF document by using Essential EJ2 PDF
+platform: document-processing
+control: PDF
+documentation: UG
+---
+# Working with EJ2 PDF Redaction
+
+Redacting a PDF is the process of permanently removing sensitive or confidential information from PDF documents. Syncfusion® EJ2 PDF library provides an easy way to redact PDF documents.
+
+## Removing sensitive content from the PDF document
+
+Redaction permanently removes confidential or sensitive information from a PDF. The PdfRedactionAnnotation class allows you to define areas to redact, ensuring the underlying text or image data is completely deleted from the document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new redaction annotation
+ const annotation: PdfRedactionAnnotation = new PdfRedactionAnnotation (50, 100, 100, 50);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Display text on the redacted area
+
+You can overlay custom text on the redacted region to indicate the reason for redaction or provide context. For example, adding "Confidential" or "Redacted" helps users understand why the content was removed.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new redaction annotation
+ const font: PdfFont = new PdfStandardFont(PdfFontFamily.timesRoman, 12);
+ const annot: PdfRedactionAnnotation = new PdfRedactionAnnotation(100, 100, 100, 100, { borderColor: [255, 0, 0], repeatText: true,
+ overlayText: 'Sample Overlay', font: font, textColor: [0, 0, 0], appearanceFillColor: [255, 255, 255]});
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Drawing image on the redacted area
+
+You can draw an image over the redacted area. This is useful for branding or replacing sensitive content with a placeholder graphic.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Drawing pattern on the redacted area
+
+Patterns such as diagonal lines or cross-hatch can be applied to the redacted region for visual distinction. This makes redacted areas easily recognizable in the document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Fill color on the redacted area
+
+You can apply a solid fill color to cover the redacted content. This is the most common approach for redaction.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Redaction without fill color and appearance
+
+If you prefer a minimalistic approach, you can remove the content without adding any visual appearance. The area remains blank, ensuring sensitive data is gone but without extra styling.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Redaction appearance fill color
+
+Customize the appearance of the redacted area by applying specific fill colors. This helps maintain a consistent design or highlight redacted sections in a visually appealing way.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Get redaction progress
+
+For large documents or batch operations, you can track the progress of redaction. This feature provides feedback during processing, ensuring smooth execution and user awareness.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Redaction result
+
+After applying redaction, the content is permanently removed from the PDF. The result ensures that the sensitive information cannot be recovered, even through text extraction or search.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Redact text content alone on the redacted area
+
+This option allows you to remove only the text content within the specified redaction area while leaving images or other graphical elements intact. It ensures that sensitive textual information is permanently deleted without affecting the overall layout or visual components of the PDF.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-Shapes.md b/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-Shapes.md
new file mode 100644
index 000000000..39d17c3a2
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-Shapes.md
@@ -0,0 +1,844 @@
+---
+title: PDF Working with EJ2 Shapes | Syncfusion
+description: This section explains how to add shapes such as Line, curve, path, text, rectangle, pie, arc, Bezier, ellipse in the EJ2 PDF document
+platform: document-processing
+control: PDF
+documentation: UG
+---
+# Working with EJ2 Shapes in PDF Documents
+
+Essential® PDF has support for adding the below shapes.
+
+* Line
+* Curve
+* Path
+* Text
+* Rectangle
+* Pie
+* Arc
+* Bezier
+* Ellipse
+
+## Adding Shapes to a PDF document
+
+Essential® EJ2 PDF supports adding shapes with different types of brushes like solid bush, gradient brush, tiling brush, and image brush along with various color spaces and transparency levels.
+
+### Polygon
+
+This example demonstrates how to draw a polygon shape in a PDF document using the `drawPolygon` method of the `PdfGraphics` class.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Get graphics from the page
+ let graphics = page.graphics;
+ // Create a new pen
+ let pen: PdfPen = new PdfPen([0, 0, 0], 1);
+ // Define the polygon points
+ let points: number[][] = [[10, 100], [10, 200], [100, 100], [100, 200], [55, 150]];
+ // Draw the polygon on the page graphics
+ graphics.drawPolygon(points, pen);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to draw a polygon in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Get graphics from the page
+ let graphics = page.graphics;
+ // Create a new pen
+ let pen: PdfPen = new PdfPen([0, 0, 0], 1);
+ // Define the polygon points
+ let points: number[][] = [[10, 100], [10, 200], [100, 100], [100, 200], [55, 150]];
+ // Draw the polygon on the page graphics
+ graphics.drawPolygon(points, pen);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Line
+
+This example demonstrates how to draw a straight line in a PDF document using the `drawLine` method of the `PdfGraphics` class.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Get graphics from the page
+ let graphics = page.graphics;
+ // Create a new pen
+ let pen: PdfPen = new PdfPen([0, 0, 0], 1);
+ // Draw a line on the page graphics
+ graphics.drawLine(pen, 10, 10, 100, 100);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to draw a line in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Get graphics from the page
+ let graphics = page.graphics;
+ // Create a new pen
+ let pen: PdfPen = new PdfPen([0, 0, 0], 1);
+ // Draw a line on the page graphics
+ graphics.drawLine(pen, 10, 10, 100, 100);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Path
+
+This example demonstrates how to draw a path in a PDF document using the `drawPath` method of the `PdfGraphics` class.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Create a new path
+ let path: PdfPath = new PdfPath();
+ // Gets the graphics of the PDF page
+ let graphics: PdfGraphics = page.graphics;
+ // Create a new pen
+ let pen: PdfPen = new PdfPen([0, 0, 0], 1);
+ // Add lines to the path
+ path.addLine(10, 100, 50, 100);
+ path.addLine(50, 100, 50, 150);
+ path.addLine(50, 150, 10, 100);
+ // Draw the path on the page graphics
+ graphics.drawPath(path, pen);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to draw path in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new path
+ let path: PdfPath = new PdfPath();
+ // Gets the graphics of the PDF page
+ let graphics: PdfGraphics = page.graphics;
+ // Create a new pen
+ let pen: PdfPen = new PdfPen([0, 0, 0], 1);
+ // Add lines to the path
+ path.addLine(10, 100, 50, 100);
+ path.addLine(50, 100, 50, 150);
+ path.addLine(50, 150, 10, 100);
+ // Draw the path on the page graphics
+ graphics.drawPath(path, pen);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Text
+
+This example demonstrates how to draw a text in a PDF document using the `drawString` method of the `PdfGraphics` class.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Get graphics from the page
+ let graphics = page.graphics;
+ // Set font
+ let font: PdfStandardFont = new PdfStandardFont(PdfFontFamily.helvetica, 10);
+ // Draw text
+ graphics.drawString('Hello World!!!', font, [70, 10, 200, 50], new PdfPen([255, 0, 0], 1), new PdfBrush([0, 0, 255]));
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to draw text in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Get graphics from the page
+ let graphics = page.graphics;
+ // Set font
+ let font: PdfStandardFont = new PdfStandardFont(PdfFontFamily.helvetica, 10);
+ // Draw text
+ graphics.drawString('Hello World!!!', font, [70, 10, 200, 50], new PdfPen([255, 0, 0], 1), new PdfBrush([0, 0, 255]));
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Rectangle
+
+This example demonstrates how to draw a rectangle in a PDF document using the `drawRectangle` method of the `PdfGraphics` class.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Gets the graphics of the PDF page
+ let graphics: PdfGraphics = page.graphics;
+ // Create a new pen.
+ let pen: PdfPen = new PdfPen([0, 0, 0], 1);
+ // Draw a rectangle on the page graphics.
+ graphics.drawRectangle(10, 20, 100, 200, pen);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to draw rectangle in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Gets the graphics of the PDF page
+ let graphics: PdfGraphics = page.graphics;
+ // Create a new pen.
+ let pen: PdfPen = new PdfPen([0, 0, 0], 1);
+ // Draw a rectangle on the page graphics.
+ graphics.drawRectangle(10, 20, 100, 200, pen);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Pie
+
+This example demonstrates how to draw a pie in a PDF document using the `drawPie` method of the `PdfGraphics` class.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Gets the graphics of the PDF page
+ let graphics: PdfGraphics = page.graphics;
+ // Create a new pen
+ let pen: PdfPen = new PdfPen([0, 0, 0], 1);
+ // Draw a pie slice on the page graphics
+ graphics.drawPie(10, 50, 200, 200, 180, 60, pen);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to draw pie in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Gets the graphics of the PDF page
+ let graphics: PdfGraphics = page.graphics;
+ // Create a new pen
+ let pen: PdfPen = new PdfPen([0, 0, 0], 1);
+ // Draw a pie slice on the page graphics
+ graphics.drawPie(10, 50, 200, 200, 180, 60, pen);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Arc
+
+This example demonstrates how to draw a arc in a PDF document using the `drawArc` method of the `PdfGraphics` class.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Gets the graphics of the PDF page
+ let graphics: PdfGraphics = page.graphics;
+ // Create a new pen
+ let pen: PdfPen = new PdfPen([0, 0, 0], 1);
+ // Draw a arc slice on the page graphics
+ graphics.drawArc(10, 20, 100, 200, 20, 30, pen);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to draw arc in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Gets the graphics of the PDF page
+ let graphics: PdfGraphics = page.graphics;
+ // Create a new pen
+ let pen: PdfPen = new PdfPen([0, 0, 0], 1);
+ // Draw a aec slice on the page graphics
+ graphics.drawArc(10, 20, 100, 200, 20, 30, pen);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Bezier
+
+This example demonstrates how to draw a bezier in a PDF document using the `drawBezier` method of the `PdfGraphics` class.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Gets the graphics of the PDF page
+ let graphics: PdfGraphics = page.graphics;
+ // Create a new pen
+ let pen: PdfPen = new PdfPen([0, 0, 0], 1);
+ // Draw a Bezier curve on the page graphics
+ graphics.drawBezier(50, 100, 200, 50, 100, 150, 150, 100, pen);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to draw bezier in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Gets the graphics of the PDF page
+ let graphics: PdfGraphics = page.graphics;
+ // Create a new pen
+ let pen: PdfPen = new PdfPen([0, 0, 0], 1);
+ // Draw a Bezier curve on the page graphics
+ graphics.drawBezier(50, 100, 200, 50, 100, 150, 150, 100, pen);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Ellipse
+
+This example demonstrates how to draw a ellipse in a PDF document using the `drawEllipse` method of the `PdfGraphics` class.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Gets the graphics of the PDF page
+ let graphics: PdfGraphics = page.graphics;
+ // Create a new pen
+ let pen: PdfPen = new PdfPen([0, 0, 0], 1);
+ // Draw an ellipse on the page graphics
+ graphics.drawEllipse(10, 20, 100, 200, pen);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to draw ellipse in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Gets the graphics of the PDF page
+ let graphics: PdfGraphics = page.graphics;
+ // Create a new pen
+ let pen: PdfPen = new PdfPen([0, 0, 0], 1);
+ // Draw an ellipse on the page graphics
+ graphics.drawEllipse(10, 20, 100, 200, pen);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-Text-Extraction.md b/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-Text-Extraction.md
new file mode 100644
index 000000000..01a596e67
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-Text-Extraction.md
@@ -0,0 +1,277 @@
+---
+title: Working with EJ2 Text Extraction | Syncfusion
+description: This section explains how to extract text and its bounds from a particular page or the entire EJ2 PDF document.
+platform: document-processing
+control: PDF
+documentation: UG
+---
+# Working with EJ2 Text Extraction
+
+Essential® EJ2 PDF allows you to extract the text from a particular page or the entire PDF document.
+
+## Working with basic text extraction
+
+This example demonstrates how to extract text from a PDF page using the `PdfDataExtractor` class. Basic text extraction allows retrieving plain text content from a PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Initialize a new instance of the `PdfDataExtractor` class
+ let extractor: PdfDataExtractor = new PdfDataExtractor(document);
+ // Extract text content from the PDF document.
+ let text: string = extractor.extractText();
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Working with layout based text extraction
+
+This example demonstrates how to extract text from a PDF page using the `PdfDataExtractor` class with layout-based options.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Initialize a new instance of the `PdfDataExtractor` class
+ let extractor: PdfDataExtractor = new PdfDataExtractor(document);
+ // Extracts text from the PDF Page based on its layout
+ let text: string = extractor.extractText({isLayout: true});
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Layout based text extraction may take additional processing time when compared to the normal extraction mode.
+
+## Text Extraction with Bounds
+
+### Working with Lines
+
+This example demonstrates how to extract text from a PDF page based on individual lines using the `extractTextLines` method. This approach provides a collection of `TextLine` objects, allowing precise access to text content line by line.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Initialize a new instance of the `PdfDataExtractor` class
+ let extractor: PdfDataExtractor = new PdfDataExtractor(document);
+ // Extracts text from the PDF Page based on its line
+ let textCollection: TextLine[] = extractor.extractTextLines({ startPageIndex: 0, endPageIndex: 0 });
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Working with words
+
+This example demonstrates how to extract words from a PDF document using the `extractTextLines` method. Each line contains a collection of `TextWord` objects.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Create a PdfDataExtractor instance for the given PDF document
+ let extractor: PdfDataExtractor = new PdfDataExtractor(document);
+ // Extract text lines from all pages in the document
+ let textCollection: TextLine[] = extractor.extractTextLines({
+ startPageIndex: 0,
+ endPageIndex: document.pageCount - 1
+ });
+ let page: PdfPage;
+ // Iterate through each extracted text line
+ for (let i: number = 0; i < textCollection.length; i++) {
+ // Get the page corresponding to the current text line
+ page = document.getPage(textCollection[i].pageIndex);
+ // Retrieve all words from the current text line
+ const wordCollection: TextWord[] = textCollection[i].words;
+ // Iterate through each word in the line
+ for (let j: number = 0; j < wordCollection.length; j++) {
+ const word: TextWord = wordCollection[j];
+ if (word) {
+ // Iterate through each glyph (character shape) in the word
+ for (let k: number = 0; k < word.glyphs.length; k++) {
+ let glyph: TextGlyph = word.glyphs[k];
+ // Draw a rectangle around the glyph's bounding box on the page
+ page.graphics.drawRectangle(
+ glyph.bounds[0], // X-coordinate
+ glyph.bounds[1], // Y-coordinate
+ glyph.bounds[2], // Width
+ glyph.bounds[3], // Height
+ new PdfPen([238, 130, 238], 1) // Violet-colored pen with thickness 1
+ );
+ }
+ }
+ }
+ }
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Working with characters
+
+This example demonstrates how to access individual characters from a PDF document using the `TextGlyph` class.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Create a PdfDataExtractor instance for the given PDF document
+ let extractor: PdfDataExtractor = new PdfDataExtractor(document);
+ // Extract text lines from all pages in the document
+ let textCollection: TextLine[] = extractor.extractTextLines({
+ startPageIndex: 0,
+ endPageIndex: document.pageCount - 1
+ });
+ let page: PdfPage;
+ // Iterate through each extracted text line
+ for (let i: number = 0; i < textCollection.length; i++) {
+ // Get the page corresponding to the current text line
+ page = document.getPage(textCollection[i].pageIndex);
+ // Retrieve all words from the current text line
+ const wordCollection: TextWord[] = textCollection[i].words;
+ // Iterate through each word in the line
+ for (let j: number = 0; j < wordCollection.length; j++) {
+ const word: TextWord = wordCollection[j];
+ if (word) {
+ // Iterate through each glyph (character shape) in the word
+ for (let k: number = 0; k < word.glyphs.length; k++) {
+ let glyph: TextGlyph = word.glyphs[k];
+ // Draw a rectangle around the glyph's bounding box on the page
+ page.graphics.drawRectangle(
+ glyph.bounds[0], // X-coordinate
+ glyph.bounds[1], // Y-coordinate
+ glyph.bounds[2], // Width
+ glyph.bounds[3], // Height
+ new PdfPen([238, 130, 238], 1) // Violet-colored pen with thickness 1
+ );
+ }
+ }
+ }
+ }
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-Text.md b/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-Text.md
new file mode 100644
index 000000000..0cf5f55b9
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/Javascript-es6/Working-with-Text.md
@@ -0,0 +1,474 @@
+---
+title: Working with EJ2 Text | Syncfusion
+description: This section explains how to add text to the EJ2 PDF document using different type of fonts, TrueType fonts and standard fonts
+platform: document-processing
+control: PDF
+documentation: UG
+---
+# Working with text in the EJ2 PDF document
+
+## Drawing text in a new document
+
+This example demonstrates how to draw text in a new PDF document using the `drawString` method of the `PdfGraphics` class. The method allows you to specify the text content, font, brush, and position to render the text on a page within the document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Get graphics from the page
+ let graphics = page.graphics;
+ // Set font
+ let font: PdfStandardFont = new PdfStandardFont(PdfFontFamily.helvetica, 10);
+ // Draw text
+ graphics.drawString('Hello World!!!', font, [70, 10, 200, 50], new PdfPen([255, 0, 0], 1), new PdfBrush([0, 0, 255]));
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Due to the inherent limitations of the PDF specification and the rendering capabilities of PDF libraries, emojis with skin tone modifiers are not supported in generated PDF documents. Only the base versions of emojis can be displayed. This limitation is common across most PDF libraries, as the PDF format does not explicitly support rendering skin tone variations in emojis.
+
+## The importance of saving and restoring graphics state in PDF content rendering
+
+This example demonstrates the importance of saving and restoring the graphics state when rendering PDF content using the `save` and `restore` methods of the `PdfGraphics` class. These methods ensure that any transformations, such as scaling, rotation, or color changes, applied to the graphics context do not affect subsequent drawing operations, maintaining consistent layout and design.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Get graphics from the page
+ let graphics = page.graphics;
+ // Save the current graphics state and apply transformations
+ graphics.save();
+ graphics.translateTransform(100, 50);
+ graphics.rotateTransform(45);
+ // Set font
+ let font: PdfStandardFont = new PdfStandardFont(PdfFontFamily.helvetica, 10);
+ // Draw text
+ graphics.drawString('Hello World!!!', font, [70, 10, 200, 50], new PdfPen([255, 0, 0], 1), new PdfBrush([0, 0, 255]));
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Drawing text in an existing document
+
+This example demonstrates how to draw text in an existing PDF document using the `drawString` method of the `PdfGraphics` class. The method allows you to specify the text content, font, brush, and position to render the text on a selected page within the document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('input.pdf');
+ // Access first page
+ let page: PdfPage = document.getPage(0);
+ // Set font
+ let font: PdfStandardFont = new PdfStandardFont(PdfFontFamily.helvetica, 10);
+ // Draw text
+ page.graphics.drawString('Hello World!!!', font, [70, 10, 200, 50], new PdfPen([255, 0, 0], 1), new PdfBrush([0, 0, 255]));
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Drawing text using different fonts
+
+Essential® PDF allows you to add text to the PDF document using the following types of fonts.
+
+1. Standard fonts
+2. TrueType fonts
+3. Chinese, Japanese and Korean (CJK) fonts
+
+### Draw text using standard fonts
+
+This example demonstrates how to draw text using standard fonts in a PDF document by utilizing the `drawString` method of the `PdfGraphics` class along with predefined font types from the `PdfStandardFont` class. Standard fonts such as Helvetica, TimesRoman, or Courier can be specified to render text with consistent and widely supported typography.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Set font
+ let font: PdfStandardFont = new PdfStandardFont(PdfFontFamily.helvetica, 10);
+ // Draw text
+ page.graphics.drawString('Hello World!!!', font, [70, 10, 200, 50], new PdfPen([255, 0, 0], 1), new PdfBrush([0, 0, 255]));
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Draw Text using TrueType fonts
+
+This example demonstrates how to draw text using TrueType fonts in a PDF document by utilizing the `drawString` method of the `PdfGraphics` class along with a `PdfTrueTypeFont` instance. The TrueType font provides enhanced text rendering with support for custom font styles.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Set font
+ let font: PdfTrueTypeFont = new PdfTrueTypeFont('Arial.ttf', 10);
+ // Draw text
+ page.graphics.drawString('Hello World!!!', font, [70, 10, 200, 50], new PdfPen([255, 0, 0], 1), new PdfBrush([0, 0, 255]));
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Draw text using CJK fonts
+
+This example demonstrates how to draw text using fonts in a PDF document by utilizing the `drawString` method of the `PdfGraphics` class along with a `PdfCjkStandardFont` instance. CJK fonts provide support for Chinese, Japanese, and Korean characters, ensuring accurate rendering of multilingual text in the document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Set font
+ let font: PdfCjkStandardFont = new PdfCjkStandardFont(PdfCjkFontFamily.heiseiMinchoW3, 10);
+ // Draw text
+ page.graphics.drawString('こんにちは世界', font, [70, 10, 200, 50], new PdfPen([255, 0, 0], 1), new PdfBrush([0, 0, 255]));
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Drawing text using OpenType font
+
+This example demonstrates how to draw text using an OpenType font in a PDF document by utilizing the `drawString` method of the `PdfGraphics` class along with a `PdfTrueTypeFont` instance. OpenType fonts provide advanced typographic features and support for a wide range of characters.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Set font
+ let font: PdfTrueTypeFont = new PdfTrueTypeFont("Arial.otf", 10);
+ // Draw text
+ page.graphics.drawString('Syncfusion Essential EJ2 PDF library used to create, read, and edit PDF files in any application', font, [70, 10, 200, 50], new PdfPen([255, 0, 0], 1), new PdfBrush([0, 0, 255]));
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Drawing text using different text alignment
+
+This example demonstrates how to draw text in a PDF document using different text alignment options by utilizing the `PdfStringFormat` class. The alignment can be set through the alignment property, which supports values such as Left, Center, and Right, allowing precise control over the positioning of text within the page or a defined rectangle.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Create a string format object to define text layout
+ let format = new PdfStringFormat();
+ format.alignment = PdfTextAlignment.right; // Align text to the right
+ format.wordSpacing = 2; // Set word spacing
+ format.characterSpacing = 1; // Set character spacing
+ // Set font
+ let font: PdfStandardFont = new PdfStandardFont(PdfFontFamily.helvetica, 10);
+ // Draw text
+ page.graphics.drawString('Syncfusion Essential EJ2 PDF library', font, [70, 10, 200, 50], new PdfPen([255, 0, 0], 1), new PdfBrush([0, 0, 255]), format);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## LineLimit, ClipPath, NoClip properties in PdfStringFormat
+
+**LineLimit:** When LineLimit is enabled, the provided string will be laid out within the specified bounds. If the LineLimit property is disabled, the layout will continue to fill any remaining space. The default value of the LineLimit property is true.
+
+**NoClip:** If we enable the NoClip option, it will show the text without cutting any words. If we disable the NoClip option, any text outside the fitting area will be hidden.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Set the page margins to zero
+ let settings: PdfPageSettings = new PdfPageSettings();
+ settings.margins = new PdfMargins(0);
+ // Add a new section to the document
+ let section: PdfSection = document.addSection(settings);
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Set font
+ let font: PdfStandardFont = new PdfStandardFont(PdfFontFamily.helvetica, 10);
+ // Create a new PdfStringFormat and set its properties
+ let format: PdfStringFormat = new PdfStringFormat();
+ // Set no clip
+ format.noClip = true;
+ // Set line limit
+ format.lineLimit = false;
+ // Draw text
+ page.graphics.drawString('PDF text line 1 \r\nPDF text line 3', font, [70, 10, 200, 50], new PdfPen([255, 0, 0], 1), new PdfBrush([0, 0, 255]), format);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+| LineLimit | +NoClip | +Result | +
|---|---|---|
| true | +true | + |
+
| false | +true | + |
+
| true | +false | + |
+
| false | +false | + |
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a popup annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument('Input.pdf');
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Access the PDF form from the document
+let form = document.form;
+// Create a new text box field named 'Name' on the first page at specified position and size
+let field: PdfTextBoxField = new PdfTextBoxField(page, 'Name', { x: 0, y: 0, width: 100, height: 50 });
+// Set the default text value for the text box
+field.text = 'John';
+// Apply a standard font (Helvetica) with size 10 to the text box
+field.font = new PdfStandardFont(PdfFontFamily.helvetica, 10);
+// Set the background color of the text box to red
+field.backColor = { r: 255, g: 0, b: 0 };
+// Set the border color of the text box to blue
+field.borderColor = { r: 0, g: 0, b: 255 };
+// Add a tooltip to the text box for user guidance
+field.toolTip = 'FirstName';
+// Set the text color inside the text box to green
+field.color = { r: 0, g: 255, b: 0 };
+// Add the configured text box field to the PDF form
+form.add(field);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Adding the combo box field
+
+This example demonstrates how to add a combo box field to a PDF document using the `PdfComboBoxField` class. A combo box field provides a drop-down list for users to select predefined options.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a new section to the document
+let section: PdfSection = document.addSection();
+// Add a page to the section
+let page: PdfPage = section.addPage();
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new combo box field
+let field: PdfComboBoxField = new PdfComboBoxField(page, 'list1', { x: 100, y: 60, width: 100, height: 50 });
+// Add list items to the field
+field.addItem(new PdfListFieldItem('English', 'English'));
+field.addItem(new PdfListFieldItem('French', 'French'));
+field.addItem(new PdfListFieldItem('German', 'German'));
+// Set the selected index
+field.selectedIndex = 2;
+// Set the flag indicating whether the combo box allows multiple selections
+field.multiSelect = true;
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a popup annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument('Input.pdf');
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new combo box field
+let field: PdfComboBoxField = new PdfComboBoxField(page, 'list1', { x: 100, y: 60, width: 100, height: 50 });
+// Add list items to the field
+field.addItem(new PdfListFieldItem('English', 'English'));
+field.addItem(new PdfListFieldItem('French', 'French'));
+field.addItem(new PdfListFieldItem('German', 'German'));
+// Set the selected index
+field.selectedIndex = 2;
+// Set the flag indicating whether the combo box allows multiple selections
+field.multiSelect = true;
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Adding the radio button field
+
+This example demonstrates how to add a radio button field to a PDF document using the `PdfRadioButtonListField` class. Radio buttons allow users to select one option from a group of choices.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a new section to the document
+let section: PdfSection = document.addSection();
+// Add a page to the section
+let page: PdfPage = section.addPage();
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new radio button list field
+let field: PdfRadioButtonListField = new PdfRadioButtonListField(page, 'Age');
+// Create and add first item
+let first: PdfRadioButtonListItem = field.add('1-9', { x: 100, y: 140, width: 20, height: 20 });
+// Create and add second item
+let second: PdfRadioButtonListItem = new PdfRadioButtonListItem('10-49', { x: 100, y: 170, width: 20, height: 20 }, page);
+field.add(second);
+// Set selected index of the radio button list field
+field.selectedIndex = 0;
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a popup annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument('Input.pdf');
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new radio button list field
+let field: PdfRadioButtonListField = new PdfRadioButtonListField(page, 'Age');
+// Create and add first item
+let first: PdfRadioButtonListItem = field.add('1-9', { x: 100, y: 140, width: 20, height: 20 });
+// Create and add second item
+let second: PdfRadioButtonListItem = new PdfRadioButtonListItem('10-49', { x: 100, y: 170, width: 20, height: 20 }, page);
+field.add(second);
+// Set selected index of the radio button list field
+field.selectedIndex = 0;
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Adding the list box field
+
+This example demonstrates how to add a list box field to a PDF document using the `PdfListBoxField` class. A list box field displays multiple options, allowing users to select one or more items.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a new section to the document
+let section: PdfSection = document.addSection();
+// Add a page to the section
+let page: PdfPage = section.addPage();
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new list box field
+let field: PdfListBoxField = new PdfListBoxField(page, 'list1', { x: 100, y: 60, width: 100, height: 50 });
+// Add list items to the field
+field.addItem(new PdfListFieldItem('English', 'English'));
+field.addItem(new PdfListFieldItem('French', 'French'));
+field.addItem(new PdfListFieldItem('German', 'German'));
+// Set the selected index
+field.selectedIndex = 2;
+// Set the flag indicating whether the list box allows multiple selections
+field.multiSelect = true;
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a popup annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument('Input.pdf');
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new list box field
+let field: PdfListBoxField = new PdfListBoxField(page, 'list1', { x: 100, y: 60, width: 100, height: 50 });
+// Add list items to the field
+field.addItem(new PdfListFieldItem('English', 'English'));
+field.addItem(new PdfListFieldItem('French', 'French'));
+field.addItem(new PdfListFieldItem('German', 'German'));
+// Set the selected index
+field.selectedIndex = 2;
+// Set the flag indicating whether the list box allows multiple selections
+field.multiSelect = true;
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Adding the check Box field
+
+This example demonstrates how to add a check box field to a PDF document using the `PdfCheckBoxField` class. Check boxes allow users to select or deselect options in a form.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a new section to the document
+let section: PdfSection = document.addSection();
+// Add a page to the section
+let page: PdfPage = section.addPage();
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new check box field
+let field: PdfCheckBoxField = new PdfCheckBoxField('CheckBox1', { x: 100, y: 40, width: 20, height: 20 }, page);
+// Set the checked flag as true
+field.checked = true;
+// Set the tooltip value
+field.toolTip = 'Checked';
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a popup annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument('Input.pdf');
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new check box field
+let field: PdfCheckBoxField = new PdfCheckBoxField('CheckBox1', { x: 100, y: 40, width: 20, height: 20 }, page);
+// Set the checked flag as true
+field.checked = true;
+// Set the tooltip value
+field.toolTip = 'Checked';
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Adding the signature field
+
+This example demonstrates how to add a signature field to a PDF document using the `PdfSignatureField` class. A signature field enables users to digitally sign the PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a new section to the document
+let section: PdfSection = document.addSection();
+// Add a page to the section
+let page: PdfPage = section.addPage();
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new signature field
+let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', {x: 10, y: 10, width: 100, height: 50});
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a popup annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument('Input.pdf');
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new signature field
+let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', {x: 10, y: 10, width: 100, height: 50});
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Adding the button field
+
+This example demonstrates how to add a button field to a PDF document using the `PdfButtonField` class. Buttons can be configured to perform actions such as submitting a form or triggering JavaScript.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a new section to the document
+let section: PdfSection = document.addSection();
+// Add a page to the section
+let page: PdfPage = section.addPage();
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new button field
+let field: PdfButtonField = new PdfButtonField(page , 'Button1', {x: 100, y: 40, width: 100, height: 20});
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a popup annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument('Input.pdf');
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new button field
+let field: PdfButtonField = new PdfButtonField(page , 'Button1', {x: 100, y: 40, width: 100, height: 20});
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Filling form fields in an existing PDF Document
+
+Essential® EJ2 PDF allows you to fill the form fields using PdfField class.
+
+### Filling the text box field
+
+This example demonstrates how to fill a text box field in a PDF document using the `text` property of the `PdfTextBoxField` class. The following code snippet illustrates how to set the text value for the field.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Access text box field
+ let field: PdfTextBoxField = document.form.fieldAt(0) as PdfTextBoxField;
+ // Sets the text value to text box field
+ field.text = ‘Syncfusion’;
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Filling the combo box field
+
+This example demonstrates how to fill a combo box field in a PDF document using the `selectedIndex` property of the `PdfComboBoxField` class. The following code snippet shows how to change the selected index in a combo box.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Access combobox field
+ let field: PdfComboBoxField = document.form.fieldAt(0) as PdfComboBoxField;
+ // Sets the selected index
+ field.selectedIndex = 2;
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Filling the radio button field
+
+This example demonstrates how to fill a radio button field in a PDF document using the `selectedIndex` property of the `PdfRadioButtonListField` class. The following code snippet illustrates how to change the selected index in a radio button.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Access radio button list field
+ let field: PdfRadioButtonListField = document.form.fieldAt(0) as PdfRadioButtonListField;
+ // Sets the selected index
+ field.selectedIndex = 2;
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Filling the list box field
+
+This example demonstrates how to fill a list box field in a PDF document using the `selectedIndex` property of the `PdfLoadedListBoxField` class. The following code snippet shows how to change the selected index in a list box.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Access listbox field
+ let field: PdfListBoxField = document.form.fieldAt(2) as PdfListBoxField;
+ // Sets the selected index
+ field.selectedIndex = 2;
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+
+### Filling the check Box field
+
+This example demonstrates how to fill a check box field in a PDF document using the `Checked` property of the `PdfCheckBoxField` class. The following code snippet illustrates how to mark a checkbox as selected.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Access checkbox field
+ let field: PdfCheckBoxField = document.form.fieldAt(2) as PdfCheckBoxField;
+ // Sets the tooltip value
+ field.toolTip = 'Checked';
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+
+### Filling the signature field
+
+This example demonstrates how to fill a signature field in a PDF document using the `PdfSignatureField` class. The following code snippet illustrates how to create a signature using PFX data and assign it to the signature field.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Access the PDF form
+ let form: PdfForm = document.form;
+ // Create a new signature field
+ let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', {x: 10, y: 10, width: 100, height: 50});
+ // Create a new signature using PFX data and private key
+ const sign: PdfSignature = PdfSignature.create(certData, password, { cryptographicStandard: CryptographicStandard.cms, digestAlgorithm: DigestAlgorithm.sha256 });
+ // Sets the signature to the field
+ field.setSignature(sign);
+ // Add the field into PDF form
+ form.add(field);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Retrieving/Modifying the form fields
+
+### Modifying the existing form field in PDF document
+
+This example demonstrates how to modify an existing form field in a PDF document using the `PdfTextBoxField` class. The following code snippet illustrates how to update the text value, alignment, and default value of a text box field.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Access text box field
+ let field: PdfTextBoxField = document.form.fieldAt(0) as PdfTextBoxField;
+ // Sets the text value to text box field
+ field.text = ‘Syncfusion’;
+ // Sets the text alignment of form field as center
+ field.textAlignment = PdfTextAlignment.center;
+ // Sets the default value of the text box field
+ field.defaultValue = 'Syncfusion';
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Removing the form fields from existing PDF document
+
+This example demonstrates how to remove items from an existing form field in a PDF document using the `removeItemAt()` method of the `PdfField` class. The following code snippet illustrates how to access a form field and remove its first item.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the form field at index 0
+ let field: PdfField = document.form.fieldAt(0);
+ // Remove the first item of the form field
+ field.removeItemAt(0);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Flattening form fields in a PDF
+
+This example demonstrates how to flatten form fields in a PDF document to make their values permanent and non-editable. Flattening removes the interactive elements while preserving the visual appearance of the filled data.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Get the first field
+ let field: PdfField = document.form.fieldAt(0);
+ // Sets the boolean flag indicating whether the form field have been flattened or not.
+ field.flatten = true;
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Marking form fields as Read-Only
+
+This example demonstrates how to mark form fields as read-only by accessing them from the PdfFormFieldCollection and setting their ReadOnly property to true.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Access the form field at index 0
+ let field: PdfField = document.form.fieldAt(0);
+ // Sets a value indicating whether read only.
+ field.readOnly = true;
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Importing form fields
+
+### Importing FDF file to PDF
+
+This example demonstrates how to import form data from an FDF file into a PDF document using the `importFormData` method. Importing FDF data allows you to populate form fields in a PDF with values from an external data source.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Imports form data from to the PDF document.
+ document.importFormData('formData.fdf', DataFormat.fdf);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Importing XFDF file to PDF
+
+This example demonstrates how to import form data from an XFDF file into a PDF document using the `importFormData` method. Importing XFDF data allows you to populate form fields in a PDF with values from an external data source.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Imports form data from to the PDF document.
+ document.importFormData('formData.xfdf', DataFormat.xfdf);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Exporting form fields
+
+### Export PDF file to FDF
+
+This example demonstrates how to export form data from a PDF document to an FDF file using the `exportFormData` method. Exporting FDF data allows you to save the values of form fields in a lightweight format for reuse or integration with other systems.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Sets the form field data export settings with output data format.
+ let settings: PdfFormFieldExportSettings = new PdfFormFieldExportSettings();
+ settings.dataFormat = DataFormat.fdf;
+ // Export form field to fdf format
+ let fdf: Uint8Array = document.exportFormData(settings);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Export PDF file to XFDF
+
+This example demonstrates how to export form data from a PDF document to an XFDF file using the `exportFormData` method. Exporting XFDF data allows you to save the values of form fields in a lightweight format for reuse or integration with other systems.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Create and render button
+let button: Button = new Button();
+button.appendTo('#normalbtn');
+
+// Handle click event
+button.element.onclick = async () => {
+ console.log('Start PDF Creation');
+ createPdf();
+};
+
+// Function to create PDF
+function createPdf() {
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument('Input.pdf');
+ // Sets the form field data export settings with output data format.
+ let settings: PdfFormFieldExportSettings = new PdfFormFieldExportSettings();
+ settings.dataFormat = DataFormat.xfdf;
+ // Export form field to XFDF format
+ let xfdf: Uint8Array = document.exportFormData(settings);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+}
+
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file