diff --git a/Document-Processing/PDF/PDF-Library/javascript/Annotations.md b/Document-Processing/PDF/PDF-Library/javascript/Annotations.md
index 67a134def..845574b92 100644
--- a/Document-Processing/PDF/PDF-Library/javascript/Annotations.md
+++ b/Document-Processing/PDF/PDF-Library/javascript/Annotations.md
@@ -14,8 +14,7 @@ The PDF library provides support for interactive annotations. You can add, delet
This example demonstrates how to add annotations to a PDF document using the `PdfAnnotation` class. Adding annotations allows users to include comments, highlights, shapes, and other interactive elements within a PDF, enhancing collaboration and document review.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfPopupAnnotation, PdfPopupIcon, PdfAnnotationBorder} from '@syncfusion/ej2-pdf';
// Creates a new PDF document
@@ -42,8 +41,7 @@ document.save('output.pdf');
document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Creates a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
@@ -70,12 +68,11 @@ document.destroy();
The following code snippet explains how to add a popup annotation in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfPopupAnnotation, PdfPopupIcon, PdfAnnotationBorder} from '@syncfusion/ej2-pdf';
// Load an existing PDF document
-let document: PdfDocument = new PdfDocument(data, password);
+let document: PdfDocument = new PdfDocument(data);
// Access the first page
let page: PdfPage = document.getPage(0);
// Creates a new popup annotation
@@ -98,10 +95,9 @@ document.save('output.pdf');
document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Creates a new popup annotation
@@ -130,8 +126,7 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfFileLinkAnnotation} from '@syncfusion/ej2-pdf';
// Creates a new PDF document
@@ -157,8 +152,7 @@ document.save('output.pdf');
document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Creates a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
@@ -184,12 +178,11 @@ document.destroy();
The following code snippet explains how to add a file link annotation in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfFileLinkAnnotation} from '@syncfusion/ej2-pdf';
// Load an existing PDF document
-let document: PdfDocument = new PdfDocument(data, password);
+let document: PdfDocument = new PdfDocument(data);
// Access the first page
let page: PdfPage = document.getPage(0);
// Creates a file link annotation
@@ -211,10 +204,9 @@ document.save('output.pdf');
document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Creates a file link annotation
@@ -240,8 +232,7 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfFreeTextAnnotation, PdfTextAlignment, PdfAnnotationBorder, PdfBorderStyle, PdfFreeTextAnnotation, PdfLineEndingStyle, PdfStandardFont, PdfFontFamily, PdfFontStyle} from '@syncfusion/ej2-pdf';
// Creates a new PDF document
@@ -271,8 +262,7 @@ document.save('output.pdf');
document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Creates a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
@@ -304,12 +294,11 @@ document.destroy();
The following code snippet explains how to add a free text annotation in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfFreeTextAnnotation, PdfTextAlignment, PdfAnnotationBorder, PdfBorderStyle, PdfFreeTextAnnotation, PdfLineEndingStyle, PdfStandardFont, PdfFontFamily, PdfFontStyle} from '@syncfusion/ej2-pdf';
// Load an existing PDF document
-let document: PdfDocument = new PdfDocument(data, password);
+let document: PdfDocument = new PdfDocument(data);
// Access the first page
let page: PdfPage = document.getPage(0);
// Create new free text annotation
@@ -335,10 +324,9 @@ document.save('output.pdf');
document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Create new free text annotation
@@ -370,8 +358,7 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfLineAnnotation, PdfAnnotationLineEndingStyle, PdfLineEndingStyle, PdfAnnotationCaption, PdfLineCaptionType} from '@syncfusion/ej2-pdf';
// Creates a new PDF document
@@ -400,8 +387,7 @@ document.save('output.pdf');
document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Creates a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
@@ -433,12 +419,11 @@ document.destroy();
The following code snippet explains how to add a line annotation in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfLineAnnotation, PdfAnnotationLineEndingStyle, PdfLineEndingStyle, PdfAnnotationCaption, PdfLineCaptionType} from '@syncfusion/ej2-pdf';
// Load an existing PDF document
-let document: PdfDocument = new PdfDocument(data, password);
+let document: PdfDocument = new PdfDocument(data);
// Access the first page
let page: PdfPage = document.getPage(0);
// Creates a new line annotation.
@@ -463,10 +448,9 @@ document.save('output.pdf');
document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Creates a new line annotation.
@@ -498,8 +482,7 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfRubberStampAnnotation, PdfRubberStampAnnotationIcon} from '@syncfusion/ej2-pdf';
// Creates a new PDF document
@@ -520,8 +503,7 @@ document.save('output.pdf');
document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Creates a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
@@ -541,15 +523,14 @@ document.destroy();
{% endhighlight %}
{% endtabs %}
-The following code snippet explains how to add a free text annotation in an existing PDF document.
+The following code snippet explains how to add a rubber stamp annotation in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfRubberStampAnnotation, PdfRubberStampAnnotationIcon} from '@syncfusion/ej2-pdf';
// Load an existing PDF document
-let document: PdfDocument = new PdfDocument(data, password);
+let document: PdfDocument = new PdfDocument(data);
// Access the first page
let page: PdfPage = document.getPage(0);
// Creates a new rubber stamp annotation
@@ -566,10 +547,9 @@ document.save('output.pdf');
document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Creates a new rubber stamp annotation
@@ -592,8 +572,7 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfInkAnnotation} from '@syncfusion/ej2-pdf';
// Create a new PDF document
@@ -636,8 +615,7 @@ document.save('Output.pdf');
document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a new page to the PDF
@@ -672,12 +650,11 @@ document.destroy();
The following code snippet explains how to add a ink annotation in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfInkAnnotation} from '@syncfusion/ej2-pdf';
// Load an existing PDF document
-let document: PdfDocument = new PdfDocument(data, password);
+let document: PdfDocument = new PdfDocument(data);
// Access the first page
let page: PdfPage = document.getPage(0);
// Create an ink annotation
@@ -716,10 +693,9 @@ document.save('Output.pdf');
document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Create an ink annotation
@@ -754,37 +730,35 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfPopupAnnotation, PdfPopupIcon, PdfAnnotationState, PdfAnnotationStateModel} from '@syncfusion/ej2-pdf';
- import {PdfDocument, PdfPage, PdfPopupAnnotation, PdfPopupIcon, PdfAnnotationState, PdfAnnotationStateModel} from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Adds a new page to the PDF
- let page: PdfPage = document.addPage();
- // Create a new popup annotation
- let annotation = new PdfPopupAnnotation('Review this paragraph',
- {x: 10, y: 40, width: 30, height: 30},
- {
- author: 'Reviewer',
- subject: 'General',
- color: { r: 255, g: 255, b: 0 },
- icon: PdfPopupIcon.comment,
- open: true,
- state: PdfAnnotationState.accepted,
- stateModel: PdfAnnotationStateModel.review
- }
- );
- // Add annotation to the page
- page.annotations.add(annotation);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Adds a new page to the PDF
+let page: PdfPage = document.addPage();
+// Create a new popup annotation
+let annotation = new PdfPopupAnnotation('Review this paragraph',
+{x: 10, y: 40, width: 30, height: 30},
+{
+ author: 'Reviewer',
+ subject: 'General',
+ color: { r: 255, g: 255, b: 0 },
+ icon: PdfPopupIcon.comment,
+ open: true,
+ state: PdfAnnotationState.accepted,
+ stateModel: PdfAnnotationStateModel.review
+}
+);
+// Add annotation to the page
+page.annotations.add(annotation);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
@@ -812,18 +786,17 @@ document.destroy();
The following code snippet explains how to add a popup annotation in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfPopupAnnotation, PdfPopupIcon, PdfAnnotationState, PdfAnnotationStateModel} from '@syncfusion/ej2-pdf';
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfPopupAnnotation, PdfPopupIcon, PdfAnnotationState, PdfAnnotationStateModel} from '@syncfusion/ej2-pdf';
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Access the first page
- let page: PdfPage = document.getPage(0);
- let annotation = new PdfPopupAnnotation('Review this paragraph',
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+let annotation = new PdfPopupAnnotation('Review this paragraph',
{x: 10, y: 40, width: 30, height: 30},
{
- author: 'Reviewer',
+author: 'Reviewer',
subject: 'General',
color: { r: 255, g: 255, b: 0 },
icon: PdfPopupIcon.comment,
@@ -832,18 +805,17 @@ The following code snippet explains how to add a popup annotation in an existing
stateModel: PdfAnnotationStateModel.review
}
);
- // Add annotation to the page
- page.annotations.add(annotation);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+// Add annotation to the page
+page.annotations.add(annotation);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Create a new popup annotation
@@ -871,32 +843,30 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfAttachmentAnnotation, PdfAttachmentIcon, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf';
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfAttachmentAnnotation, PdfAttachmentIcon, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf';
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Adds a new page to the PDF
- let page: PdfPage = document.addPage();
- // Create a new attachment annotation
- let annotation = new PdfAttachmentAnnotation(
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Adds a new page to the PDF
+let page: PdfPage = document.addPage();
+// Create a new attachment annotation
+let annotation = new PdfAttachmentAnnotation(
{ x: 300, y: 200, width: 30, height: 30 },
'Nature.jpg',
imageData,
{ text: 'Attachment', icon: PdfAttachmentIcon.pushPin, color: { r: 255, g: 0, b: 0 }, opacity: 1,
- border: new PdfAnnotationBorder({width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid})}
+ border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid })}
);
- // Add annotation to the page
- page.annotations.add(annotation);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+// Add annotation to the page
+page.annotations.add(annotation);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
@@ -924,37 +894,35 @@ document.destroy();
{% endhighlight %}
{% endtabs %}
-The following code snippet explains how to add a attachment annotation in an existing PDF document.
+The following code snippet explains how to add a file attachment annotation in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfAttachmentAnnotation, PdfAttachmentIcon, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf';
- import {PdfDocument, PdfPage, PdfAttachmentAnnotation, PdfAttachmentIcon, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Access the first page
- let page: PdfPage = document.getPage(0);
- // Create a new attachment annotation
- let annotation = new PdfAttachmentAnnotation(
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Create a new attachment annotation
+let annotation = new PdfAttachmentAnnotation(
{ x: 300, y: 200, width: 30, height: 30 },
'Nature.jpg',
imageData,
{ text: 'Attachment', icon: PdfAttachmentIcon.pushPin, color: { r: 255, g: 0, b: 0 }, opacity: 1,
- border: new PdfAnnotationBorder({width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid})}
+ border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid })}
);
- // Add annotation to the page
- page.annotations.add(annotation);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+// Add annotation to the page
+page.annotations.add(annotation);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Create a new attachment annotation
@@ -980,68 +948,29 @@ document.destroy();
{% endhighlight %}
{% endtabs %}
-### Sound Annotation
+### URI Annotation
-This example demonstrates how to access a sound annotation to a PDF page using the `PdfSoundAnnotation` class.
+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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfSoundAnnotation} from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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 c# tabtitle="JavaScript" %}
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfUriAnnotation} from '@syncfusion/ej2-pdf';
-// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
-// Access the first page
-var page = document.getPage(0);
-// Access the annotation at index 0
-var annotation = page.annotations.at(0);
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Adds a new page to the PDF
+let page: PdfPage = document.addPage();
+// Create a new URI annotation
+let annotation: PdfUriAnnotation = new PdfUriAnnotation({ x: 100, y: 150, width: 200, height: 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 %}
-{% 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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfUriAnnotation} from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Adds a new page to the PDF
- let page: PdfPage = document.addPage();
- // Create a new URI annotation
- let annotation: PdfUriAnnotation = new PdfUriAnnotation({x: 100, y: 150, width: 200, height: 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 c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
@@ -1061,28 +990,26 @@ document.destroy();
The following code snippet explains how to add a URI annotation in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfUriAnnotation} from '@syncfusion/ej2-pdf';
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfUriAnnotation} from '@syncfusion/ej2-pdf';
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Access the first page
- let page: PdfPage = document.getPage(0);
- // Create a new URI annotation
- let annotation: PdfUriAnnotation = new PdfUriAnnotation({x: 100, y: 150, width: 200, height: 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();
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Create a new URI annotation
+let annotation: PdfUriAnnotation = new PdfUriAnnotation({ x: 100, y: 150, width: 200, height: 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 c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Create a new URI annotation
@@ -1102,31 +1029,30 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfDocumentLinkAnnotation, PdfDestinationMode, PdfBorderStyle} from '@syncfusion/ej2-pdf';
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfDocumentLinkAnnotation, PdfDestinationMode, PdfBorderStyle} from '@syncfusion/ej2-pdf';
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Adds a new page to the PDF
- let page: PdfPage = document.addPage();
- // Create new document link annotation
- let annotation = new PdfDocumentLinkAnnotation(
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Adds a new page to the PDF
+let page: PdfPage = document.addPage();
+// Create new document link annotation
+let annotation = new PdfDocumentLinkAnnotation(
{ x: 80, y: 100, width: 120, height: 18 },
- new PdfDestination({page , location: { x: 0, y: 0 }, mode: PdfDestinationMode.fitToPage}),
- { color: { r: 0, g: 128, b: 0 }, opacity: 1,
- border: new PdfAnnotationBorder({width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid})}
+ new PdfDestination({page, location: { x: 0, y: 0 }, mode: PdfDestinationMode.fitToPage}),
+ {
+color: { r: 0, g: 128, b: 0 }, opacity: 1,
+ border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid })}
);
- // Add annotation to the page
- page.annotations.add(annotation);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+// Add annotation to the page
+page.annotations.add(annotation);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
@@ -1150,33 +1076,32 @@ document.destroy();
The following code snippet explains how to add a document link annotation in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfDocumentLinkAnnotation, PdfDestinationMode, PdfBorderStyle} from '@syncfusion/ej2-pdf';
- import {PdfDocument, PdfPage, PdfDocumentLinkAnnotation, PdfDestinationMode, PdfBorderStyle} from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Access the first page
- let page: PdfPage = document.getPage(0);
- // Create new document link annotation
- let annotation = new PdfDocumentLinkAnnotation(
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Create new document link annotation
+let annotation = new PdfDocumentLinkAnnotation(
{ x: 80, y: 100, width: 120, height: 18 },
- new PdfDestination({page , location: { x: 0, y: 0 }, mode: PdfDestinationMode.fitToPage}),
- { color: { r: 0, g: 128, b: 0 }, opacity: 1,
- border: new PdfAnnotationBorder({width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid})}
+ new PdfDestination({page, location: { x: 0, y: 0 }, mode: PdfDestinationMode.fitToPage}),
+ {
+color: { r: 0, g: 128, b: 0 }, opacity: 1,
+ border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid })}
);
- // Add annotation to the page
- page.annotations.add(annotation);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+// Add annotation to the page
+page.annotations.add(annotation);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Create new document link annotation
@@ -1213,33 +1138,32 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfRedactionAnnotation, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf';
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfRedactionAnnotation, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf';
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Adds a new page to the PDF
- let page: PdfPage = document.addPage();
- // Create a new redaction annotation
- let annotation: PdfRedactionAnnotation = new PdfRedactionAnnotation({x: 100, y: 100, width: 100, height: 100},
- { borderColor: {r: 255, g: 0, b: 0},
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Adds a new page to the PDF
+let page: PdfPage = document.addPage();
+// Create a new redaction annotation
+let annotation: PdfRedactionAnnotation = new PdfRedactionAnnotation({ x: 100, y: 100, width: 100, height: 100 },
+ {
+borderColor: { r: 255, g: 0, b: 0},
repeatText: true,
overlayText: 'Sample Overlay',
font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular),
- textColor: {r: 0, g: 0, b: 0},
- appearanceFillColor: {r: 255, g: 255, b: 255}
- });
- // Add annotation to the page
- page.annotations.add(annotation);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+ textColor: { r: 0, g: 0, b: 0},
+ appearanceFillColor: { r: 255, g: 255, b: 255}
+});
+// Add annotation to the page
+page.annotations.add(annotation);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
@@ -1266,38 +1190,37 @@ document.destroy();
{% endhighlight %}
{% endtabs %}
-The following code snippet explains how to add a document link annotation in an existing PDF document.
+The following code snippet explains how to add a redaction annotation in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfRedactionAnnotation, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf';
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfRedactionAnnotation, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf';
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Access the first page
- let page: PdfPage = document.getPage(0);
- // Create a new redaction annotation
- let annotation: PdfRedactionAnnotation = new PdfRedactionAnnotation({x: 100, y: 100, width: 100, height: 100},
- { borderColor: {r: 255, g: 0, b: 0},
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Create a new redaction annotation
+let annotation: PdfRedactionAnnotation = new PdfRedactionAnnotation({ x: 100, y: 100, width: 100, height: 100 },
+ {
+borderColor: { r: 255, g: 0, b: 0},
repeatText: true,
overlayText: 'Sample Overlay',
font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular),
- textColor: {r: 0, g: 0, b: 0},
- appearanceFillColor: {r: 255, g: 255, b: 255}
- });
- // Add annotation to the page
- page.annotations.add(annotation);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+ textColor: { r: 0, g: 0, b: 0},
+ appearanceFillColor: { r: 255, g: 255, b: 255}
+});
+// Add annotation to the page
+page.annotations.add(annotation);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Create a new redaction annotation
@@ -1327,28 +1250,26 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfWatermarkAnnotation} from '@syncfusion/ej2-pdf';
- import {PdfDocument, PdfPage, PdfWatermarkAnnotation} from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Adds a new page to the PDF
- let page: PdfPage = document.addPage();
- // Create a new water mark annotation
- let annotation: PdfWatermarkAnnotation = new PdfWatermarkAnnotation('Water Mark', {x: 50, y: 100, width: 100, height: 50});
- // Set the color of the annotation
- annotation.color = {r: 0, g: 0, b: 0};
- // Add annotation to the page
- page.annotations.add(annotation);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Adds a new page to the PDF
+let page: PdfPage = document.addPage();
+// Create a new water mark annotation
+let annotation: PdfWatermarkAnnotation = new PdfWatermarkAnnotation('Water Mark', { x: 50, y: 100, width: 100, height: 50 });
+// Set the color of the annotation
+annotation.color = { r: 0, g: 0, b: 0};
+// Add annotation to the page
+page.annotations.add(annotation);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
@@ -1370,30 +1291,28 @@ document.destroy();
The following code snippet explains how to add a watermark annotation in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfWatermarkAnnotation} from '@syncfusion/ej2-pdf';
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfWatermarkAnnotation} from '@syncfusion/ej2-pdf';
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Access the first page
- let page: PdfPage = document.getPage(0);
- // Create a new water mark annotation
- let annotation: PdfWatermarkAnnotation = new PdfWatermarkAnnotation('Water Mark', {x: 50, y: 100, width: 100, height: 50});
- // Set the color of the annotation
- annotation.color = {r: 0, g: 0, b: 0};
- // Add annotation to the page
- page.annotations.add(annotation);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Create a new water mark annotation
+let annotation: PdfWatermarkAnnotation = new PdfWatermarkAnnotation('Water Mark', { x: 50, y: 100, width: 100, height: 50 });
+// Set the color of the annotation
+annotation.color = { r: 0, g: 0, b: 0};
+// Add annotation to the page
+page.annotations.add(annotation);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Create a new watermark annotation
@@ -1415,32 +1334,30 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfTextMarkupAnnotation, PdfTextMarkupAnnotationType, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Adds a new page to the PDF
- let page: PdfPage = document.addPage();
- // Create a new text markup annotation
- // Create a new text markup annotation
- let annotation = new PdfTextMarkupAnnotation('Water Mark', {x: 0, y: 0, width: 0, height: 0}, {
- boundsCollection: [{x: 50, y: 200, width: 120, height: 14}, {x: 50, y: 215, width: 90, height: 14}],
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfTextMarkupAnnotation, PdfTextMarkupAnnotationType, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf';
+
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Adds a new page to the PDF
+let page: PdfPage = document.addPage();
+// Create a new text markup annotation
+// Create a new text markup annotation
+let annotation = new PdfTextMarkupAnnotation('Water Mark', {x: 0, y: 0, width: 0, height: 0}, {
+boundsCollection: [{ x: 50, y: 200, width: 120, height: 14}, { x: 50, y: 215, width: 90, height: 14}],
textMarkupType: PdfTextMarkupAnnotationType.underline, author: 'Syncfusion', subject: 'Annotation',
- textMarkUpColor: {r: 0, g: 128, b: 255}, innerColor: {r: 0, g: 0, b: 255}, opacity: 0.5,
- border: new PdfAnnotationBorder({width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid})
+ textMarkUpColor: { r: 0, g: 128, b: 255}, innerColor: { r: 0, g: 0, b: 255}, opacity: 0.5,
+ border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid })
});
- // Add annotation to the page
- page.annotations.add(annotation);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+// Add annotation to the page
+page.annotations.add(annotation);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
@@ -1480,34 +1397,32 @@ document.save('Output.pdf');
The following code snippet explains how to add a text markup annotation in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfTextMarkupAnnotation, PdfTextMarkupAnnotationType, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Access the first page
- let page: PdfPage = document.getPage(0);
- // Create a new text markup annotation
- // Create a new text markup annotation
- let annotation = new PdfTextMarkupAnnotation('Water Mark', {x: 0, y: 0, width: 0, height: 0}, {
- boundsCollection: [{x: 50, y: 200, width: 120, height: 14}, {x: 50, y: 215, width: 90, height: 14}],
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfTextMarkupAnnotation, PdfTextMarkupAnnotationType, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf';
+
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Create a new text markup annotation
+// Create a new text markup annotation
+let annotation = new PdfTextMarkupAnnotation('Water Mark', {x: 0, y: 0, width: 0, height: 0}, {
+boundsCollection: [{ x: 50, y: 200, width: 120, height: 14}, { x: 50, y: 215, width: 90, height: 14}],
textMarkupType: PdfTextMarkupAnnotationType.underline, author: 'Syncfusion', subject: 'Annotation',
- textMarkUpColor: {r: 0, g: 128, b: 255}, innerColor: {r: 0, g: 0, b: 255}, opacity: 0.5,
- border: new PdfAnnotationBorder({width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid})
+ textMarkUpColor: { r: 0, g: 128, b: 255}, innerColor: { r: 0, g: 0, b: 255}, opacity: 0.5,
+ border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid })
});
- // Add annotation to the page
- page.annotations.add(annotation);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+// Add annotation to the page
+page.annotations.add(annotation);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Create a new text markup annotation
@@ -1543,44 +1458,40 @@ document.destroy();
{% endhighlight %}
{% endtabs %}
-## Cloud border style Annotation
-
-### PdfRectangleAnnotation
+## Rectangle Annotation
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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfRectangleAnnotation, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf';
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfRectangleAnnotation, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf';
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Adds a new page to the PDF
- let page: PdfPage = document.addPage();
- // Create a new square annotation with bounds
- let annotation = new PdfRectangleAnnotation({ x: 50, y: 80, width: 200, height: 100 }, {
- text: 'Rect', author: 'Syncfusion', subject: 'Rectangle Annotation',
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Adds a new page to the PDF
+let page: PdfPage = document.addPage();
+// Create a new rectangle annotation with bounds
+let annotation = new PdfRectangleAnnotation({ x: 50, y: 80, width: 200, height: 100 }, {
+text: 'Rect', author: 'Syncfusion', subject: 'Rectangle Annotation',
color: { r: 255, g: 0, b: 0 },
innerColor: { r: 255, g: 240, b: 240 },
opacity: 0.6,
- border: new PdfAnnotationBorder({width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid})
+ border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid })
});
- // Add annotation to the page
- page.annotations.add(annotation);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+// Add annotation to the page
+page.annotations.add(annotation);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
var page = document.addPage();
-// Create a new square annotation with bounds
+// Create a new rectangle annotation with bounds
var annotation = new ej.pdf.PdfRectangleAnnotation(
{ x: 50, y: 80, width: 200, height: 100 },
{
@@ -1611,34 +1522,32 @@ document.destroy();
The following code snippet explains how to add a rectangle annotation in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfRectangleAnnotation, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf';
- import {PdfDocument, PdfPage, PdfRectangleAnnotation, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Access the first page
- let page: PdfPage = document.getPage(0);
- // Create a new square annotation with bounds
- let annotation = new PdfRectangleAnnotation({ x: 50, y: 80, width: 200, height: 100 }, {
- text: 'Rect', author: 'Syncfusion', subject: 'Rectangle Annotation',
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Create a new square annotation with bounds
+let annotation = new PdfRectangleAnnotation({ x: 50, y: 80, width: 200, height: 100 }, {
+text: 'Rect', author: 'Syncfusion', subject: 'Rectangle Annotation',
color: { r: 255, g: 0, b: 0 },
innerColor: { r: 255, g: 240, b: 240 },
opacity: 0.6,
- border: new PdfAnnotationBorder({width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid})
+ border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid })
});
- // Add annotation to the page
- page.annotations.add(annotation);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+// Add annotation to the page
+page.annotations.add(annotation);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Create a new square annotation with bounds
@@ -1669,39 +1578,37 @@ document.destroy();
{% endhighlight %}
{% endtabs %}
-### Polygon Annotation
+## 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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfPolygonAnnotation, PdfAnnotationBorder, PdfBorderStyle } from '@syncfusion/ej2-pdf';
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfPolygonAnnotation, PdfAnnotationBorder, PdfBorderStyle } from '@syncfusion/ej2-pdf';
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Adds a new page to the PDF
- let page: PdfPage = document.addPage();
- // Create a new polygon annotation with bounds
- let annotation = new PdfPolygonAnnotation(
- [{ x: 100, y: 300 }, { x: 150, y: 200 }, { x: 300, y: 200 }, { x: 350, y: 300 }, { x: 300, y: 400 }, { x: 150, y: 400 }],
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Adds a new page to the PDF
+let page: PdfPage = document.addPage();
+// Create a new polygon annotation with bounds
+let annotation = new PdfPolygonAnnotation(
+[{ x: 100, y: 300 }, { x: 150, y: 200 }, { x: 300, y: 200 }, { x: 350, y: 300 }, { x: 300, y: 400 }, { x: 150, y: 400 }],
{
- text: 'Polygon', author: 'Syncfusion', subject: 'Polygon Annotation',
+text: 'Polygon', author: 'Syncfusion', subject: 'Polygon Annotation',
color: { r: 0, g: 128, b: 255 },
innerColor: { r: 220, g: 240, b: 255 },
opacity: 0.7,
- border: new PdfAnnotationBorder({width: 2, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid})
+ border: new PdfAnnotationBorder({ width: 2, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid })
});
- // Add annotation to the page
- page.annotations.add(annotation);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+// Add annotation to the page
+page.annotations.add(annotation);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
@@ -1744,36 +1651,34 @@ document.destroy();
The following code snippet explains how to add a polygon annotation in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfPolygonAnnotation, PdfAnnotationBorder, PdfBorderStyle } from '@syncfusion/ej2-pdf';
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfPolygonAnnotation, PdfAnnotationBorder, PdfBorderStyle } from '@syncfusion/ej2-pdf';
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Access the first page
- let page: PdfPage = document.getPage(0);
- // Create a new polygon annotation with bounds
- let annotation = new PdfPolygonAnnotation(
- [{ x: 100, y: 300 }, { x: 150, y: 200 }, { x: 300, y: 200 }, { x: 350, y: 300 }, { x: 300, y: 400 }, { x: 150, y: 400 }],
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Create a new polygon annotation with bounds
+let annotation = new PdfPolygonAnnotation(
+[{ x: 100, y: 300 }, { x: 150, y: 200 }, { x: 300, y: 200 }, { x: 350, y: 300 }, { x: 300, y: 400 }, { x: 150, y: 400 }],
{
- text: 'Polygon', author: 'Syncfusion', subject: 'Polygon Annotation',
+text: 'Polygon', author: 'Syncfusion', subject: 'Polygon Annotation',
color: { r: 0, g: 128, b: 255 },
innerColor: { r: 220, g: 240, b: 255 },
opacity: 0.7,
- border: new PdfAnnotationBorder({width: 2, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid})
+ border: new PdfAnnotationBorder({ width: 2, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid })
});
- // Add annotation to the page
- page.annotations.add(annotation);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+// Add annotation to the page
+page.annotations.add(annotation);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Create a new polygon annotation with bounds
@@ -1811,39 +1716,37 @@ document.destroy();
{% endhighlight %}
{% endtabs %}
-### PdfCircleAnnotation
+## Circle Annotation
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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfCircleAnnotation, PdfAnnotationBorder, PdfBorderStyle, PdfMeasurementUnit, PdfCircleMeasurementType} from '@syncfusion/ej2-pdf';
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfCircleAnnotation, PdfAnnotationBorder, PdfBorderStyle, PdfMeasurementUnit, PdfCircleMeasurementType} from '@syncfusion/ej2-pdf';
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Adds a new page to the PDF
- let page: PdfPage = document.addPage();
- // Create a new circle annotation with circle bounds
- let annotation = new PdfCircleAnnotation({ x: 50, y: 100, width: 120, height: 120 }, {
- text: 'Diameter',
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Adds a new page to the PDF
+let page: PdfPage = document.addPage();
+// Create a new circle annotation with circle bounds
+let annotation = new PdfCircleAnnotation({ x: 50, y: 100, width: 120, height: 120 }, {
+text: 'Diameter',
author: 'Syncfusion',
- color: {r: 255, g: 0, b: 0},
- innerColor: {r: 255, g: 255, b: 200},
+ color: { r: 255, g: 0, b: 0},
+ innerColor: { r: 255, g: 255, b: 200},
opacity: 0.9,
- border: new PdfAnnotationBorder({width: 2, hRadius: 0, vRadius: 0, style: PdfBorderStyle.dashed, dash: [3, 2]}),
+ border: new PdfAnnotationBorder({ width: 2, hRadius: 0, vRadius: 0, style: PdfBorderStyle.dashed, dash: [3, 2]}),
measure: { unit: PdfMeasurementUnit.centimeter, type: PdfCircleMeasurementType.diameter }
- });
- // Add annotation to the page
- page.annotations.add(annotation);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+});
+// Add annotation to the page
+page.annotations.add(annotation);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
@@ -1879,36 +1782,34 @@ document.save('Output.pdf');
The following code snippet explains how to add a circle annotation in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfCircleAnnotation, PdfAnnotationBorder, PdfBorderStyle, PdfMeasurementUnit, PdfCircleMeasurementType} from '@syncfusion/ej2-pdf';
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfCircleAnnotation, PdfAnnotationBorder, PdfBorderStyle, PdfMeasurementUnit, PdfCircleMeasurementType} from '@syncfusion/ej2-pdf';
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Access the first page
- let page: PdfPage = document.getPage(0);
- // Create a new circle annotation with circle bounds
- let annotation = new PdfCircleAnnotation({ x: 50, y: 100, width: 120, height: 120 }, {
- text: 'Diameter',
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Create a new circle annotation with circle bounds
+let annotation = new PdfCircleAnnotation({ x: 50, y: 100, width: 120, height: 120 }, {
+text: 'Diameter',
author: 'Syncfusion',
- color: {r: 255, g: 0, b: 0},
- innerColor: {r: 255, g: 255, b: 200},
+ color: { r: 255, g: 0, b: 0},
+ innerColor: { r: 255, g: 255, b: 200},
opacity: 0.9,
- border: new PdfAnnotationBorder({width: 2, hRadius: 0, vRadius: 0, style: PdfBorderStyle.dashed, dash: [3, 2]}),
+ border: new PdfAnnotationBorder({ width: 2, hRadius: 0, vRadius: 0, style: PdfBorderStyle.dashed, dash: [3, 2]}),
measure: { unit: PdfMeasurementUnit.centimeter, type: PdfCircleMeasurementType.diameter }
- });
- // Add annotation to the page
- page.annotations.add(annotation);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+});
+// Add annotation to the page
+page.annotations.add(annotation);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Create a new circle annotation with circle bounds
@@ -1943,37 +1844,35 @@ document.destroy();
{% endhighlight %}
{% endtabs %}
-### PdfEllipseAnnotation
+## Ellipse Annotation
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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfEllipseAnnotation, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Adds a new page to the PDF
- let page: PdfPage = document.addPage();
- // Create a new ellipse annotation with bounds
- let annotation = new PdfEllipseAnnotation({ x: 80, y: 120, width: 160, height: 100 }, {
- text: 'Ellipse', author: 'Syncfusion', subject: 'Ellipse Annotation',
- color: {r: 0, g: 128, b: 255},
- innerColor: {r: 220, g: 240, b: 255},
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfEllipseAnnotation, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf';
+
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Adds a new page to the PDF
+let page: PdfPage = document.addPage();
+// Create a new ellipse annotation with bounds
+let annotation = new PdfEllipseAnnotation({ x: 80, y: 120, width: 160, height: 100 }, {
+text: 'Ellipse', author: 'Syncfusion', subject: 'Ellipse Annotation',
+ color: { r: 0, g: 128, b: 255},
+ innerColor: { r: 220, g: 240, b: 255},
opacity: 0.7,
- border: new PdfAnnotationBorder({width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid})
+ border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid })
});
- // Add annotation to the page
- page.annotations.add(annotation);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+// Add annotation to the page
+page.annotations.add(annotation);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
@@ -2009,34 +1908,32 @@ document.destroy();
The following code snippet explains how to add a ellipse annotation in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfEllipseAnnotation, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Access the first page
- let page: PdfPage = document.getPage(0);
- // Create a new ellipse annotation with bounds
- let annotation = new PdfEllipseAnnotation({ x: 80, y: 120, width: 160, height: 100 }, {
- text: 'Ellipse', author: 'Syncfusion', subject: 'Ellipse Annotation',
- color: {r: 0, g: 128, b: 255},
- innerColor: {r: 220, g: 240, b: 255},
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfEllipseAnnotation, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf';
+
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Create a new ellipse annotation with bounds
+let annotation = new PdfEllipseAnnotation({ x: 80, y: 120, width: 160, height: 100 }, {
+text: 'Ellipse', author: 'Syncfusion', subject: 'Ellipse Annotation',
+ color: { r: 0, g: 128, b: 255},
+ innerColor: { r: 220, g: 240, b: 255},
opacity: 0.7,
- border: new PdfAnnotationBorder({width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid})
+ border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid })
});
- // Add annotation to the page
- page.annotations.add(annotation);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+// Add annotation to the page
+page.annotations.add(annotation);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Create a new ellipse annotation with bounds
@@ -2071,29 +1968,34 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
+Common types of measurement annotations include:
- import {PdfDocument, PdfPage, PdfLineAnnotation, PdfMeasurementUnit} from '@syncfusion/ej2-pdf';
+* Line - Represents a straight distance between two points.
+* Circle - Used to measure circular dimensions.
+* Square - Defines rectangular or square measurements.
+* Angle - Displays angular measurements between two intersecting lines.
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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();
+{% tabs %}
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfLineAnnotation, PdfMeasurementUnit} from '@syncfusion/ej2-pdf';
-{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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 javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Access the annotation at index 0
@@ -2115,30 +2017,29 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfPopupAnnotation} from '@syncfusion/ej2-pdf';
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfPopupAnnotation} from '@syncfusion/ej2-pdf';
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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;
- // Modified its properties
- annotation.text ='Popup annotation';
- annotation.color = {r: 0, g: 128, b: 255};
- annotation.opacity = 0.5;
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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;
+// Modified its properties
+annotation.text = 'Popup annotation';
+annotation.color = { r: 0, g: 128, b: 255}
+;
+annotation.opacity = 0.5;
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Get the first annotation of the page
@@ -2162,28 +2063,26 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfAnnotation} from '@syncfusion/ej2-pdf';
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfAnnotation} from '@syncfusion/ej2-pdf';
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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();
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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 c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Access first annotation from the PDF page
@@ -2203,26 +2102,24 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfLineAnnotation} from '@syncfusion/ej2-pdf';
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfLineAnnotation} from '@syncfusion/ej2-pdf';
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Get the first page
- let page: PdfPage = document.getPage(0) as PdfPage;
- // Get the first annotation of the page
- let annotation: PdfLineAnnotation = page.annotations.at(0) as PdfLineAnnotation;
- // Sets the boolean flag indicating whether the annotation have been flattened or not.
- annotation.flatten = true;
- // Destroy the document
- document.destroy();
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Get the first page
+let page: PdfPage = document.getPage(0) as PdfPage;
+// Get the first annotation of the page
+let annotation: PdfLineAnnotation = page.annotations.at(0) as PdfLineAnnotation;
+// Sets the boolean flag indicating whether the annotation have been flattened or not.
+annotation.flatten = true;
+// Destroy the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Get the first page
var page = document.getPage(0);
// Get the first annotation of the page
@@ -2242,24 +2139,22 @@ document.destroy();
This example demonstrates how to import annotations into a PDF document using the PdfDocument. `importAnnotations` method.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, DataFormat} from '@syncfusion/ej2-pdf';
- import {PdfDocument, DataFormat} from '@syncfusion/ej2-pdf';
-
- // Load the base PDF document from resources
- let pdfDocument: PdfDocument = new PdfDocument(data, password);
- // 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();
+// Load the base PDF document from resources
+let pdfDocument: PdfDocument = new PdfDocument(data);
+// 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 c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load the base PDF document from resources
-var pdfDocument = new ej.pdf.PdfDocument(data, password);
+var pdfDocument = new ej.pdf.PdfDocument(data);
// Import annotations into the PDF document
pdfDocument.importAnnotations('annotations.json', ej.pdf.DataFormat.json);
// Save the PDF document
@@ -2275,22 +2170,20 @@ pdfDocument.destroy();
This example demonstrates how to export annotations from a PDF document using the PdfDocument.exportAnnotations method.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import {PdfDocument, Uint8Array} from '@syncfusion/ej2-pdf';
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, Uint8Array} from '@syncfusion/ej2-pdf';
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Exports the annotations from the PDF document.
- let data: Uint8Array = document.exportAnnotations();
- // Close the document
- document.destroy();
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Exports the annotations from the PDF document.
+let data: Uint8Array = document.exportAnnotations();
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Export the annotations from the PDF document
var data = document.exportAnnotations();
// Close the document
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Bookmarks.md b/Document-Processing/PDF/PDF-Library/javascript/Bookmarks.md
index 63903952b..86c026505 100644
--- a/Document-Processing/PDF/PDF-Library/javascript/Bookmarks.md
+++ b/Document-Processing/PDF/PDF-Library/javascript/Bookmarks.md
@@ -14,28 +14,26 @@ Syncfusion® PDF provides support to insert, remove and modify the
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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfBookmarkBase, PdfDestination} from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Add page
- let page: PdfPage = document.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, {x: 100, y: 200});
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight javascript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfBookmarkBase, PdfDestination} from '@syncfusion/ej2-pdf';
-{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add page
+let page: PdfPage = document.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, { x: 100, y: 200 });
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+{% endhighlight %}
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add page
@@ -59,30 +57,28 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfBookmarkBase, PdfDestination} from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Get page
- let page: PdfPage = document.getPage(0);
- // Get the bookmarks
- let bookmarks: PdfBookmarkBase = document.bookmarks;
- // Gets the bookmark at the specified index
- let bookmark: PdfBookmark = bookmarks.at(0) as PdfBookmark;
- // Set the destination
- bookmark.destination = new PdfDestination(page, {x: 100, y: 200});
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight javascript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfBookmarkBase, PdfDestination} from '@syncfusion/ej2-pdf';
+
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Get page
+let page: PdfPage = document.getPage(0);
+// Get the bookmarks
+let bookmarks: PdfBookmarkBase = document.bookmarks;
+// Gets the bookmark at the specified index
+let bookmark: PdfBookmark = bookmarks.at(0) as PdfBookmark;
+// Set the destination
+bookmark.destination = new PdfDestination(page, { x: 100, y: 200 });
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Get page
var page = document.getPage(0);
// Get the bookmarks
@@ -104,30 +100,28 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfBookmarkBase, PdfDestination} from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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', 1);
- // Sets destination to the bookmark
- bookmark.destination = new PdfDestination(page, {x: 100, y: 200});
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight javascript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfBookmarkBase, PdfDestination} from '@syncfusion/ej2-pdf';
-{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Get the first page
+let page: PdfPage = document.getPage(0) as PdfPage;
+// Get the bookmarks
+let bookmarks: PdfBookmarkBase = document.bookmarks;
+// Add a new outline to the PDF document
+let bookmark: PdfBookmark = bookmarks.add('Introduction', 1);
+// Sets destination to the bookmark
+bookmark.destination = new PdfDestination(page, { x: 100, y: 200 });
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+{% endhighlight %}
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Get the first page
var page = document.getPage(0);
// Get the bookmarks
@@ -148,28 +142,26 @@ document.destroy();
This example demonstrates how to remove bookmarks from an existing PDF document using the `PdfBookmark` class.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfBookmarkBase} from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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');
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight javascript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfBookmarkBase} from '@syncfusion/ej2-pdf';
-{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Get the first page
+let page: PdfPage = document.getPage(0) as PdfPage;
+// Get the bookmarks
+let bookmarks: PdfBookmarkBase = document.bookmarks;
+// Remove specified bookmark from the document.
+bookmarks.remove('Introduction');
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+{% endhighlight %}
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Get the first page
var page = document.getPage(0);
// Get the bookmarks
@@ -189,28 +181,26 @@ document.destroy();
This example demonstrates how to remove bookmarks from the document at the specific index using the `PdfBookmark` class.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfBookmarkBase, PdfDestination} from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Get the first page
- let page: PdfPage = document.getPage(0) as PdfPage;
- // Get the bookmarks
- let bookmarks: PdfBookmarkBase = document.bookmarks;
- // Remove the bookmark from the document at the index 1.
- bookmarks.remove(1);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight javascript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfBookmarkBase, PdfDestination} from '@syncfusion/ej2-pdf';
-{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Get the first page
+let page: PdfPage = document.getPage(0) as PdfPage;
+// Get the bookmarks
+let bookmarks: PdfBookmarkBase = document.bookmarks;
+// Remove the bookmark from the document at the index 1.
+bookmarks.remove(1);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+{% endhighlight %}
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Get the first page
var page = document.getPage(0);
// Get the bookmarks
@@ -230,28 +220,26 @@ document.destroy();
This example demonstrates how to removes all the bookmarks from the collection using the `PdfBookmark` class.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfBookmarkBase} from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Get the bookmarks
- let bookmarks: PdfBookmarkBase = document.bookmarks;
- // Remove all the bookmark from the collection.
- bookmarks.clear();
- // Get count after removal of all outlines.
- let count: number = bookmarks.count;
- // Save the document
- document.save('Output.pdf');
- // Destroy the document
- document.destroy();
+{% highlight javascript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfBookmarkBase} from '@syncfusion/ej2-pdf';
-{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Get the bookmarks
+let bookmarks: PdfBookmarkBase = document.bookmarks;
+// Remove all the bookmark from the collection.
+bookmarks.clear();
+// Get count after removal of all outlines.
+let count: number = bookmarks.count;
+// Save the document
+document.save('Output.pdf');
+// Destroy the document
+document.destroy();
+{% endhighlight %}
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Get the bookmarks
var bookmarks = document.bookmarks;
// Remove all the bookmarks from the collection
@@ -271,26 +259,24 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
+{% highlight javascript tabtitle="TypeScript" %}
+import {PdfDocument, PdfBookmarkBase} from '@syncfusion/ej2-pdf';
- import {PdfDocument, PdfBookmarkBase} from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Get bookmarks
- let bookmarks: PdfBookmarkBase = document.bookmarks;
- // Get bookmark at the specified index
- let pageIndex: number = bookmarks.destination.pageIndex;
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Get bookmarks
+let bookmarks: PdfBookmarkBase = document.bookmarks;
+// Get bookmark at the specified index
+let pageIndex: number = bookmarks.destination.pageIndex;
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Get bookmarks
var bookmarks = document.bookmarks;
// Get the first bookmark (or any specific one)
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-angular.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-angular.md
index a1694499f..fe7792e20 100644
--- a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-angular.md
+++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-angular.md
@@ -34,7 +34,7 @@ ng new my-app
cd my-app
```
-## Installing Syncfusion® JavaScript package
+## Installing Syncfusion® JavaScript PDF package
All the available JS 2 packages are published in `npmjs.com` registry.
@@ -43,14 +43,14 @@ All the available JS 2 packages are published in `npmjs.com` registry.
```bash
npm install @syncfusion/ej2-pdf --save
```
+N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on.
## Create a PDF document using TypeScript
* Add a simple button to `app.component.html` and attach a click handler that uses the TypeScript PDF API to create a new PDF document.
{% tabs %}
-{% highlight ts tabtitle="app.component.html" %}
-
+{% highlight html tabtitle="app.component.html" %}
PDF creation example
@@ -59,46 +59,39 @@ npm install @syncfusion/ej2-pdf --save
-
{% endhighlight %}
{% endtabs %}
* Include the following namespaces in `app.component.ts` file.
{% tabs %}
-{% highlight c# tabtitle="~/app.component.ts" %}
-
-import { NgModule } from '@angular/core';
+{% highlight ts tabtitle="~/app.component.ts" %}
import { PdfDocument, PdfPage, PdfStandardFont, PdfPen, PdfBrush } from '@syncfusion/ej2-pdf';
-
{% endhighlight %}
{% endtabs %}
* Include the following code example in the click event of the button in `app.component.ts` to generate a PDF document.
{% tabs %}
-{% highlight html tabtitle="app.component.ts" %}
-
+{% highlight ts tabtitle="app.component.ts" %}
document.getElementById('normalButton').onclick = (): void => {
- // Create a new PDF document
- const document = new PdfDocument();
- // Add a new page
- const page: PdfPage = document.addPage();
- // Get graphics from the page
- const graphics: PdfGraphics = page.graphics;
- // Set font
- const font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 36, PdfFontStyle.regular);
- // Create a new black brush
- const brush = new PdfBrush({r: 0, g: 0, b: 0});
- // Draw text
- graphics.drawString('Hello World!!!', font, {x: 20, y: 20, width: graphics.clientSize.width - 20, height: 60}, brush);
- // Save and download PDF
- document.save('Output.pdf');
- // Destroy the PDF document instance
- document.destroy();
- });
+ // Create a new PDF document
+ const document = new PdfDocument();
+ // Add a new page
+ const page: PdfPage = document.addPage();
+ // Get graphics from the page
+ const graphics: PdfGraphics = page.graphics;
+ // Set font
+ const font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 36, PdfFontStyle.regular);
+ // Create a new black brush
+ const brush = new PdfBrush({r: 0, g: 0, b: 0});
+ // Draw text
+ graphics.drawString('Hello World!!!', font, {x: 20, y: 20, width: graphics.clientSize.width - 20, height: 60}, brush);
+ // Save and download PDF
+ document.save('Output.pdf');
+ // Destroy the PDF document instance
+ document.destroy();
};
-
{% endhighlight %}
{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-core.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-core.md
index cf48f47eb..4d853981e 100644
--- a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-core.md
+++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-core.md
@@ -27,28 +27,31 @@ Step 4: In the **Additional information** dialog, select a .NET LTS version (for
Step 5: **Add script reference** : Add the required scripts using the CDN inside the `` of `~/Views/Shared/_Layout.cshtml` as follows:
{% tabs %}
-{% highlight c# tabtitle="~/_Layout.cshtml" %}
-
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
- ...
-
{% endhighlight %}
{% endtabs %}
-
+
+N> Check out the following topics for including script references in an ASP.NET Core application to enable PDF creation using the Syncfusion® JavaScript PDF library:
+* [CDN](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references#cdn-reference)
+* [NPM Package](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references#node-package-manager-npm)
+* [CRG](https://ej2.syncfusion.com/aspnetcore/documentation/common/custom-resource-generator)
+
+Would you like me to **reformat this into a proper Syncfusion documentation style note block** (with icons and emphasis), or **convert it into a step-by-step guide for adding script references**?
+
+
Step 6: **Create a PDF document** : Add the script in `~/Views/Home/Index.cshtml` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document.
{% tabs %}
-{% highlight c# tabtitle="~/Index.cshtml" %}
-
+{% highlight cshtml tabtitle="~/Index.cshtml" %}
Create PDF document
Click the button to generate and download a PDF.
-
@section Scripts {
}
-
{% endhighlight %}
{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-mvc.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-mvc.md
index 26ede5baa..d2430d7e1 100644
--- a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-mvc.md
+++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-mvc.md
@@ -27,28 +27,24 @@ Step 4: Select Web Application pattern (MVC) for the project and then select **C
Step 5: **Add script reference** : Add the required scripts using the CDN inside the `` of `~/Views/Shared/_Layout.cshtml` as follows:
{% tabs %}
-{% highlight c# tabtitle="~/_Layout.cshtml" %}
-
+{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
...
-
{% endhighlight %}
{% endtabs %}
-
+
Step 6: **Create a PDF document** : Add the script in `~/Views/Home/Index.cshtml` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document.
{% tabs %}
-{% highlight c# tabtitle="~/Index.cshtml" %}
-
+{% highlight cshtml tabtitle="~/Index.cshtml" %}
Create PDF document
Click the button to generate and download a PDF.
-
@section Scripts {
}
-
{% endhighlight %}
{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-javascript.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-javascript.md
index 1e4cc3a50..da0ca7c1f 100644
--- a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-javascript.md
+++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-javascript.md
@@ -31,28 +31,23 @@ Step 2: The JS 2 component's global scripts and styles are already hosted in the
Step 3: Create a HTML page (index.html) in `my-app` location and add the CDN link references.
{% tabs %}
-{% highlight ts tabtitle="index.html" %}
-
+{% highlight html tabtitle="index.html" %}
- ...
-
{% endhighlight %}
{% endtabs %}
Step 4: **Create a PDF document** : Add the script in `index.html` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document.
{% tabs %}
-{% highlight c# tabtitle="~/Index.html" %}
-
+{% highlight html tabtitle="~/Index.html" %}
Create PDF document
Click the button to generate and download a PDF.
-
@section Scripts {
-
-```
+N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on.
**Create a PDF document** : Add the script in `App.jsx` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document.
{% tabs %}
-{% highlight c# tabtitle="~/App.jsx" %}
-
+{% highlight jsx tabtitle="~/App.jsx" %}
import React from 'react';
export default function App() {
const createPdf = () => {
- // Create a new PDF document
- let pdf = new ej.pdf.PdfDocument();
- // Add a new page
- let page: ej.pdf.PdfPage = document.addPage();
- // Get graphics from the page
- let graphics: ej.pdf.PdfGraphics = page.graphics;
- // Set font
- let font: ej.pdf.PdfStandardFont = pdf.embedFont(ej.pdf.PdfFontFamily.helvetica, 36, ej.pdf.PdfFontStyle.regular);
- // Create a new black brush
- let brush = new ej.pdf.PdfBrush({r: 0, g: 0, b: 0});
- // Draw text
- graphics.drawString('Hello World!!!', font, {x: 20, y: 20, width: graphics.clientSize.width - 20, height: 60}, brush);
- // Save and download PDF
- pdf.save('Output.pdf');
- // Destroy the PDF document instance
- pdf.destroy();
+ // Create a new PDF document
+ let pdf = new ej.pdf.PdfDocument();
+ // Add a new page (fixed: use pdf.addPage instead of document.addPage)
+ let page: ej.pdf.PdfPage = pdf.addPage();
+ // Get graphics from the page
+ let graphics: ej.pdf.PdfGraphics = page.graphics;
+ // Set font
+ let font: ej.pdf.PdfStandardFont = pdf.embedFont(ej.pdf.PdfFontFamily.helvetica, 36, ej.pdf.PdfFontStyle.regular);
+ // Create a new black brush
+ let brush = new ej.pdf.PdfBrush({ r: 0, g: 0, b: 0 });
+ // Draw text
+ graphics.drawString('Hello World!!!', font, { x: 20, y: 20, width: graphics.clientSize.width - 20, height: 60 }, brush);
+ // Save and download PDF
+ pdf.save('Output.pdf');
+ // Destroy the PDF document instance
+ pdf.destroy();
};
return (
@@ -61,7 +59,6 @@ export default function App() {
);
}
-
{% endhighlight %}
{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-typescript.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-typescript.md
index dd33aedd6..a8d92eea0 100644
--- a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-typescript.md
+++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-typescript.md
@@ -28,8 +28,7 @@ The following list of dependencies are required to use the `TypeScript PDF libra
* Add a simple button to `index.html` and attach a click handler that uses the TypeScript PDF API to create a new PDF document.
{% tabs %}
-{% highlight ts tabtitle="index.html" %}
-
+{% highlight html tabtitle="index.html" %}
Button onclick Example
@@ -38,25 +37,23 @@ The following list of dependencies are required to use the `TypeScript PDF libra
-
{% endhighlight %}
{% endtabs %}
+Along with the PDF file from which you want to extract images. Keep these files in the same static content area as `ej2.min.js` to ensure proper loading.
+
* Include the following namespaces in `index.ts` file.
{% tabs %}
-{% highlight html tabtitle="index.ts" %}
-
+{% highlight ts tabtitle="index.ts" %}
import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfPen, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
-
{% endhighlight %}
{% endtabs %}
* Include the following code example in the click event of the button in `index.ts` to generate a PDF document
{% tabs %}
-{% highlight html tabtitle="index.ts" %}
-
+{% highlight ts tabtitle="index.ts" %}
document.getElementById('normalButton').onclick = (): void => {
// Create a new PDF document
let pdf = new PdfDocument();
@@ -75,7 +72,6 @@ document.getElementById('normalButton').onclick = (): void => {
// Destroy the PDF document instance
pdf.destroy();
};
-
{% endhighlight %}
{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-vue.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-vue.md
index 3433aeb7f..1c98ce511 100644
--- a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-vue.md
+++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-vue.md
@@ -38,25 +38,21 @@ When creating a new project, choose the option `Default ([Vue 2] babel, es-lint)
Once the `quick start` project is set up with default settings, proceed to add Syncfusion® components to the project.
-* **Add script reference** : Add the required scripts using the CDN inside the `` of `index.html` as follows:
+* **Installing Syncfusion® JavaScript PDF package**
-{% tabs %}
-{% highlight c# tabtitle="~/index.html" %}
+All the available JS 2 packages are published in `npmjs.com` registry.
-
- ...
-
-
-
+* To install PDF component, use the following command.
-{% endhighlight %}
-{% endtabs %}
+```bash
+npm install @syncfusion/ej2-pdf --save
+```
+N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on.
* **Create a PDF document** : Add the script in `App.vue` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document.
{% tabs %}
-{% highlight c# tabtitle="~/App.vue" %}
-
+{% highlight vue tabtitle="~/App.vue" %}
-
{% endhighlight %}
{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Library/javascript/DigitalSignature.md b/Document-Processing/PDF/PDF-Library/javascript/DigitalSignature.md
index a35527e7c..8fa1f4e21 100644
--- a/Document-Processing/PDF/PDF-Library/javascript/DigitalSignature.md
+++ b/Document-Processing/PDF/PDF-Library/javascript/DigitalSignature.md
@@ -14,8 +14,7 @@ The PDF provides support to create, validate, and manage digital signatures in P
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 c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, DigestAlgorithm, CryptographicStandard} from '@syncfusion/ej2-pdf';
// Load the document
@@ -48,22 +47,37 @@ form.add(field);
document.save('output.pdf');
// Destroy the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
+// Load the document
+var document = new ej.pdf.PdfDocument();
+// Get the first page of the document
+var page = document.addPage();
+// Access the PDF form
+var form = document.form;
+// Create a new signature field
+var field = new ej.pdf.PdfSignatureField(page, 'Signature', {x: 10, y: 10, width: 100, height: 50});
+// Create a new signature using PFX data and private key
+var sign = ej.pdf.PdfSignature.create({cryptographicStandard: ej.pdf.CryptographicStandard.cms, digestAlgorithm: ej.pdf.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 %}
{% endtabs %}
The following code snippet explains how to add a digital signature in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, DigestAlgorithm, CryptographicStandard} from '@syncfusion/ej2-pdf';
// Load the document
-let document: PdfDocument = new PdfDocument(data, password)
+let document: PdfDocument = new PdfDocument(data)
// Get the first page of the document
let page: PdfPage = document.getPage(0);
// Access the PDF form
@@ -92,12 +106,10 @@ form.add(field);
document.save('output.pdf');
// Destroy the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load the document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Get the first page of the document
var page = document.getPage(0);
// Access the PDF form
@@ -126,7 +138,6 @@ form.add(field);
document.save('output.pdf');
// Destroy the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -135,12 +146,11 @@ document.destroy();
Syncfusion® PDF provides support to create a new PDF signature using a callback function for external signing, enabling secure and flexible digital signature workflows.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, DigestAlgorithm, CryptographicStandard} from '@syncfusion/ej2-pdf';
// Load the document
-let document: PdfDocument = new PdfDocument(data, password);
+let document: PdfDocument = new PdfDocument(data);
// Gets the first page of the document
let page: PdfPage = document.getPage(0);
// Access the PDF form
@@ -171,12 +181,10 @@ form.add(field);
document.save('output.pdf');
// Destroy the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load the document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Gets the first page of the document
var page = document.getPage(0);
// Access the PDF form
@@ -204,7 +212,6 @@ form.add(field);
document.save('output.pdf');
// Destroy the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -213,8 +220,7 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, DigestAlgorithm, CryptographicStandard} from '@syncfusion/ej2-pdf';
// Load the document
@@ -253,10 +259,8 @@ form.add(field);
document.save('output.pdf');
// Destroy the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load the document
var document = new ej.pdf.PdfDocument(data);
// Gets the first page of the document
@@ -287,67 +291,6 @@ form.add(field);
document.save('output.pdf');
// Destroy the document
document.destroy();
-
-{% 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 c# tabtitle="TypeScript" %}
-
-import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, DigestAlgorithm, CryptographicStandard} from '@syncfusion/ej2-pdf';
-
-// Load the document
-let document: PdfDocument = new PdfDocument(data, password);
-// 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
-let 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 c# tabtitle="JavaScript" %}
-
-// Load the document
-var document = new ej.pdf.PdfDocument(data, password);
-// Get the first page of the document
-var page = document.getPage(0);
-// Access the PDF form
-var form = document.form;
-// Create a new signature field
-var field = new ej.pdf.PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 100, height: 50 });
-// Create a new signature using PFX data and private key
-var sign = ej.pdf.PdfSignature.create({ cryptographicStandard: ej.pdf.CryptographicStandard.cms, digestAlgorithm: ej.pdf.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 %}
{% endtabs %}
@@ -356,12 +299,11 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, DigestAlgorithm, CryptographicStandard} from '@syncfusion/ej2-pdf';
// Load the document
-let document: PdfDocument = new PdfDocument(data, password);
+let document: PdfDocument = new PdfDocument(data);
// Get the first page of the document
let page: PdfPage = document.getPage(0);
// Access the PDF form
@@ -387,12 +329,10 @@ form.add(field);
document.save('output.pdf');
// Destroy the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load the document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Get the first page of the document
var page = document.getPage(0);
// Access the PDF form
@@ -411,21 +351,19 @@ form.add(field);
document.save('output.pdf');
// Destroy the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
## Get Certificate Information from a PDF 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.
+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 c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, DigestAlgorithm,PdfCertificateInformation, CryptographicStandard} from '@syncfusion/ej2-pdf';
// Load the document
-let document: PdfDocument = new PdfDocument(data, password);
+let document: PdfDocument = new PdfDocument(data);
// Get the first page of the document
let page: PdfPage = document.getPage(0);
// Access the PDF form
@@ -451,12 +389,10 @@ form.add(field);
document.save('output.pdf');
// Destroy the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load the document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Get the first page of the document
var page = document.getPage(0);
// Access the PDF form
@@ -475,7 +411,6 @@ form.add(field);
document.save('output.pdf');
// Destroy the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -484,12 +419,11 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, DigestAlgorithm, CryptographicStandard} from '@syncfusion/ej2-pdf';
// Load the document
-let document: PdfDocument = new PdfDocument(data, password);
+let document: PdfDocument = new PdfDocument(data);
// Get the first page of the document
let page: PdfPage = document.getPage(0);
// Access the PDF form
@@ -504,12 +438,10 @@ let options: PdfSignatureOptions = signature.getSignatureOptions();
let cryptographicStandard: CryptographicStandard = options.cryptographicStandard;
// Destroy the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load the document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Get the first page of the document
var page = document.getPage(0);
// Access the PDF form
@@ -524,7 +456,6 @@ var options = signature.getSignatureOptions();
var cryptographicStandard = options.cryptographicStandard;
// Destroy the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -533,12 +464,11 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, DigestAlgorithm, CryptographicStandard} from '@syncfusion/ej2-pdf';
// Load the document
-let document: PdfDocument = new PdfDocument(data, password);
+let document: PdfDocument = new PdfDocument(data);
// Get the first page of the document
let page: PdfPage = document.getPage(0);
// Access the PDF form
@@ -585,12 +515,10 @@ let signedDocumentData: Uint8Array = PdfSignature.replaceEmptySignature(
);
// Destroy the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load the document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Get the first page of the document
var page = document.getPage(0);
// Access the PDF form
@@ -631,6 +559,5 @@ var signedDocumentData = ej.pdf.PdfSignature.replaceEmptySignature(
);
// Destroy the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/FormFields.md b/Document-Processing/PDF/PDF-Library/javascript/FormFields.md
index 64732b40c..ef5c71ca5 100644
--- a/Document-Processing/PDF/PDF-Library/javascript/FormFields.md
+++ b/Document-Processing/PDF/PDF-Library/javascript/FormFields.md
@@ -18,8 +18,7 @@ Syncfusion® PDF allows you to create and manage the form in PDF d
This example demonstrates how to add a text box field to a PDF document using the `PdfTextBoxField` class. A text box field allows users to enter text data in interactive PDF forms.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfForm, PdfTextBoxField, PdfStandardFont} from '@syncfusion/ej2-pdf';
// Create a new PDF document
@@ -48,10 +47,8 @@ form.add(field);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add the PDF page.
@@ -78,19 +75,17 @@ form.add(field);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
-The following code snippet explains how to add a popup annotation in an existing PDF document.
+The following code snippet explains how to add a text box field in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfForm, PdfTextBoxField, PdfStandardFont} from '@syncfusion/ej2-pdf';
// Load an existing PDF document
-let document: PdfDocument = new PdfDocument(data, password);
+let document: PdfDocument = new PdfDocument(data);
// Access the first page
let page: PdfPage = document.getPage(0);
// Access the PDF form from the document
@@ -115,12 +110,10 @@ form.add(field);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Access the PDF form from the document
@@ -145,7 +138,6 @@ form.add(field);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -154,8 +146,7 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfForm, PdfComboBoxField} from '@syncfusion/ej2-pdf';
// Create a new PDF document
@@ -180,10 +171,8 @@ form.add(field);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
@@ -206,19 +195,17 @@ form.add(field);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
-The following code snippet explains how to add a popup annotation in an existing PDF document.
+The following code snippet explains how to add a combo box field in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfForm, PdfComboBoxField} from '@syncfusion/ej2-pdf';
// Load an existing PDF document
-let document: PdfDocument = new PdfDocument(data, password);
+let document: PdfDocument = new PdfDocument(data);
// Access the first page
let page: PdfPage = document.getPage(0);
// Access the PDF form
@@ -239,12 +226,10 @@ form.add(field);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Access the PDF form
@@ -265,7 +250,6 @@ form.add(field);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -274,8 +258,7 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfForm, PdfRadioButtonListField} from '@syncfusion/ej2-pdf';
// Create a new PDF document
@@ -298,10 +281,8 @@ form.add(field);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
@@ -322,19 +303,17 @@ form.add(field);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
-The following code snippet explains how to add a popup annotation in an existing PDF document.
+The following code snippet explains how to add a radio button field in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfForm, PdfRadioButtonListField} from '@syncfusion/ej2-pdf';
// Load an existing PDF document
-let document: PdfDocument = new PdfDocument(data, password);
+let document: PdfDocument = new PdfDocument(data);
// Access the first page
let page: PdfPage = document.getPage(0);
// Access the PDF form
@@ -353,12 +332,10 @@ form.add(field);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Access the PDF form
@@ -377,7 +354,6 @@ form.add(field);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -386,8 +362,7 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfForm, PdfListBoxField} from '@syncfusion/ej2-pdf';
// Create a new PDF document
@@ -411,10 +386,8 @@ form.add(field);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
@@ -436,19 +409,17 @@ form.add(field);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
-The following code snippet explains how to add a popup annotation in an existing PDF document.
+The following code snippet explains how to add a list box field in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfForm, PdfListBoxField} from '@syncfusion/ej2-pdf';
// Load an existing PDF document
-let document: PdfDocument = new PdfDocument(data, password);
+let document: PdfDocument = new PdfDocument(data);
// Access the first page
let page: PdfPage = document.getPage(0);
// Access the PDF form
@@ -468,12 +439,10 @@ form.add(field);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Access the PDF form
@@ -493,17 +462,15 @@ form.add(field);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
-### Adding the check Box field
+### 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 c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfForm, PdfCheckBoxField} from '@syncfusion/ej2-pdf';
// Create a new PDF document
@@ -524,10 +491,8 @@ form.add(field);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
@@ -546,19 +511,17 @@ form.add(field);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
-The following code snippet explains how to add a popup annotation in an existing PDF document.
+The following code snippet explains how to check Box field in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfForm, PdfCheckBoxField} from '@syncfusion/ej2-pdf';
// Load an existing PDF document
-let document: PdfDocument = new PdfDocument(data, password);
+let document: PdfDocument = new PdfDocument(data);
// Access the first page
let page: PdfPage = document.getPage(0);
// Access the PDF form
@@ -575,12 +538,10 @@ form.add(field);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Access the PDF form
@@ -597,7 +558,6 @@ form.add(field);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -606,8 +566,7 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, PdfInteractiveBorder} from '@syncfusion/ej2-pdf';
// Create a new PDF document
@@ -636,10 +595,8 @@ document.form.add(
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
@@ -666,19 +623,17 @@ document.form.add(
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
-The following code snippet explains how to add a popup annotation in an existing PDF document.
+The following code snippet explains how to add a signature filed in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, PdfInteractiveBorder} from '@syncfusion/ej2-pdf';
// Load an existing PDF document
-let document: PdfDocument = new PdfDocument(data, password);
+let document: PdfDocument = new PdfDocument(data);
// Access the first page
let page: PdfPage = document.getPage(0);
// Add the signature field into PDF form
@@ -703,12 +658,10 @@ document.form.add(
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Add the signature field into PDF form
@@ -733,7 +686,6 @@ document.form.add(
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -742,8 +694,7 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfForm, PdfButtonField, PdfHighlightMode, PdfBorderStyle, PdfInteractiveBorder} from '@syncfusion/ej2-pdf';
// Create a new PDF document
@@ -774,10 +725,8 @@ document.form.add(
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
@@ -806,19 +755,17 @@ document.form.add(
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
-The following code snippet explains how to add a popup annotation in an existing PDF document.
+The following code snippet explains how to add a button field in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, PdfPage, PdfForm, PdfButtonField, PdfHighlightMode, PdfBorderStyle, PdfInteractiveBorder} from '@syncfusion/ej2-pdf';
// Load an existing PDF document
-let document: PdfDocument = new PdfDocument(data, password);
+let document: PdfDocument = new PdfDocument(data);
// Access the first page
let page: PdfPage = document.getPage(0);
// Add a button field into the PDF form
@@ -845,12 +792,10 @@ document.form.add(
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Add a button field into the PDF form
@@ -877,7 +822,6 @@ document.form.add(
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -890,30 +834,27 @@ Syncfusion® PDF allows you to fill the form fields using PdfField
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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfTextBoxField} from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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;
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfTextBoxField} from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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;
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Access text box field
@@ -926,7 +867,6 @@ field.textAlignment = ej.pdf.PdfTextAlignment.center;
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -935,30 +875,27 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfComboBoxField} from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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;
- // Sets the flag indicates whether the list box allows multiple selections.
- field.multiSelect = true;
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfComboBoxField} from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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;
+// Sets the flag indicates whether the list box allows multiple selections.
+field.multiSelect = true;
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Access combobox field
@@ -971,7 +908,6 @@ field.multiSelect = true;
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -980,30 +916,27 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfRadioButtonListField} from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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;
- // Added tool tip
- field.toolTip = 'Radio button';
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfRadioButtonListField} from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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;
+// Added tool tip
+field.toolTip = 'Radio button';
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Access radio button list field
@@ -1016,7 +949,6 @@ field.toolTip = 'Radio button';
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -1025,30 +957,27 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfListBoxField} from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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;
- // Added tool tip
- field.toolTip = 'ListBox Fields';
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfListBoxField} from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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;
+// Added tool tip
+field.toolTip = 'ListBox Fields';
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Access listbox field
@@ -1061,7 +990,6 @@ field.toolTip = 'ListBox Fields';
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -1070,30 +998,27 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfCheckBoxField} from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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';
- // Added tool tip
- field.toolTip = 'CheckBox Fields';
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfCheckBoxField} from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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';
+// Added tool tip
+field.toolTip = 'CheckBox Fields';
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Access checkbox field
@@ -1106,7 +1031,6 @@ field.toolTip = 'CheckBox Fields';
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -1116,30 +1040,27 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfForm, PdfSignatureField} from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Access the first page
- let page: PdfPage = document.getPage(0);
- // Access checkbox field
- let field: PdfSignatureField = document.form.fieldAt(2) as PdfSignatureField;
- // // Set custom value
- field.setValue('Author', 'John');
- // Added tool tip
- field.toolTip = 'CheckBox Fields';
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
-
-{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfForm, PdfSignatureField} from '@syncfusion/ej2-pdf';
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+let document: PdfDocument = new PdfDocument(data);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Access checkbox field
+let field: PdfSignatureField = document.form.fieldAt(2) as PdfSignatureField;
+// // Set custom value
+field.setValue('Author', 'John');
+// Added tool tip
+field.toolTip = 'CheckBox Fields';
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+{% endhighlight %}
+{% highlight javascript tabtitle="JavaScript" %}
+// Load an existing PDF document
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Access signature field
@@ -1162,32 +1083,29 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfPage, PdfTextBoxField} from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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();
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfPage, PdfTextBoxField} from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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 c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Access text box field
@@ -1202,7 +1120,6 @@ field.defaultValue = 'Syncfusion';
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -1211,26 +1128,23 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfField} from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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();
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfField} from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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 c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the form field at index 0
var field = document.form.fieldAt(0);
// Remove the first item of the form field
@@ -1239,7 +1153,6 @@ field.removeItemAt(0);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -1248,26 +1161,23 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfField} from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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();
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfField} from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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 c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Get the first field
var field = document.form.fieldAt(0);
// Sets the boolean flag indicating whether the form field have been flattened or not.
@@ -1276,7 +1186,6 @@ field.flatten = true;
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -1285,26 +1194,23 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument, PdfField} from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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();
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, PdfField} from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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 c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the form field at index 0
var field = document.form.fieldAt(0);
// Sets a value indicating whether read only.
@@ -1313,7 +1219,6 @@ field.readOnly = true;
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -1324,31 +1229,27 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument} from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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();
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument} from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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 c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Imports form data from to the PDF document.
document.importFormData('formData.fdf', ej.pdf.DataFormat.fdf);
// Save the document
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -1357,31 +1258,27 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument} from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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();
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument} from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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 c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Imports form data from to the PDF document.
document.importFormData('formData.xfdf', ej.pdf.DataFormat.xfdf);
// Save the document
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -1392,27 +1289,24 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument, Uint8Array, PdfFormFieldExportSettings } from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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();
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, Uint8Array, PdfFormFieldExportSettings } from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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 c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Sets the form field data export settings with output data format.
var settings = new ej.pdf.PdfFormFieldExportSettings();
settings.dataFormat = ej.pdf.DataFormat.fdf;
@@ -1422,7 +1316,6 @@ var fdf = document.exportFormData(settings);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -1431,27 +1324,24 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import {PdfDocument, Uint8Array, PdfFormFieldExportSettings } from '@syncfusion/ej2-pdf';
+{% highlight typescript tabtitle="TypeScript" %}
+import {PdfDocument, Uint8Array, PdfFormFieldExportSettings } from '@syncfusion/ej2-pdf';
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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();
-
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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 c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Sets the form field data export settings with output data format.
var settings = new ej.pdf.PdfFormFieldExportSettings();
settings.dataFormat = ej.pdf.DataFormat.xfdf;
@@ -1461,6 +1351,5 @@ var xfdf = document.exportFormData(settings);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/HyperLinks.md b/Document-Processing/PDF/PDF-Library/javascript/HyperLinks.md
index 28c6918c7..250bdd288 100644
--- a/Document-Processing/PDF/PDF-Library/javascript/HyperLinks.md
+++ b/Document-Processing/PDF/PDF-Library/javascript/HyperLinks.md
@@ -14,32 +14,29 @@ In PDF, hyperlinks can be added to allow the users to navigate to another part o
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfStringFormat, PdfStandardFont, PdfFontFamily, Size, PdfTextWebLinkAnnotation, PdfFontStyle } from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument();
- // Access the first page
- let page: PdfPage = document.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: Size = font.measureString('Syncfusion');
- // Create a new text web link annotation
- let annotation: PdfTextWebLinkAnnotation = new PdfTextWebLinkAnnotation({x: 50, y: 40, width: size.width, height: size.height}, {r: 0, g: 0, b: 0}, {r: 165, g: 42, b: 42}, 1);
- // Add annotation to the page
- page.annotations.add(annotation);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfStringFormat, PdfStandardFont, PdfFontFamily, Size, PdfTextWebLinkAnnotation, PdfFontStyle } from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument();
+// Access the first page
+let page: PdfPage = document.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: Size = font.measureString('Syncfusion');
+// Create a new text web link annotation
+let annotation: PdfTextWebLinkAnnotation = new PdfTextWebLinkAnnotation({ x: 50, y: 40, width: size.width, height: size.height }, { r: 0, g: 0, b: 0}, { r: 165, g: 42, b: 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 c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
var document = new ej.pdf.PdfDocument();
// Access the first page
@@ -58,41 +55,37 @@ page.annotations.add(annotation);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
The following code snippet explains how to add a text web link annotation in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfStringFormat, PdfStandardFont, PdfFontFamily, Size, PdfTextWebLinkAnnotation, PdfFontStyle } from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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: Size = font.measureString('Syncfusion');
- // Create a new text web link annotation
- let annotation: PdfTextWebLinkAnnotation = new PdfTextWebLinkAnnotation({x: 50, y: 40, width: size.width, height: size.height}, {r: 0, g: 0, b: 0}, {r: 165, g: 42, b: 42}, 1);
- // Add annotation to the page
- page.annotations.add(annotation);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfStringFormat, PdfStandardFont, PdfFontFamily, Size, PdfTextWebLinkAnnotation, PdfFontStyle } from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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: Size = font.measureString('Syncfusion');
+// Create a new text web link annotation
+let annotation: PdfTextWebLinkAnnotation = new PdfTextWebLinkAnnotation({ x: 50, y: 40, width: size.width, height: size.height }, { r: 0, g: 0, b: 0}, { r: 165, g: 42, b: 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 c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Create a new PDF string format
@@ -109,7 +102,6 @@ page.annotations.add(annotation);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -118,44 +110,41 @@ document.destroy();
This example demonstrates how to create internal navigation within a PDF document using destination-based annotations.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfStringFormat, PdfStandardFont, Size, PdfDocumentLinkAnnotation, PdfDestination, PdfDestinationMode } from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Add a page
- let page: PdfPage = document.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: Size = font.measureString('Syncfusion');
- // Create a new text web link annotation
- let annotation: PdfDocumentLinkAnnotation = new PdfDocumentLinkAnnotation({x: 50, y: 40, width: size.width, height: size.height}, {r: 0, g: 0, b: 0}, {r: 165, g: 42, b: 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 = {x: 20, y: 20};
- // Sets the bounds of the destination.
- destination.destinationBounds = {x: 20, y: 20, width: 100, height: 50};
- // Sets destination to document link annotation.
- annotation.destination = destination;
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfStringFormat, PdfStandardFont, Size, PdfDocumentLinkAnnotation, PdfDestination, PdfDestinationMode } from '@syncfusion/ej2-pdf';
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a page
+let page: PdfPage = document.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: Size = font.measureString('Syncfusion');
+// Create a new text web link annotation
+let annotation: PdfDocumentLinkAnnotation = new PdfDocumentLinkAnnotation({ x: 50, y: 40, width: size.width, height: size.height }, { r: 0, g: 0, b: 0}, { r: 165, g: 42, b: 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 = { x: 20, y: 20};
+// Sets the bounds of the destination.
+destination.destinationBounds = { x: 20, y: 20, width: 100, height: 50};
+// Sets destination to document link annotation.
+annotation.destination = destination;
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
@@ -186,47 +175,43 @@ annotation.destination = destination;
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
The following code snippet demonstrates how to add internal document navigation to a link annotation in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfDocumentLinkAnnotation } from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Get the page
- let page: PdfPage = document.getPage(0);
- // 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 = {x: 20, y: 20};
- // Sets the bounds of the destination.
- destination.destinationBounds = {x: 20, y: 20, width: 100, height: 50};
- // Sets destination to document link annotation.
- annotation.destination = destination;
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfDocumentLinkAnnotation } from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Get the page
+let page: PdfPage = document.getPage(0);
+// 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 = { x: 20, y: 20};
+// Sets the bounds of the destination.
+destination.destinationBounds = { x: 20, y: 20, width: 100, height: 50};
+// Sets destination to document link annotation.
+annotation.destination = destination;
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Get the page
var page = document.getPage(0);
// Access the annotation at index 0
@@ -257,26 +242,23 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfFileLinkAnnotation } from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Add a page
- let page: PdfPage = document.addPage();
- // Create a new file link annotation
- let annotation: PdfFileLinkAnnotation = new PdfFileLinkAnnotation({x: 10, y: 40, width: 30, height: 30}, 'image.png');
- // Add annotation to the page
- page.annotations.add(annotation);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfFileLinkAnnotation } from '@syncfusion/ej2-pdf';
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a page
+let page: PdfPage = document.addPage();
+// Create a new file link annotation
+let annotation: PdfFileLinkAnnotation = new PdfFileLinkAnnotation({ x: 10, y: 40, width: 30, height: 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 c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
@@ -289,35 +271,31 @@ page.annotations.add(annotation);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% 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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfFileLinkAnnotation } from '@syncfusion/ej2-pdf';
-
- // 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 file link annotation
- let annotation: PdfFileLinkAnnotation = new PdfFileLinkAnnotation({x: 10, y: 40, width: 30, height: 30}, 'image.png');
- // Add annotation to the page
- page.annotations.add(annotation);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfFileLinkAnnotation } from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Get the first page
+let page: PdfPage = document.getPage(0) as PdfPage;
+// Create a new file link annotation
+let annotation: PdfFileLinkAnnotation = new PdfFileLinkAnnotation({ x: 10, y: 40, width: 30, height: 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 c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Get the first page
var page = document.getPage(0);
// Create a new file link annotation
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Images.md b/Document-Processing/PDF/PDF-Library/javascript/Images.md
index 1b4d3eb04..f4117c592 100644
--- a/Document-Processing/PDF/PDF-Library/javascript/Images.md
+++ b/Document-Processing/PDF/PDF-Library/javascript/Images.md
@@ -8,7 +8,7 @@ documentation: UG
# Images in JavaScript PDF library
-The JavaScript PDF supports both raster and vector images.
+The JavaScript PDF supports JPEG and PNG images.
Images are supported through the `PdfImage` class, which is an abstract base class that provides the common functionality for `PdfBitmap` class.
@@ -17,35 +17,32 @@ Images are supported through the `PdfImage` class, which is an abstract base cla
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfImage, PdfGraphics, PdfBitmap } from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Add a page
- let page: PdfPage = document.addPage();
- // Get graphics from the page
- let graphics: PdfGraphics = page.graphics;
- // Load the image
- let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z');
- // Draw the image.
- image.draw(graphics, {x: 10, y: 10});
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfImage, PdfGraphics, PdfBitmap } from '@syncfusion/ej2-pdf';
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a page
+let page: PdfPage = document.addPage();
+// Get graphics from the page
+let graphics: PdfGraphics = page.graphics;
+// Load the image(base64 / uint8array)
+let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z');
+// Draw the image.
+image.draw(graphics, { x: 10, y: 10});
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
var page = document.addPage();
// Get graphics from the page
var graphics = page.graphics;
-// Load the image (base64 or binary string)
+// Load the image (base64 / uint8array)
var image = new ej.pdf.PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z');
// Draw the image
image.draw(graphics, { x: 10, y: 10 });
@@ -53,8 +50,6 @@ image.draw(graphics, { x: 10, y: 10 });
document.save('Output.pdf');
// Close the document
document.destroy();
-
-
{% endhighlight %}
{% endtabs %}
@@ -63,35 +58,32 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfGraphics, PdfImage, PdfBitmap } from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Access first page
- let page: PdfPage = document.getPage(0);
- // Get graphics from the page
- let graphics: PdfGraphics = page.graphics;
- // Load the image
- let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z');
- // Draw the image.
- image.draw(graphics, {x: 10, y: 10});
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfGraphics, PdfImage, PdfBitmap } from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Access first page
+let page: PdfPage = document.getPage(0);
+// Get graphics from the page
+let graphics: PdfGraphics = page.graphics;
+// Load the image (base64 / uint8array)
+let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z');
+// Draw the image.
+image.draw(graphics, { x: 10, y: 10});
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access first page
var page = document.getPage(0);
// Get graphics from the page
var graphics = page.graphics;
-// Load the image
+// Load the image (base64 / uint8array)
var image = new ej.pdf.PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z');
// Draw the image.
image.draw(graphics, {x: 10, y: 10});
@@ -99,7 +91,6 @@ image.draw(graphics, {x: 10, y: 10});
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -108,40 +99,37 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfGraphics, PdfImage, PdfBitmap, PdfGraphicsState, PdfFillMode } from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Add a page
- let page: PdfPage = document.addPage();
- // Get graphics from the page
- let graphics: PdfGraphics = page.graphics;
- // Load the image— only the part within the clipping region will be visible
- let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z');
- // Save the current graphics state (to restore later)
- let state: PdfGraphicsState = graphics.save();
- graphics.setClip({x: 0, y: 0, width: 50, height: 12}, PdfFillMode.alternate );
- // Draw the image.
- image.draw(graphics, {x: 10, y: 10});
- // Restore the graphics state to remove the clipping region
- graphics.restore(state);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfGraphics, PdfImage, PdfBitmap, PdfGraphicsState, PdfFillMode } from '@syncfusion/ej2-pdf';
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a page
+let page: PdfPage = document.addPage();
+// Get graphics from the page
+let graphics: PdfGraphics = page.graphics;
+// Load the image (base64 / uint8array)
+let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z');
+// Save the current graphics state (to restore later)
+let state: PdfGraphicsState = graphics.save();
+graphics.setClip({ x: 0, y: 0, width: 50, height: 12}, PdfFillMode.alternate );
+// Draw the image.
+image.draw(graphics, { x: 10, y: 10});
+// 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 c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
var page = document.addPage();
// Get graphics from the page
var graphics = page.graphics;
-// Load the image— only the part within the clipping region will be visible
+// Load the image (base64 / uint8array)
var image = new ej.pdf.PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z');
// Save the current graphics state (to restore later)
var state = graphics.save();
@@ -154,7 +142,6 @@ graphics.restore(state);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -163,45 +150,42 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfGraphics, PdfImage, PdfBitmap, PdfGraphicsState } from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Add a page
- let page: PdfPage = document.addPage();
- // Get graphics from the page
- let graphics: PdfGraphics = page.graphics;
- // Load the image— only the part within the clipping region will be visible
- let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z');
- // Save the current graphics state (to restore later)
- let state: PdfGraphicsState = graphics.save();
- //Translate the coordinate system to the required position
- graphics.translateTransform({x: 100, y: 100});
- //Apply transparency
- graphics.setTransparency(0.5);
- //Rotate the coordinate system
- graphics.rotateTransform(-45);
- // Draw the image.
- image.draw(graphics,{x: 10, y: 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();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfGraphics, PdfImage, PdfBitmap, PdfGraphicsState } from '@syncfusion/ej2-pdf';
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a page
+let page: PdfPage = document.addPage();
+// Get graphics from the page
+let graphics: PdfGraphics = page.graphics;
+// Load the image (base64 / uint8array)
+let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z');
+// Save the current graphics state (to restore later)
+let state: PdfGraphicsState = graphics.save();
+//Translate the coordinate system to the required position
+graphics.translateTransform({ x: 100, y: 100});
+//Apply transparency
+graphics.setTransparency(0.5);
+//Rotate the coordinate system
+graphics.rotateTransform(-45);
+// Draw the image.
+image.draw(graphics,{ x: 10, y: 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 c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
var page = document.addPage();
// Get graphics from the page
var graphics = page.graphics;
-// Load the image— only the part within the clipping region will be visible
+// Load the image (base64 / uint8array)
var image = new ej.pdf.PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z');
// Save the current graphics state (to restore later)
var state = graphics.save();
@@ -219,6 +203,5 @@ graphics.restore(state);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Layers.md b/Document-Processing/PDF/PDF-Library/javascript/Layers.md
index a0ee26cb9..0567c00f3 100644
--- a/Document-Processing/PDF/PDF-Library/javascript/Layers.md
+++ b/Document-Processing/PDF/PDF-Library/javascript/Layers.md
@@ -17,34 +17,31 @@ JavaScript PDF provides support to create, add and merge the layers into PDF doc
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfLayerCollection, PdfLayer, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Add a page
- let page: PdfPage = document.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();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfLayerCollection, PdfLayer, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a page
+let page: PdfPage = document.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 c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
@@ -73,32 +70,29 @@ document.save('Output.pdf');
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfLayerCollection, PdfLayer, PdfGraphics, PdfAnnotation, PdfPen } from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfLayerCollection, PdfLayer, PdfGraphics, PdfAnnotation, PdfPen } from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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 c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Access the collection of layers in the document
@@ -113,7 +107,6 @@ annotation.layer = layer;
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -149,10 +142,8 @@ graphics.drawLine(pen, { x: 200, y: 10 }, { x: 300, y: 100 });
// Save and destroy the document
document.save('Output.pdf');
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
@@ -176,7 +167,6 @@ graphics.drawLine(pen, { x: 200, y: 10 }, { x: 300, y: 100 });
// Save and destroy the document
document.save('Output.pdf');
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -185,26 +175,23 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfLayerCollection } from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfLayerCollection } from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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 c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Get the layer collection.
var layers = document.layers;
// Remove the layer
@@ -213,7 +200,6 @@ layers.removeAt(0);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -222,38 +208,35 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfLayerCollection, PdfLayer, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
-
- // 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();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfLayerCollection, PdfLayer, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
+// 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 c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a new section to the document
@@ -278,6 +261,5 @@ graphics.drawLine(pen, { x: 200, y: 10 }, { x: 300, y: 100 });
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Lists.md b/Document-Processing/PDF/PDF-Library/javascript/Lists.md
index ad578c8a0..8de3211ff 100644
--- a/Document-Processing/PDF/PDF-Library/javascript/Lists.md
+++ b/Document-Processing/PDF/PDF-Library/javascript/Lists.md
@@ -15,12 +15,11 @@ The PDF allows you list the content in ordered and unordered list. The ordered l
This example demonstrates how to create an ordered list in a PDF document using the `PdfOrderedList` class. Ordered lists allow you to present items in a structured, sequential format, typically numbered or lettered, enhancing readability and organization within the PDF content.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import { PdfDocument, PdfPage, PdfList, PdfStandardFont, PdfBrush, PdfStringFormat, PdfPen, PdfNumberStyle, PdfOrderedList, PdfListItemCollection } from '@syncfusion/ej2-pdf';
// Load an existing document
-let document: PdfDocument = new PdfDocument(data, password);
+let document: PdfDocument = new PdfDocument(data);
// Access the first page
let page: PdfPage = document.getPage(0);
// Assign the array of string items
@@ -56,13 +55,10 @@ list.draw(page, { x: 0, y: 20, width: 500, height: 700 });
document.save('output.pdf');
// Destroy the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Assign the array of string items
@@ -106,12 +102,11 @@ document.destroy();
This example demonstrates how to create an unordered list in a PDF document using the `PdfUnorderedList` class. Unordered lists display items with bullet points instead of numbers, making them ideal for presenting non-sequential information in a clear and organized manner.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import { PdfDocument, PdfPage, PdfList, PdfStandardFont, PdfBrush, PdfStringFormat, PdfPen, PdfNumberStyle, PdfUnorderedListStyle, PdfListItemCollection } from '@syncfusion/ej2-pdf';
// Load the existing document
-let document: PdfDocument = new PdfDocument(data, password);
+let document: PdfDocument = new PdfDocument(data);
// Access the first page
let page: PdfPage = document.getPage(0);
// Define the items in the unordered list
@@ -147,12 +142,10 @@ list.draw(page, { x: 0, y: 20, width: 500, height: 700 });
document.save('output.pdf');
// Destroy the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load the existing document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Define the items in the unordered list
@@ -188,6 +181,5 @@ list.draw(page, { x: 0, y: 20, width: 500, height: 700 });
document.save('output.pdf');
// Destroy the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Open-and-save-PDF-files.md b/Document-Processing/PDF/PDF-Library/javascript/Open-and-save-PDF-files.md
index 2f653b9b1..e4fc235a3 100644
--- a/Document-Processing/PDF/PDF-Library/javascript/Open-and-save-PDF-files.md
+++ b/Document-Processing/PDF/PDF-Library/javascript/Open-and-save-PDF-files.md
@@ -15,14 +15,12 @@ domainurl: ##DomainURL##
Open an existing PDF document using the `PdfDocument` class with the specified PDF data.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
// Load an existing PDF document from string data
let document: PdfDocument = new PdfDocument(data);
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document from string data
var document = new ej.pdf.PdfDocument(data);
@@ -36,15 +34,13 @@ The PdfDocument constructor can accept PDF data in either Base64 string or Uint8
Open an existing PDF document using the `PdfDocument` class with the specified PDF data as Base64 string.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
+{% highlight typescript tabtitle="TypeScript" %}
let data: string = 'JVBERi0xLjcNJeLjz9MNCjEyNSAw...........TU3MTQNCiUlRU9GDQo=';
// Load an existing PDF document from data as Base64 string
let document: PdfDocument = new PdfDocument(data);
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
var data = 'JVBERi0xLjcNJeLjz9MNCjEyNSAw...........TU3MTQNCiUlRU9GDQo=';
// Load an existing PDF document from data as Base64 string
var document = new ej.pdf.PdfDocumentPdfDocument(data);
@@ -57,19 +53,15 @@ var document = new ej.pdf.PdfDocumentPdfDocument(data);
Open an existing PDF document using the `PdfDocument` class with the specified PDF data as Uint8Array.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
let binaryData: Uint8Array = Uint8Array.from(data);
// Load an existing PDF document from data as Uint8Array
let document: PdfDocument = new PdfDocument(binaryData);
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
var binaryData = Uint8Array.from(data);
// Load an existing PDF document from data as Uint8Array
let document= new ej.pdf.PdfDocument(binaryData);
-
{% endhighlight %}
{% endtabs %}
@@ -78,17 +70,13 @@ let document= new ej.pdf.PdfDocument(binaryData);
Open an encrypted PDF document using the `PdfDocument` class by providing the correct password.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
// Load an existing PDF document with password
let document: PdfDocument = new PdfDocument(data, "password");
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document with password
var document = new ej.pdf.PdfDocument(data, "password");
-
{% endhighlight %}
{% endtabs %}
@@ -97,23 +85,19 @@ var document = new ej.pdf.PdfDocument(data, "password");
Save and download the PDF document using the `save` method of `PdfDocument` class with the specified file name.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
// Load an existing PDF document
let document: PdfDocument = new PdfDocument(data);
// To-Do some manipulation
// Save and download the PDF document to the specified filename.
document.save('output.pdf');
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
var document = new ej.pdf.PdfDocument(data);
// To-Do some manipulation
// Save and download the PDF document to the specified filename.
document.save('output.pdf');
-
{% endhighlight %}
{% endtabs %}
@@ -122,23 +106,19 @@ document.save('output.pdf');
Save the modified PDF document to the specified byte array using the `save` method available in `PdfDocument` class.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
// Load an existing PDF document
let document: PdfDocument = new PdfDocument(data);
//To-Do some manipulation
// Save and get PDF data as byte array.
let data: Uint8Array = document.save();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
var document: PdfDocument = new ej.pdf.PdfDocument(data);
//To-Do some manipulation
// Save and get PDF data as byte array.
var data = document.save();
-
{% endhighlight %}
{% endtabs %}
@@ -147,8 +127,7 @@ var data = document.save();
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.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
// Load an existing PDF document
let document: PdfDocument = new PdfDocument(data);
//To-Do some manipulation
@@ -156,10 +135,8 @@ let document: PdfDocument = new PdfDocument(data);
document.save('output.pdf');
// Destroy the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
var document = new ej.pdf.PdfDocument(data);
//To-Do some manipulation
@@ -167,6 +144,5 @@ var document = new ej.pdf.PdfDocument(data);
document.save('output.pdf');
// Destroy the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Overview.md b/Document-Processing/PDF/PDF-Library/javascript/Overview.md
index 4ec39da83..8c53c5b47 100644
--- a/Document-Processing/PDF/PDF-Library/javascript/Overview.md
+++ b/Document-Processing/PDF/PDF-Library/javascript/Overview.md
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
# Overview of the JavaScript PDF library control
-The JavaScript PDF Library is a powerful, high-performance, non-UI solution. It provides seamless integration of advanced PDF functionalities into applications developed with TypeScript, JavaScript, Angular, React, Vue, ASP.NET Core, and ASP.NET MVC. With this library, you can easily read, create, and manipulate PDF documents—without relying on Adobe Acrobat.
+The JavaScript PDF Library is a powerful, high-performance, non-UI class library. It provides seamless integration of advanced PDF functionalities into applications developed with TypeScript, JavaScript, Angular, React, Vue, ASP.NET Core, and ASP.NET MVC. With this library, you can easily read, create, and manipulate PDF documents programmatically without the need of Adobe Acrobat.
## Key features
diff --git a/Document-Processing/PDF/PDF-Library/javascript/PDF-document.md b/Document-Processing/PDF/PDF-Library/javascript/PDF-document.md
index a38f64529..7964d1c2c 100644
--- a/Document-Processing/PDF/PDF-Library/javascript/PDF-document.md
+++ b/Document-Processing/PDF/PDF-Library/javascript/PDF-document.md
@@ -14,9 +14,8 @@ The PDF provides support to create, read, and manipulate PDF documents, allowing
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfPageSettings, PdfMargins, PdfPageOrientation, PdfStandardFont, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf';
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfPageSettings, PdfMargins, PdfPageOrientation, PdfStandardFont, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf';
// Create a new PDF document
let document: PdfDocument = new PdfDocument();
@@ -40,10 +39,8 @@ This example shows how to configure custom page settings before adding a page to
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Create a new PDF page settings instance
@@ -66,7 +63,6 @@ graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -75,36 +71,34 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfPageSettings, PdfMargins, PdfPageOrientation, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
-
- // 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 = {width: 595, height: 842};
- // Add a section to the document with the specified settings
- let section: PdfSection = document.addSection(settings);
- // Add a page
- let page: PdfPage = section.addPage();
- // Get graphics from the page
- let graphics: PdfGraphics = page.graphics;
- // Set font
- let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
- // Draw text
- graphics.drawString('Hello World', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfPageSettings, PdfMargins, PdfPageOrientation, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
+// 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 = { width: 595, height: 842}
+;
+// Add a section to the document with the specified settings
+let section: PdfSection = document.addSection(settings);
+// Add a page
+let page: PdfPage = section.addPage();
+// Get graphics from the page
+let graphics: PdfGraphics = page.graphics;
+// Set font
+let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+// Draw text
+graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Define page settings
@@ -135,44 +129,41 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfDocumentInformation, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
-
- // 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 = "JavaScript PDF Library"; // Application that created the PDF
- documentProperties.producer = "JavaScript 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
- let page: PdfPage = document.addPage();
- // Get graphics from the page
- let graphics: PdfGraphics = page.graphics;
- // Set font
- let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
- // Draw text
- graphics.drawString('Hello World', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfDocumentInformation, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
+// Create a PDF document
+let document: PdfDocument = new PdfDocument();
+// Access the document information (metadata)
+let documentProperties: PdfDocumentInformation = document.setDocumentInformation();
+// 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 = "JavaScript PDF Library"; // Application that created the PDF
+documentProperties.producer = "JavaScript 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
+let page: PdfPage = document.addPage();
+// Get graphics from the page
+let graphics: PdfGraphics = page.graphics;
+// Set font
+let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+// Draw text
+graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a PDF document
var document = new ej.pdf.PdfDocument();
// Access the document information (metadata)
-var documentProperties = document.getDocumentInformation();
+var documentProperties = document.setDocumentInformation();
// Set document properties
documentProperties.title = "Sample PDF Document"; // Title of the PDF
documentProperties.author = "John Doe"; // Author name
@@ -195,7 +186,6 @@ graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -204,30 +194,27 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
-
- // Create a PDF document
- let document: PdfDocument = new PdfDocument();
- // Disable incremental update to rewrite the entire file
- document.fileStructure.isIncrementalUpdate = false;
- // Add a page
- let page: PdfPage = document.addPage();
- // Get graphics from the page
- let graphics: PdfGraphics = page.graphics;
- // Set font
- let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
- // Draw text
- graphics.drawString('Hello World', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
+// Create a PDF document
+let document: PdfDocument = new PdfDocument();
+// Disable incremental update to rewrite the entire file
+document.fileStructure.isIncrementalUpdate = false;
+// Add a page
+let page: PdfPage = document.addPage();
+// Get graphics from the page
+let graphics: PdfGraphics = page.graphics;
+// Set font
+let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+// Draw text
+graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a PDF document
var document = new ej.pdf.PdfDocument();
// Disable incremental update to rewrite the entire file
@@ -244,6 +231,5 @@ graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Library/javascript/PDF-pages.md b/Document-Processing/PDF/PDF-Library/javascript/PDF-pages.md
index becd7871d..3c059ccae 100644
--- a/Document-Processing/PDF/PDF-Library/javascript/PDF-pages.md
+++ b/Document-Processing/PDF/PDF-Library/javascript/PDF-pages.md
@@ -7,35 +7,32 @@ documentation: UG
---
# Pages in JavaScript PDF library
-The PDF provides support to add, remove, rearrange, and detect empty pages in PDF documents, enabling complete control over page management for creating dynamic and customized PDFs.
+The PDF provides support to add, remove and rearrange pages in PDF documents, enabling complete control over page management for creating dynamic and customized PDFs.
## Adding a new page to the document
The following code sample demonstrates how to add a `PdfPage` to a PDF document. When multiple pages are added, each new page is appended to the end of the document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
-
- // Create a PDF document
- let document: PdfDocument = new PdfDocument();
- // Add a page
- let page: PdfPage = document.addPage();
- // Get graphics from the page
- let graphics: PdfGraphics = page.graphics;
- // Set font
- let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
- // Draw text
- graphics.drawString('Hello World', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
+// Create a PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a page
+let page: PdfPage = document.addPage();
+// Get graphics from the page
+let graphics: PdfGraphics = page.graphics;
+// Set font
+let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+// Draw text
+graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
@@ -50,7 +47,6 @@ graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -59,44 +55,33 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Define page settings
- let settings: PdfPageSettings = new PdfPageSettings();
- // Add margin
- settings.margins = new PdfMargins(40);
- // Add a section to the document with the specified settings
- let section: PdfSection = document.addSection(settings);
- // Add a page
- let page: PdfPage = section.addPage();
- // Get graphics from the page
- let graphics: PdfGraphics = page.graphics;
- // Set font
- let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
- // Draw text
- graphics.drawString('Hello World', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Define page settings with margins
+let settings: PdfPageSettings = new PdfPageSettings({margins: new PdfMargins(40)});
+// Add a page
+let page: PdfPage = document.addPage(settings);
+// Get graphics from the page
+let graphics: PdfGraphics = page.graphics;
+// Set font
+let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+// Draw text
+graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
-// Define page settings
-var settings = new ej.pdf.PdfPageSettings();
-// Add margin
-settings.margins = new ej.pdf.PdfMargins(40);
-// Add a section to the document with the specified settings
-var section = document.addSection(settings);
+// Define page settings with margins
+var settings = new ej.pdf.PdfPageSettings({margins: new PdfMargins(40)});
// Add a page
-var page = section.addPage();
+var page = document.addPage(settings);
// Get graphics from the page
var graphics = page.graphics;
// Set font
@@ -107,7 +92,6 @@ graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -116,79 +100,60 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Create a new PDF page settings instance
- let pageSetting: PdfPageSettings = new PdfPageSettings();
- // Sets the margins
- pageSetting.margins = new PdfMargins(40);
- // Sets the page size
- pageSetting.size ={width: 595, height: 842};
- // Sets the page orientation
- pageSetting.orientation = PdfPageOrientation.landscape;
- // Add a page
- let page: PdfPage = document.addPage(pageSetting);
- // Get graphics from the page
- let graphics: PdfGraphics = page.graphics;
- // Set font
- let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
- // Draw text
- graphics.drawString('Hello World', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
- // Create a new PDF page settings instance
- let pageSetting1: PdfPageSettings = new PdfPageSettings();
- // Sets the margins
- pageSetting1.margins = new PdfMargins(40);
- // Sets the page size
- pageSetting1.size ={width: 595, height: 842};
- // Sets the page orientation
- pageSetting1.orientation = PdfPageOrientation.landscape;
- // Add a page
- let page1: PdfPage = document.addPage(pageSetting1);
- // Get graphics from the page
- let graphics1 = page1.graphics;
- // Draw text
- graphics1.drawString('Hello World', font, {x: 40, y: 60, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
- // Save the PDF document
- document.save('Output.pdf');
- // Close and dispose the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Define page settings with margins
+let settings: PdfPageSettings = new PdfPageSettings({margins: new PdfMargins(40), size: { width: 595, height: 842}, orientation: PdfPageOrientation.landscape});
+// Add section1
+let section: PdfSection = document.addSection(settings);
+// Add a page
+let page: PdfPage = section.addPage();
+// Get graphics from the page
+let graphics: PdfGraphics = page.graphics;
+// Set font
+let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+// Draw text
+graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+// Define page settings with margins
+let settings1: PdfPageSettings = new PdfPageSettings({margins: new PdfMargins(40), size: { width: 595, height: 842}, orientation: PdfPageOrientation.landscape});
+// Add section1
+let section1: PdfSection = document.addSection(settings1);
+// Add a page
+let page1: PdfPage = section1.addPage();
+// Get graphics from the page
+let graphics1 = page1.graphics;
+// Draw text
+graphics1.drawString('Hello World', font, { x: 40, y: 60, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+// Save the PDF document
+document.save('Output.pdf');
+// Close and dispose the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Create a new PDF page settings instance
-var pageSetting = new ej.pdf.PdfPageSettings();
-// Sets the margins
-pageSetting.margins = new ej.pdf.PdfMargins(40);
-// Sets the page size
-pageSetting.size = { width: 595, height: 842 };
-// Sets the page orientation
-pageSetting.orientation = ej.pdf.PdfPageOrientation.landscape;
+// Define page settings with margins
+var settings: PdfPageSettings = new PdfPageSettings({margins: new PdfMargins(40), size: { width: 595, height: 842}, orientation: PdfPageOrientation.landscape});
+// Add section1
+var section: PdfSection = document.addSection(settings);
// Add a page
-var page = document.addPage(pageSetting);
+var page: PdfPage = section.addPage();
// Get graphics from the page
var graphics = page.graphics;
// Set font
var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular);
// Draw text
graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 }));
-// Create a new PDF page settings instance
-var pageSetting1 = new ej.pdf.PdfPageSettings();
-// Sets the margins
-pageSetting1.margins = new ej.pdf.PdfMargins(40);
-// Sets the page size
-pageSetting1.size = { width: 595, height: 842 };
-// Sets the page orientation
-pageSetting1.orientation = ej.pdf.PdfPageOrientation.landscape;
+// Define page settings with margins
+var settings1: PdfPageSettings = new PdfPageSettings({margins: new PdfMargins(40), size: { width: 595, height: 842}, orientation: PdfPageOrientation.landscape});
+// Add section1
+var section1: PdfSection = document.addSection(settings1);
// Add a page
-var page1 = document.addPage(pageSetting1);
+var page1: PdfPage = section1.addPage();
// Get graphics from the page
var graphics1 = page1.graphics;
// Draw text
@@ -197,7 +162,6 @@ graphics1.drawString('Hello World', font, { x: 40, y: 60, width: 100, height: 20
document.save('Output.pdf');
// Close and dispose the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -206,27 +170,23 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument } from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Gets the page count
- let count: number = document.pageCount;
- // Destroy the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument } from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Gets the page count
+let count: number = document.pageCount;
+// Destroy the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Gets the page count
var count = document.pageCount;
// Destroy the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -235,27 +195,24 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument } from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Define start and end page indices
- let startIndex = 0;
- let 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();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument } from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Define start and end page indices
+let startIndex = 0;
+let 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 c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Define start and end page indices
var startIndex = 0;
var endIndex = document.pageCount - 1;
@@ -265,7 +222,6 @@ document.importPageRange(document, startIndex, endIndex);
document.save('Output.pdf');
// Close the loaded document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -274,31 +230,27 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument } from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Reorders the pages in the PDF document
- document.reorderPages([3, 2, 1]);
- // Save the document
- document.save('output.pdf');
- // Destroy the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument } from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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 c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// 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 %}
{% endtabs %}
@@ -307,31 +259,37 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument } from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Removes the first page
- document.removePage(0);
- // Save the document
- document.save('output.pdf');
- // Destroy the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument } from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Removes the first page
+document.removePage(0);
+or
+// Removes the page
+document.removePage(page);
+// Save the document
+document.save('output.pdf');
+// Destroy the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
+// Access the first page
+var page: PdfPage = document.getPage(0);
// Removes the first page
document.removePage(0);
+or
+// Removes the page
+document.removePage(page);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -340,40 +298,33 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Create a new PDF page settings instance
- let pageSetting : PdfPageSettings = new PdfPageSettings();
- // Sets the page rotation
- pageSetting.rotation = PdfRotationAngle.angle180;
- // Add a page
- let page: PdfPage = document.addPage(pageSetting);
- // Get graphics from the page
- let graphics: PdfGraphics = page.graphics;
- // Set font
- let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
- // Draw text
- graphics.drawString('Hello World', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
- // Save the PDF document
- let data = document.save('Output.pdf');
- // Close and dispose the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf';
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add page
+let page: PdfPage = document.addPage();
+// Rotate the PDF document
+page.rotation = PdfRotationAngle.angle90;
+// Get graphics from the page
+let graphics: PdfGraphics = page.graphics;
+// Set font
+let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+// Draw text
+graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+// Save the PDF document
+let data = document.save('Output.pdf');
+// Close and dispose the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
-// Create a new PDF page settings instance
-var pageSetting = new ej.pdf.PdfPageSettings();
-// Sets the page rotation
-pageSetting.rotation = ej.pdf.PdfRotationAngle.angle180;
-// Add a page
-var page = document.addPage(pageSetting);
+// Add page
+var page = document.addPage();
+// Rotate the PDF document
+page.rotation = PdfRotationAngle.angle90;
// Get graphics from the page
var graphics = page.graphics;
// Set font
@@ -384,7 +335,6 @@ graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200
var data = document.save('Output.pdf');
// Close and dispose the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -393,26 +343,23 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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 c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access first page
var page = document.getPage(0);
// Set the rotation for loaded page
@@ -421,7 +368,6 @@ page.rotation = ej.pdf.PdfRotationAngle.angle180;
document.save('output.pdf');
// Destroy the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -430,30 +376,26 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Copy the second page and add it as third page
- document.importPage(1);
- // Save the output PDF
- document.save('Output.pdf');
- // Destroy the documents
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Copy the second page and add it as third page
+document.importPage(1);
+// Save the output PDF
+document.save('Output.pdf');
+// Destroy the documents
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Copy the second page and add it as third page
document.importPage(1);
// Save the output PDF
document.save('Output.pdf');
// Destroy the documents
document.destroy();
-
{% endhighlight %}
{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Redaction.md b/Document-Processing/PDF/PDF-Library/javascript/Redaction.md
index be3540d0b..19c740442 100644
--- a/Document-Processing/PDF/PDF-Library/javascript/Redaction.md
+++ b/Document-Processing/PDF/PDF-Library/javascript/Redaction.md
@@ -13,202 +13,94 @@ Redacting a PDF is the process of permanently removing sensitive or confidential
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 c# tabtitle="TypeScript" %}
-
-import { PdfDocument, PdfPage } from '@syncfusion/ej2-pdf';
-import { PdfRedactionAnnotation } from '@syncfusion/ej2-pdf-data-extract';
+N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on.
-// 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 redaction annotation
-const annot: PdfRedactionAnnotation = new PdfRedactionAnnotation(
- { x: 100, y: 100, width: 100, height: 100 },
- {
- borderColor: { r: 255, g: 0, b: 0 },
- repeatText: true,
- font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular),
- textColor: { r: 0, g: 0, b: 0 },
- appearanceFillColor: { r: 255, g: 255, b: 255 }
- }
-);
-// Add annotation to the page
-page.annotations.add(annot);
+{% tabs %}
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument } from '@syncfusion/ej2-pdf';
+import { PdfRedactor, PdfRedactionRegion } from '@syncfusion/ej2-pdf-data-extract';
+
+// Load the document
+let document: PdfDocument = new PdfDocument(data);
+// Create a new text extractor
+let redactor: PdfRedactor = new PdfRedactor(document);
+// Add redactions to the collection
+let redactions: PdfRedactionRegion[] = [];
+redactions.push(new PdfRedactionRegion(0, {x: 10, y: 10, width: 100, height: 50}));
+redactions.push(new PdfRedactionRegion(2, {x: 10, y: 10, width: 100, height: 50}, true, {r: 255, g: 0, b: 0}));
+redactor.add(redactions);
+// Apply redactions on the PDF document
+redactor.redact();
+// Save the document
+document.save('output.pdf');
// Destroy the document
document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
-// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
-// Get the first page
-var page = document.getPage(0);
-// Create a new redaction annotation
-var annot = new ej.pdfdataextract.PdfRedactionAnnotation(
- { x: 100, y: 100, width: 100, height: 100 },
- {
- borderColor: { r: 255, g: 0, b: 0 },
- repeatText: true,
- font: document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular),
- textColor: { r: 0, g: 0, b: 0 },
- appearanceFillColor: { r: 255, g: 255, b: 255 }
- }
-);
-// Add annotation to the page
-page.annotations.add(annot);
+{% highlight javascript tabtitle="JavaScript" %}
+// Load the document
+var document = new ej.pdf.PdfDocument(data);
+// Create a new text extractor
+var redactor = new ej.pdfdataextract.PdfRedactor(document);
+// Add redactions to the collection
+var redactions = [];
+redactions.push(new PdfRedactionRegion(0, {x: 10, y: 10, width: 100, height: 50}));
+redactions.push(new PdfRedactionRegion(2, {x: 10, y: 10, width: 100, height: 50}, true, {r: 255, g: 0, b: 0}));
+redactor.add(redactions);
+// Apply redactions on the PDF document
+redactor.redact();
+// Save the document
+document.save('output.pdf');
// Destroy the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
-## Display text on the redacted area
+## Fill color 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.
+You can apply a solid fill color to cover the redacted content. This is the most common approach for redaction.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage } from '@syncfusion/ej2-pdf';
- import { PdfRedactionAnnotation } from '@syncfusion/ej2-pdf-data-extract';
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Access the first page
- let page: PdfPage = document.getPage(0);
- // Create a new redaction annotation
- const font: PdfFont = new PdfStandardFont(PdfFontFamily.timesRoman, 12);
- const annotation: PdfRedactionAnnotation = new PdfRedactionAnnotation({x: 100, y: 100, width: 100, height: 100},{ borderColor: {r: 255, g: 0, b: 0},
- repeatText: true,
- overlayText: 'Sample Overlay',
- font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular),
- textColor: {r: 0, g: 0, b: 0},
- appearanceFillColor: {r: 255, g: 255, b: 255} });
- // Add annotation to the page
- page.annotations.add(annotation);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
-
-{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument } from '@syncfusion/ej2-pdf';
+import { PdfRedactor, PdfRedactor, PdfRedactionRegion} from '@syncfusion/ej2-pdf-data-extract';
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
-// Access the first page
-var page = document.getPage(0);
-// Create a new redaction annotation
-var font = new ej.pdf.PdfStandardFont(ej.pdf.PdfFontFamily.timesRoman, 12);
-var annotation = new ej.pdfdataextract.PdfRedactionAnnotation(
- { x: 100, y: 100, width: 100, height: 100 },
- {
- borderColor: { r: 255, g: 0, b: 0 },
- repeatText: true,
- overlayText: 'Sample Overlay',
- font: document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular),
- textColor: { r: 0, g: 0, b: 0 },
- appearanceFillColor: { r: 255, g: 255, b: 255 }
- }
-);
-// Add annotation to the page
-page.annotations.add(annotation);
+let document: PdfDocument = new PdfDocument(data);
+// Initialize a new instance of the `PdfRedactor` class
+let redactor: PdfRedactor = new PdfRedactor(document);
+// Initialize a new instance of the `PdfRedactionRegion` class.
+let redaction: PdfRedactionRegion = new PdfRedactionRegion(0, {x: 40, y: 41.809, width: 80, height: 90});
+// Sets the fill color used to fill the redacted area.
+redaction.fillColor = {r: 255, g: 0, b: 0};
+redactions.push(redaction);
+// Add redactions with specified options.
+redactor.add(redactions);
+// Apply redactions on the PDF document
+redactor.redact();
// Save the document
-document.save('Output.pdf');
-// Close the document
+document.save('output.pdf');
+// Destroy the document
document.destroy();
-
-{% 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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfTextAlignment, } from '@syncfusion/ej2-pdf';
- import { PdfRedactionAnnotation } from '@syncfusion/ej2-pdf-data-extract';
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Add a page
- let page: PdfPage = document.addPage();
- // Create a new redaction annotation with specified position and size
- let annot: PdfRedactionAnnotation = new PdfRedactionAnnotation({ x: 100, y: 100, width: 300, height: 200 });
- // Define multiple rectangular areas (bounds) within the annotation for redaction
- annot.boundsCollection = [
- { x: 50, y: 50, width: 100, height: 100 }, // First redaction area
- { x: 200, y: 100, width: 60, height: 30 }, // Second redaction area
- { x: 100, y: 400, width: 60, height: 30 } // Third redaction area
- ];
- // Set the overlay text that will appear on the redacted areas
- annot.overlayText = "Confidential";
- // Enable repeating the overlay text across the redacted region
- annot.repeatText = true;
- // Set the fill color for the redaction appearance (red)
- annot.appearanceFillColor = { r: 255, g: 0, b: 0 };
- // Set the color of the overlay text (blue)
- annot.textColor = { r: 0, g: 0, b: 255 };
- // Set the opacity level for the redaction annotation (50% transparent)
- annot.opacity = 0.5;
- // Set the inner color for the redaction area (green)
- annot.innerColor = { r: 0, g: 255, b: 0 };
- // Align the overlay text to the center of the redaction area
- annot.textAlignment = PdfTextAlignment.center;
- // Specify the author of the annotation
- annot.author = "QA Tester";
- // Specify the subject or purpose of the annotation
- annot.subject = "Redaction Test";
- // Add the configured redaction annotation to the page's annotations collection
- page.annotations.add(annot);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
-// Create a new PDF document
-var document = new ej.pdf.PdfDocument();
-// Add a page
-var page = document.addPage();
-// Create a new redaction annotation with specified position and size
-var annot = new ej.pdfdataextract.PdfRedactionAnnotation({ x: 100, y: 100, width: 300, height: 200 });
-// Define multiple rectangular areas (bounds) within the annotation for redaction
-annot.boundsCollection = [
- { x: 50, y: 50, width: 100, height: 100 }, // First redaction area
- { x: 200, y: 100, width: 60, height: 30 }, // Second redaction area
- { x: 100, y: 400, width: 60, height: 30 } // Third redaction area
-];
-// Set the overlay text that will appear on the redacted areas
-annot.overlayText = "Confidential";
-// Enable repeating the overlay text across the redacted region
-annot.repeatText = true;
-// Set the fill color for the redaction appearance (red)
-annot.appearanceFillColor = { r: 255, g: 0, b: 0 };
-// Set the color of the overlay text (blue)
-annot.textColor = { r: 0, g: 0, b: 255 };
-// Set the opacity level for the redaction annotation (50% transparent)
-annot.opacity = 0.5;
-// Set the inner color for the redaction area (green)
-annot.innerColor = { r: 0, g: 255, b: 0 };
-// Align the overlay text to the center of the redaction area
-annot.textAlignment = ej.pdf.PdfTextAlignment.center;
-// Specify the author of the annotation
-annot.author = "QA Tester";
-// Specify the subject or purpose of the annotation
-annot.subject = "Redaction Test";
-// Add the configured redaction annotation to the page's annotations collection
-page.annotations.add(annot);
+{% highlight javascript tabtitle="JavaScript" %}
+// Load an existing PDF document
+var document = new ej.pdf.PdfDocument(data);
+// Initialize a new instance of the `PdfRedactor` class
+var redactor = new ej.pdfdataextract.PdfRedactor(document);
+// Initialize a new instance of the `PdfRedactionRegion` class.
+var redaction = new ej.pdfdataextract.PdfRedactionRegion(0, {x: 40, y: 41.809, width: 80, height: 90});
+// Sets the fill color used to fill the redacted area.
+redaction.fillColor = {r: 255, g: 0, b: 0};
+redactions.push(redaction);
+// Add redactions with specified options.
+redactor.add(redactions);
+// Apply redactions on the PDF document
+redactor.redact();
// Save the document
-document.save('Output.pdf');
-// Close the document
+document.save('output.pdf');
+// Destroy the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -217,39 +109,49 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage } from '@syncfusion/ej2-pdf';
- import { PdfRedactionAnnotation } from '@syncfusion/ej2-pdf-data-extract';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Access the first page
- let page: PdfPage = document.getPage(0);
- //Appearance Fill color
- const annot = new PdfRedactionAnnotation({x: 100, y: 100, width: 100, height: 50});
- annot.appearanceFillColor = {r: 255, g: 255, b: 0};
- page.annotations.add(annot);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage } from '@syncfusion/ej2-pdf';
+import { PdfRedactionAnnotation } from '@syncfusion/ej2-pdf-data-extract';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data, password);
+// Add redactions to the collection
+let redactions: PdfRedactionRegion[] = [];
+// Initialize a new instance of the `PdfRedactor` class
+let redactor: PdfRedactor = new PdfRedactor(document);
+// Initialize a new instance of the `PdfRedactionRegion` class.
+let redaction: PdfRedactionRegion = new PdfRedactionRegion(0, {x: 40, y: 41.809, width: 80, height: 90});
+// Sets the fill color used to fill the redacted area.
+redaction.fillColor = {r: 255, g: 0, b: 0};
+redactions.push(redaction);
+// Add redactions with specified options.
+redactor.add(redactions);
+// Apply redactions on the PDF document
+redactor.redact();
+// Save the document
+document.save('output.pdf');
+// Destroy the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document=new ej.pdf.PdfDocument(data,password);
-// Access the first page
-var page=document.getPage(0);
-// Appearance Fill color
-var annot=new ej.pdfdataextract.PdfRedactionAnnotation({x:100,y:100,width:100,height:50});
-annot.appearanceFillColor={r:255,g:255,b:0};
-page.annotations.add(annot);
+var document = new ej.pdf.PdfDocument(data, password);
+// Add redactions to the collection
+var redactions = [];
+// Initialize a new instance of the `PdfRedactor` class
+var redactor = new ej.pdfdataextract.PdfRedactor(document);
+// Initialize a new instance of the `PdfRedactionRegion` class.
+var redaction = new ej.pdfdataextract.PdfRedactionRegion(0, {x: 40, y: 41.809, width: 80, height: 90});
+// Sets the fill color used to fill the redacted area.
+redaction.fillColor = {r: 255, g: 0, b: 0};
+redactions.push(redaction);
+// Add redactions with specified options.
+redactor.add(redactions);
+// Apply redactions on the PDF document
+redactor.redact();
// Save the document
-document.save('Output.pdf');
-// Close the document
+document.save('output.pdf');
+// Destroy the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Shapes.md b/Document-Processing/PDF/PDF-Library/javascript/Shapes.md
index 12c69c16f..e34bdb819 100644
--- a/Document-Processing/PDF/PDF-Library/javascript/Shapes.md
+++ b/Document-Processing/PDF/PDF-Library/javascript/Shapes.md
@@ -28,30 +28,27 @@ JavaScript PDF supports adding shapes with different types of brushes like solid
This example demonstrates how to draw a polygon shape in a PDF document using the `drawPolygon` method of the `PdfGraphics` class.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfPen } from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Add a page
- let page: PdfPage = document.addPage();
- // Get graphics from the page
- let graphics: PdfGraphics = page.graphics;
- // Create a new pen
- let pen: PdfPen = new PdfPen({r: 0, g: 0, b: 0}, 1);
- // Define the polygon points
- let points: Point[] = [{x: 10, y: 100}, {x: 10, y: 200}, {x: 100, y: 100}, {x: 100, y: 200}, {x: 55, y: 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 c# tabtitle="JavaScript" %}
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfPen } from '@syncfusion/ej2-pdf';
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a page
+let page: PdfPage = document.addPage();
+// Get graphics from the page
+let graphics: PdfGraphics = page.graphics;
+// Create a new pen
+let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1);
+// Define the polygon points
+let points: Point[] = [{x: 10, y: 100}, { x: 10, y: 200}, { x: 100, y: 100}, { x: 100, y: 200}, { x: 55, y: 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 javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
@@ -68,39 +65,35 @@ graphics.drawPolygon(points,pen);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
The following code snippet explains how to draw a polygon in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfPen } from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Access the first page
- let page: PdfPage = document.getPage(0);
- // Get graphics from the page
- let graphics: PdfGraphics = page.graphics;
- // Create a new pen
- let pen: PdfPen = new PdfPen({r: 0, g: 0, b: 0}, 1);
- // Define the polygon points
- let points: Point[] = [{x: 10, y: 100}, {x: 10, y: 200}, {x: 100, y: 100}, {x: 100, y: 200}, {x: 55, y: 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 c# tabtitle="JavaScript" %}
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfPen } from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Get graphics from the page
+let graphics: PdfGraphics = page.graphics;
+// Create a new pen
+let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1);
+// Define the polygon points
+let points: Point[] = [{x: 10, y: 100}, { x: 10, y: 200}, { x: 100, y: 100}, { x: 100, y: 200}, { x: 55, y: 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 javascript tabtitle="JavaScript" %}
// Create a new PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Add a page
var page = document.getPage(0);
// Get graphics from the page
@@ -115,7 +108,6 @@ graphics.drawPolygon(points,pen);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -124,28 +116,25 @@ document.destroy();
This example demonstrates how to draw a straight line in a PDF document using the `drawLine` method of the `PdfGraphics` class.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfPen } from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Add a page
- let page: PdfPage = document.addPage();
- // Get graphics from the page
- let graphics: PdfGraphics = page.graphics;
- // Create a new pen
- let pen: PdfPen = new PdfPen({r: 0, g: 0, b: 0}, 1);
- // Draw a line on the page graphics
- graphics.drawLine(pen, {x: 10, y: 200}, {x: 100, y: 100});
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfPen } from '@syncfusion/ej2-pdf';
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a page
+let page: PdfPage = document.addPage();
+// Get graphics from the page
+let graphics: PdfGraphics = page.graphics;
+// Create a new pen
+let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1);
+// Draw a line on the page graphics
+graphics.drawLine(pen, { x: 10, y: 200}, { x: 100, y: 100});
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
@@ -160,37 +149,33 @@ graphics.drawLine(pen, { x: 10, y: 200 }, { x: 100, y: 100 });
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
The following code snippet explains how to draw a line in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfPen } from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Access the first page
- let page: PdfPage = document.getPage(0);
- // Get graphics from the page
- let graphics: PdfGraphics = page.graphics;
- // Create a new pen
- let pen: PdfPen = new PdfPen({r: 0, g: 0, b: 0}, 1);
- // Draw a line on the page graphics
- graphics.drawLine(pen, {x: 10, y: 200}, {x: 100, y: 100});
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfPen } from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Get graphics from the page
+let graphics: PdfGraphics = page.graphics;
+// Create a new pen
+let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1);
+// Draw a line on the page graphics
+graphics.drawLine(pen, { x: 10, y: 200}, { x: 100, y: 100});
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Add a page
var page = document.getPage(0);
// Get graphics from the page
@@ -203,7 +188,6 @@ graphics.drawLine(pen, { x: 10, y: 200 }, { x: 100, y: 100 });
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -212,34 +196,31 @@ document.destroy();
This example demonstrates how to draw a path in a PDF document using the `drawPath` method of the `PdfGraphics` class.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfPen, PdfPath } from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Add a page
- let page: PdfPage = document.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({r: 0, g: 0, b: 0}, 1);
- // Add lines to the path
- path.addLine({x: 10, y: 50}, {x: 200, y: 250});
- path.addLine({x: 10, y: 150}, {x: 220, y: 250});
- path.addLine({x: 10, y: 200}, {x: 240, y: 250});
- // 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 c# tabtitle="JavaScript" %}
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfPen, PdfPath } from '@syncfusion/ej2-pdf';
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a page
+let page: PdfPage = document.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({ r: 0, g: 0, b: 0 }, 1);
+// Add lines to the path
+path.addLine({ x: 10, y: 50}, { x: 200, y: 250});
+path.addLine({ x: 10, y: 150}, { x: 220, y: 250});
+path.addLine({ x: 10, y: 200}, { x: 240, y: 250});
+// 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 javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
@@ -260,43 +241,39 @@ graphics.drawPath(path, pen);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
The following code snippet explains how to draw path in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfPen, PdfPath } from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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({r: 0, g: 0, b: 0}, 1);
- // Add lines to the path
- path.addLine({x: 10, y: 50}, {x: 200, y: 250});
- path.addLine({x: 10, y: 150}, {x: 220, y: 250});
- path.addLine({x: 10, y: 200}, {x: 240, y: 250});
- // 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 c# tabtitle="JavaScript" %}
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfPen, PdfPath } from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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({ r: 0, g: 0, b: 0 }, 1);
+// Add lines to the path
+path.addLine({ x: 10, y: 50}, { x: 200, y: 250});
+path.addLine({ x: 10, y: 150}, { x: 220, y: 250});
+path.addLine({ x: 10, y: 200}, { x: 240, y: 250});
+// 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 javascript tabtitle="JavaScript" %}
// Create a new PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Add a page
var page = document.getPage(0);
// Create a new path
@@ -315,7 +292,6 @@ graphics.drawPath(path, pen);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -324,28 +300,25 @@ document.destroy();
This example demonstrates how to draw a text in a PDF document using the `drawString` method of the `PdfGraphics` class.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfStandardFont, PdfBrush } from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Add a page
- let page: PdfPage = document.addPage();
- // Get graphics from the page
- let graphics: PdfGraphics = page.graphics;
- // Set font
- let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
- // Draw text
- graphics.drawString('Hello World', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfStandardFont, PdfBrush } from '@syncfusion/ej2-pdf';
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a page
+let page: PdfPage = document.addPage();
+// Get graphics from the page
+let graphics: PdfGraphics = page.graphics;
+// Set font
+let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+// Draw text
+graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
@@ -360,37 +333,33 @@ graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
The following code snippet explains how to draw text in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfStandardFont, PdfBrush } from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Access the first page
- let page: PdfPage = document.getPage(0);
- // Get graphics from the page
- let graphics: PdfGraphics = page.graphics;
- // Set font
- let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
- // Draw text
- graphics.drawString('Hello World', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfStandardFont, PdfBrush } from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Get graphics from the page
+let graphics: PdfGraphics = page.graphics;
+// Set font
+let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+// Draw text
+graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Add a page
var page = document.getPage(0);
// Get graphics from the page
@@ -403,7 +372,6 @@ graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -412,28 +380,25 @@ document.destroy();
This example demonstrates how to draw a rectangle in a PDF document using the `drawRectangle` method of the `PdfGraphics` class.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Add a page
- let page: PdfPage = document.addPage();
- // Gets the graphics of the PDF page
- let graphics: PdfGraphics = page.graphics;
- // Create a new pen.
- let pen: PdfPen = new PdfPen({r: 0, g: 0, b: 0}, 1);
- // Draw a rectangle on the page graphics.
- graphics.drawRectangle({x: 10, y: 20, width: 100, height: 200}, pen);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a page
+let page: PdfPage = document.addPage();
+// Gets the graphics of the PDF page
+let graphics: PdfGraphics = page.graphics;
+// Create a new pen.
+let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1);
+// Draw a rectangle on the page graphics.
+graphics.drawRectangle({ x: 10, y: 20, width: 100, height: 200}, pen);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
@@ -448,37 +413,33 @@ graphics.drawRectangle({ x: 10, y: 20, width: 100, height: 200 }, pen);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
The following code snippet explains how to draw rectangle in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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({r: 0, g: 0, b: 0}, 1);
- // Draw a rectangle on the page graphics.
- graphics.drawRectangle({x: 10, y: 20, width: 100, height: 200}, pen);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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({ r: 0, g: 0, b: 0 }, 1);
+// Draw a rectangle on the page graphics.
+graphics.drawRectangle({ x: 10, y: 20, width: 100, height: 200}, pen);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Add a page
var page = document.getPage(0);
// Gets the graphics of the PDF page
@@ -491,7 +452,6 @@ graphics.drawRectangle({ x: 10, y: 20, width: 100, height: 200 }, pen);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -500,28 +460,25 @@ document.destroy();
This example demonstrates how to draw a pie in a PDF document using the `drawPie` method of the `PdfGraphics` class.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Add a page
- let page: PdfPage = document.addPage();
- // Gets the graphics of the PDF page
- let graphics: PdfGraphics = page.graphics;
- // Create a new pen
- let pen: PdfPen = new PdfPen({r: 0, g: 0, b: 0}, 1);
- // Draw a pie slice on the page graphics
- graphics.drawPie({x: 10, y: 50, width: 200, height: 200}, 180, 60, pen);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a page
+let page: PdfPage = document.addPage();
+// Gets the graphics of the PDF page
+let graphics: PdfGraphics = page.graphics;
+// Create a new pen
+let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1);
+// Draw a pie slice on the page graphics
+graphics.drawPie({ x: 10, y: 50, width: 200, height: 200}, 180, 60, pen);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
@@ -536,37 +493,33 @@ graphics.drawPie({ x: 10, y: 50, width: 200, height: 200 }, 180, 60, pen);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
The following code snippet explains how to draw pie in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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({r: 0, g: 0, b: 0}, 1);
- // Draw a pie slice on the page graphics
- graphics.drawPie({x: 10, y: 50, width: 200, height: 200}, 180, 60, pen);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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({ r: 0, g: 0, b: 0 }, 1);
+// Draw a pie slice on the page graphics
+graphics.drawPie({ x: 10, y: 50, width: 200, height: 200}, 180, 60, pen);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Add a page
var page = document.getPage(0);
// Gets the graphics of the PDF page
@@ -579,7 +532,6 @@ graphics.drawPie({ x: 10, y: 50, width: 200, height: 200 }, 180, 60, pen);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -588,28 +540,25 @@ document.destroy();
This example demonstrates how to draw a arc in a PDF document using the `drawArc` method of the `PdfGraphics` class.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Add a page
- let page: PdfPage = document.addPage();
- // Gets the graphics of the PDF page
- let graphics: PdfGraphics = page.graphics;
- // Create a new pen
- let pen: PdfPen = new PdfPen({r: 0, g: 0, b: 0}, 1);
- // Draw a arc slice on the page graphics
- graphics.drawArc({x: 10, y: 20, width: 100, height: 200}, 20, 30, pen);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a page
+let page: PdfPage = document.addPage();
+// Gets the graphics of the PDF page
+let graphics: PdfGraphics = page.graphics;
+// Create a new pen
+let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1);
+// Draw a arc slice on the page graphics
+graphics.drawArc({ x: 10, y: 20, width: 100, height: 200}, 20, 30, pen);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
@@ -624,37 +573,33 @@ graphics.drawArc({ x: 10, y: 20, width: 100, height: 200 }, 20, 30, pen);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
The following code snippet explains how to draw arc in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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({r: 0, g: 0, b: 0}, 1);
- // Draw a aec slice on the page graphics
- graphics.drawArc({x: 10, y: 20, width: 100, height: 200}, 20, 30, pen);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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({ r: 0, g: 0, b: 0 }, 1);
+// Draw a aec slice on the page graphics
+graphics.drawArc({ x: 10, y: 20, width: 100, height: 200}, 20, 30, pen);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Add a page
var page = document.getPage(0);
// Gets the graphics of the PDF page
@@ -667,7 +612,6 @@ graphics.drawArc({ x: 10, y: 20, width: 100, height: 200 }, 20, 30, pen);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -676,28 +620,25 @@ document.destroy();
This example demonstrates how to draw a bezier in a PDF document using the `drawBezier` method of the `PdfGraphics` class.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Add a page
- let page: PdfPage = document.addPage();
- // Gets the graphics of the PDF page
- let graphics: PdfGraphics = page.graphics;
- // Create a new pen
- let pen: PdfPen = new PdfPen({r: 0, g: 0, b: 0}, 1);
- // Draw a Bezier curve on the page graphics
- graphics.drawBezier({x: 50, y: 100}, {x: 200, y: 50}, {x: 100, y: 150}, {x: 150, y: 100}, pen);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a page
+let page: PdfPage = document.addPage();
+// Gets the graphics of the PDF page
+let graphics: PdfGraphics = page.graphics;
+// Create a new pen
+let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1);
+// Draw a Bezier curve on the page graphics
+graphics.drawBezier({ x: 50, y: 100}, { x: 200, y: 50}, { x: 100, y: 150}, { x: 150, y: 100}, pen);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
@@ -712,37 +653,33 @@ graphics.drawBezier({ x: 50, y: 100 }, { x: 200, y: 50 }, { x: 100, y: 150 }, {
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
The following code snippet explains how to draw bezier in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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({r: 0, g: 0, b: 0}, 1);
- // Draw a Bezier curve on the page graphics
- graphics.drawBezier({x: 50, y: 100}, {x: 200, y: 50}, {x: 100, y: 150}, {x: 150, y: 100}, pen);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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({ r: 0, g: 0, b: 0 }, 1);
+// Draw a Bezier curve on the page graphics
+graphics.drawBezier({ x: 50, y: 100}, { x: 200, y: 50}, { x: 100, y: 150}, { x: 150, y: 100}, pen);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Add a page
var page = document.getPage(0);
// Gets the graphics of the PDF page
@@ -755,7 +692,6 @@ graphics.drawBezier({ x: 50, y: 100 }, { x: 200, y: 50 }, { x: 100, y: 150 }, {
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -764,28 +700,25 @@ document.destroy();
This example demonstrates how to draw a ellipse in a PDF document using the `drawEllipse` method of the `PdfGraphics` class.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Add a page
- let page: PdfPage = document.addPage();
- // Gets the graphics of the PDF page
- let graphics: PdfGraphics = page.graphics;
- // Create a new pen
- let pen: PdfPen = new PdfPen({r: 0, g: 0, b: 0}, 1);
- // Draw an ellipse on the page graphics
- graphics.drawEllipse({x: 10, y: 20, width: 100, height: 200}, pen);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a page
+let page: PdfPage = document.addPage();
+// Gets the graphics of the PDF page
+let graphics: PdfGraphics = page.graphics;
+// Create a new pen
+let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1);
+// Draw an ellipse on the page graphics
+graphics.drawEllipse({ x: 10, y: 20, width: 100, height: 200}, pen);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
@@ -800,38 +733,33 @@ graphics.drawEllipse({ x: 10, y: 20, width: 100, height: 200 }, pen);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
The following code snippet explains how to draw ellipse in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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({r: 0, g: 0, b: 0}, 1);
- // Draw an ellipse on the page graphics
- graphics.drawEllipse({x: 10, y: 20, width: 100, height: 200}, pen);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
-
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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({ r: 0, g: 0, b: 0 }, 1);
+// Draw an ellipse on the page graphics
+graphics.drawEllipse({ x: 10, y: 20, width: 100, height: 200}, pen);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Add a page
var page = document.getPage(0);
// Gets the graphics of the PDF page
@@ -844,6 +772,5 @@ graphics.drawEllipse({ x: 10, y: 20, width: 100, height: 200 }, pen);
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Split-Documents.md b/Document-Processing/PDF/PDF-Library/javascript/Split-Documents.md
index 4584379a6..3990ef82d 100644
--- a/Document-Processing/PDF/PDF-Library/javascript/Split-Documents.md
+++ b/Document-Processing/PDF/PDF-Library/javascript/Split-Documents.md
@@ -15,12 +15,11 @@ The PDF library supports Splitting PDF file into single-page or multiple-page PD
The PDF library allows splitting the pages of an existing PDF document into multiple individual PDF documents using `split` method of the `PdfDocument` class.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import { PdfDocument, PdfDocumentSplitEventArgs} from '@syncfusion/ej2-pdf';
// Load an existing PDF document
-let document: PdfDocument = new PdfDocument(data, password);
+let document: PdfDocument = new PdfDocument(data);
document.splitEvent = documentSplitEvent;
// Split PDF document into individual pages
document.split();
@@ -30,12 +29,10 @@ function documentSplitEvent(sender: PdfDocument, args: PdfDocumentSplitEventArgs
}
// Destroy the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
document.splitEvent = documentSplitEvent;
// Split PDF document into individual pages
document.split();
@@ -45,7 +42,6 @@ function documentSplitEvent(sender, args): void {
}
// Destroy the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -54,12 +50,11 @@ document.destroy();
The PDF library allows splitting a certain range of pages into a separate PDF document using the `splitByPageRanges` method of the `PdfDocument` class.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import { PdfDocument, PdfDocumentSplitEventArgs} from '@syncfusion/ej2-pdf';
// Load an existing PDF document
-let document: PdfDocument = new PdfDocument(data, password);
+let document: PdfDocument = new PdfDocument(data);
document.splitEvent = documentSplitEvent;
// Split PDF document by page ranges specified
document.splitByPageRanges([[0, 4], [5, 9]]);
@@ -69,12 +64,10 @@ function documentSplitEvent(sender: PdfDocument, args: PdfDocumentSplitEventArgs
}
// Destroy the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
document.splitEvent = documentSplitEvent;
// Split PDF document by page ranges specified
document.splitByPageRanges([[0, 4], [5, 9]]);
@@ -84,9 +77,7 @@ function documentSplitEvent(sender, args): void {
}
// Destroy the document
document.destroy();
-
{% endhighlight %}
-
{% endtabs %}
## Split by a fixed number of pages into a PDF document
@@ -94,12 +85,11 @@ document.destroy();
The PDF library allows splitting by fixed number of pages of an existing PDF document using the `splitByFixedNumber` method of the `PdfDocument` class.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import { PdfDocument, PdfDocumentSplitEventArgs} from '@syncfusion/ej2-pdf';
// Load an existing PDF document
-let document: PdfDocument = new PdfDocument(data, password);
+let document: PdfDocument = new PdfDocument(data);
document.splitEvent = documentSplitEvent;
// Split PDF document by fixed number of pages
document.splitByFixedNumber(1);
@@ -109,12 +99,10 @@ function documentSplitEvent(sender: PdfDocument, args: PdfDocumentSplitEventArgs
}
// Destroy the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
document.splitEvent = documentSplitEvent;
// Split PDF document by fixed number of pages
document.splitByFixedNumber(1);
@@ -124,6 +112,5 @@ function documentSplitEvent(sender, args): void {
}
// Destroy the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Templates.md b/Document-Processing/PDF/PDF-Library/javascript/Templates.md
index 83df12c51..f5aca316d 100644
--- a/Document-Processing/PDF/PDF-Library/javascript/Templates.md
+++ b/Document-Processing/PDF/PDF-Library/javascript/Templates.md
@@ -14,32 +14,29 @@ A PDF template is a drawing surface, where contents can be added. All the elemen
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfRubberStampAnnotation, PdfTemplate, PdfImage, PdfBitmap } from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Add a page
- let page: PdfPage = document.addPage();
- // Create a new rubber stamp annotation
- let annotation: PdfRubberStampAnnotation = new PdfRubberStampAnnotation ({x: 50, y: 100, width: 100, height: 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, {x: 10, y: 20});
- // Add annotation to the page
- page.annotations.add(annotation);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfRubberStampAnnotation, PdfTemplate, PdfImage, PdfBitmap } from '@syncfusion/ej2-pdf';
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a page
+let page: PdfPage = document.addPage();
+// Create a new rubber stamp annotation
+let annotation: PdfRubberStampAnnotation = new PdfRubberStampAnnotation({ x: 50, y: 100, width: 100, height: 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, { x: 10, y: 20});
+// Add annotation to the page
+page.annotations.add(annotation);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
@@ -67,34 +64,31 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfRubberStampAnnotation, PdfTemplate, PdfImage, PdfBitmap } from '@syncfusion/ej2-pdf';
-
- // 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
- let annotation: PdfRubberStampAnnotation = new PdfRubberStampAnnotation ({x: 50, y: 100, width: 100, height: 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, {x: 10, y: 20});
- // Add annotation to the page
- page.annotations.add(annotation);
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfRubberStampAnnotation, PdfTemplate, PdfImage, PdfBitmap } from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Get the first page
+let page: PdfPage = document.getPage(0) as PdfPage;
+// Create a new rubber stamp annotation
+let annotation: PdfRubberStampAnnotation = new PdfRubberStampAnnotation({ x: 50, y: 100, width: 100, height: 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, { x: 10, y: 20});
+// Add annotation to the page
+page.annotations.add(annotation);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Get the first page
var page = document.getPage(0);
// Create a new rubber stamp annotation
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Text-Extraction.md b/Document-Processing/PDF/PDF-Library/javascript/Text-Extraction.md
index 3d5c8cc4f..e0e1e1034 100644
--- a/Document-Processing/PDF/PDF-Library/javascript/Text-Extraction.md
+++ b/Document-Processing/PDF/PDF-Library/javascript/Text-Extraction.md
@@ -13,28 +13,27 @@ The PDF allows you to extract the text from a particular page or the entire PDF
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.
+N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on.
+
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import { PdfDocument } from '@syncfusion/ej2-pdf';
- import { PdfDataExtractor } from '@syncfusion/ej2-pdf-data-extract';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument } from '@syncfusion/ej2-pdf';
+import { PdfDataExtractor } from '@syncfusion/ej2-pdf-data-extract';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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 c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Initialize a new instance of the PdfDataExtractor class
var extractor = new ej.pdfdataextract.PdfDataExtractor(document);
// Extract text content from the PDF document
@@ -52,27 +51,24 @@ document.destroy();
This example demonstrates how to extract text from a PDF document by specifying a start and end page number. This approach allows you to retrieve text content from a defined range of pages for processing or analysis.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import { PdfDocument } from '@syncfusion/ej2-pdf';
- import { PdfDataExtractor } from '@syncfusion/ej2-pdf-data-extract';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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({ startPageIndex: 0, endPageIndex: document.pageCount - 1 });
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument } from '@syncfusion/ej2-pdf';
+import { PdfDataExtractor } from '@syncfusion/ej2-pdf-data-extract';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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({ startPageIndex: 0, endPageIndex: document.pageCount - 1 });
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Initialize a new instance of the PdfDataExtractor class
var extractor = new ej.pdfdataextract.PdfDataExtractor(document);
// Extract text content from the PDF document
@@ -90,27 +86,24 @@ document.destroy();
This example demonstrates how to extract text from a PDF page using the `PdfDataExtractor` class with layout-based options.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import { PdfDocument } from '@syncfusion/ej2-pdf';
- import { PdfDataExtractor } from '@syncfusion/ej2-pdf-data-extract';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument } from '@syncfusion/ej2-pdf';
+import { PdfDataExtractor } from '@syncfusion/ej2-pdf-data-extract';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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 c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Initialize a new instance of the PdfDataExtractor class
var extractor = new ej.pdfdataextract.PdfDataExtractor(document);
// Extracts text from the PDF Page based on its layout
@@ -132,27 +125,24 @@ N> Layout based text extraction may take additional processing time when compare
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument } from '@syncfusion/ej2-pdf';
- import { PdfDataExtractor, TextLine } from '@syncfusion/ej2-pdf-data-extract';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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: document.pageCount - 1});
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument } from '@syncfusion/ej2-pdf';
+import { PdfDataExtractor, TextLine } from '@syncfusion/ej2-pdf-data-extract';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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: document.pageCount - 1});
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Initialize a new instance of the PdfDataExtractor class
var extractor = new ej.pdfdataextract.PdfDataExtractor(document);
// Extracts text from the PDF Page based on its line
@@ -170,33 +160,36 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument } from '@syncfusion/ej2-pdf';
+import { PdfDataExtractor, TextLine, TextWord, TextGlyph } from '@syncfusion/ej2-pdf-data-extract';
- import { PdfDocument } from '@syncfusion/ej2-pdf';
- import { PdfDataExtractor, TextLine, TextWord, TextGlyph } from '@syncfusion/ej2-pdf-data-extract';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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({
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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
+ endPageIndex: document.pageCount - 1
});
- let page: PdfPage;
- // Iterate through each extracted text line
- for (let i: number = 0; i < textCollection.length; i++) {
+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
let wordCollection: TextWord[] = textCollection[i].words;
// Iterate through each word in the line
- for (let j: number = 0; j < wordCollection.length; j++) {
+ for (let j: number = 0; j < wordCollection.length; j++)
+ {
let word: TextWord = wordCollection[j];
- if (word) {
+ if (word)
+ {
// Iterate through each glyph (character shape) in the word
- for (let k: number = 0; k < word.glyphs.length; k++) {
+ 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(
@@ -209,17 +202,15 @@ This example demonstrates how to extract words from a PDF document using the `ex
}
}
}
- }
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
-
+}
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Create a PdfDataExtractor instance for the given PDF document
var extractor = new ej.pdfdataextract.PdfDataExtractor(document);
// Extract text lines from all pages in the document
@@ -263,33 +254,36 @@ document.destroy();
This example demonstrates how to access individual characters from a PDF document using the `TextGlyph` class.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument } from '@syncfusion/ej2-pdf';
+import { PdfDataExtractor, TextLine, TextWord, TextGlyph } from '@syncfusion/ej2-pdf-data-extract';
- import { PdfDocument } from '@syncfusion/ej2-pdf';
- import { PdfDataExtractor, TextLine, TextWord, TextGlyph } from '@syncfusion/ej2-pdf-data-extract';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // 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({
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// 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
+ endPageIndex: document.pageCount - 1
});
- let page: PdfPage;
- // Iterate through each extracted text line
- for (let i: number = 0; i < textCollection.length; i++) {
+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
let wordCollection: TextWord[] = textCollection[i].words;
// Iterate through each word in the line
- for (let j: number = 0; j < wordCollection.length; j++) {
+ for (let j: number = 0; j < wordCollection.length; j++)
+ {
let word: TextWord = wordCollection[j];
- if (word) {
+ if (word)
+ {
// Iterate through each glyph (character shape) in the word
- for (let k: number = 0; k < word.glyphs.length; k++) {
+ 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(
@@ -302,16 +296,15 @@ This example demonstrates how to access individual characters from a PDF documen
}
}
}
- }
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
-
+}
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Create a PdfDataExtractor instance for the given PDF document
var extractor = new ej.pdfdataextract.PdfDataExtractor(document);
// Extract text lines from all pages in the document
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Text.md b/Document-Processing/PDF/PDF-Library/javascript/Text.md
index edc0a9833..149e360c6 100644
--- a/Document-Processing/PDF/PDF-Library/javascript/Text.md
+++ b/Document-Processing/PDF/PDF-Library/javascript/Text.md
@@ -14,9 +14,8 @@ The PDF provides support to add and format text in PDF documents using various f
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
// Create a PDF document
let document: PdfDocument = new PdfDocument();
@@ -32,10 +31,8 @@ This example demonstrates how to draw text in a new PDF document using the `draw
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
@@ -50,7 +47,6 @@ graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -61,9 +57,8 @@ N> Due to the inherent limitations of the PDF specification and the rendering c
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
// Create a new PDF document
let document: PdfDocument = new PdfDocument();
@@ -83,10 +78,8 @@ This example demonstrates the importance of saving and restoring the graphics st
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
@@ -105,7 +98,6 @@ graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -114,28 +106,25 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
-
- // Load an existing PDF document
- let document: PdfDocument = new PdfDocument(data, password);
- // Access first page
- let page: PdfPage = document.getPage(0);
- // Set font
- let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
- // Draw text
- page.graphics.drawString('Hello World', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// Access first page
+let page: PdfPage = document.getPage(0);
+// Set font
+let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+// Draw text
+page.graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access first page
var page = document.getPage(0);
// Set font
@@ -146,7 +135,6 @@ page.graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -163,39 +151,35 @@ JavaScript PDF allows you to add text to the PDF document using the following ty
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Add a page
- let page: PdfPage = document.addPage();
- // Set font
- let font: PdfStandardFont = new PdfStandardFont(PdfFontFamily.helvetica, 10);
- // Draw text
- page.graphics.drawString('Hello World', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a page
+let page: PdfPage = document.addPage();
+// Set font
+let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10);
+// Draw text
+page.graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
var page = document.addPage();
// Set font
-var font = new ej.pdf.PdfStandardFont(ej.pdf.PdfFontFamily.helvetica, 10);
+var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10);
// Draw text
page.graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 }));
// Save the document
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -204,39 +188,35 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfTrueTypeFont, PdfBrush } from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Add a page
- let page: PdfPage = document.addPage();
- // Set font
- let font: PdfTrueTypeFont = new PdfTrueTypeFont('Arial.ttf', 10);
- // Draw text
- page.graphics.drawString('Hello World', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfTrueTypeFont, PdfBrush } from '@syncfusion/ej2-pdf';
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a page
+let page: PdfPage = document.addPage();
+// Set font
+let font: PdfTrueTypeFont = document.embedFont(data, 10);
+// Draw text
+page.graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
var page = document.addPage();
// Set font
-var font = new ej.pdf.PdfTrueTypeFont('Arial.ttf', 10);
+var font = document.embedFont(data, 10);
// Draw text
page.graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 }));
// Save the document
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -245,80 +225,35 @@ document.destroy();
This example demonstrates how to draw text using fonts in a PDF document by utilizing the `drawString` method of the `PdfGraphics` class. The fonts provide support for Chinese, Japanese, and Korean characters, ensuring accurate rendering of multilingual text in the document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfCjkStandardFont, PdfBrush } from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Add a page
- let page: PdfPage = document.addPage();
- // Set font
- let font: PdfCjkStandardFont = new PdfCjkStandardFont(PdfCjkFontFamily.heiseiMinchoW3, 10);
- // Draw text
- page.graphics.drawString('こんにちは世界', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
-
-{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfCjkStandardFont, PdfBrush } from '@syncfusion/ej2-pdf';
// Create a new PDF document
-var document = new ej.pdf.PdfDocument();
+let document: PdfDocument = new PdfDocument();
// Add a page
-var page = document.addPage();
+let page: PdfPage = document.addPage();
// Set font
-var font = new ej.pdf.PdfCjkStandardFont(ej.pdf.PdfCjkFontFamily.heiseiMinchoW3, 10);
+let font: PdfCjkStandardFont = document.embedFont(PdfCjkFontFamily.heiseiMinchoW3, 10);
// Draw text
-page.graphics.drawString('こんにちは世界', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 }));
+page.graphics.drawString('こんにちは世界', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
// Save the document
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% 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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfTrueTypeFont, PdfBrush } from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Add a page
- let page: PdfPage = document.addPage();
- // Set font
- let font: PdfTrueTypeFont = new PdfTrueTypeFont('Arial.otf', 10);
- // Draw text
- page.graphics.drawString('Syncfusion JavaScript PDF library used to create, read, and edit PDF files in any application', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
-
-{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
var page = document.addPage();
// Set font
-var font = new ej.pdf.PdfTrueTypeFont('Arial.otf', 10);
+var font = document.embedFont(ej.pdf.PdfCjkFontFamily.heiseiMinchoW3, 10);
// Draw text
-page.graphics.drawString('Syncfusion JavaScript PDF library used to create, read, and edit PDF files in any application', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 }));
+page.graphics.drawString('こんにちは世界', font, { x: 10, y: 20, width: 100, height: 200 }, new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 }));
// Save the document
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -327,31 +262,28 @@ document.destroy();
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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfStandardFont, PdfStringFormat, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Add a page
- let page: PdfPage = document.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 = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
- // Draw text
- page.graphics.drawString('Syncfusion JavaScript PDF library', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfStandardFont, PdfStringFormat, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a page
+let page: PdfPage = document.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 = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+// Draw text
+page.graphics.drawString('Syncfusion JavaScript PDF library', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
@@ -369,7 +301,6 @@ page.graphics.drawString('Syncfusion JavaScript PDF library', font, { x: 10, y:
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -380,32 +311,29 @@ document.destroy();
**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 c# tabtitle="TypeScript" %}
-
- import { PdfDocument, PdfPage, PdfStandardFont, PdfStringFormat, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
-
- // Create a new PDF document
- let document: PdfDocument = new PdfDocument();
- // Add a page
- let page: PdfPage = document.addPage();
- // Set font
- let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
- // 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('Hello World', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
- // Save the document
- document.save('Output.pdf');
- // Close the document
- document.destroy();
+{% highlight typescript tabtitle="TypeScript" %}
+import { PdfDocument, PdfPage, PdfStandardFont, PdfStringFormat, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a page
+let page: PdfPage = document.addPage();
+// Set font
+let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+// 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('Hello World', font, { x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a page
@@ -424,6 +352,5 @@ page.graphics.drawString('Hello World', font, { x: 10, y: 20, width: 100, height
document.save('Output.pdf');
// Close the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Watermarks.md b/Document-Processing/PDF/PDF-Library/javascript/Watermarks.md
index 7263bb44f..a263a252d 100644
--- a/Document-Processing/PDF/PDF-Library/javascript/Watermarks.md
+++ b/Document-Processing/PDF/PDF-Library/javascript/Watermarks.md
@@ -14,8 +14,7 @@ The PDF provides support to add watermark or stamp with text and images in the P
This example demonstrates how to add a text watermark 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. The transparency can be applied to the text using `setTransparency` method and rotation can be applied using `rotateTransform` method.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import { PdfDocument, PdfPage, PdfGraphics, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush} from '@syncfusion/ej2-pdf';
// Load an existing PDF document
@@ -34,17 +33,15 @@ graphics.setTransparency(0.25);
graphics.rotateTransform(-45);
graphics.drawImage
// Draw the string
-graphics.drawString('Imported using Syncfusion PDF', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+graphics.drawString('Created by Syncfusion PDF', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
// Restore the graphics state
graphics.restore(state);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
var document = new ej.pdf.PdfDocument();
// Access first page
@@ -61,26 +58,24 @@ graphics.setTransparency(0.25);
graphics.rotateTransform(-45);
graphics.drawImage
// Draw the string
-graphics.drawString('Imported using Syncfusion PDF', font, {x: 10, y: 20, width: 100, height: 200}, new ej.pdf.({r: 0, g: 0, b: 255}));
+graphics.drawString('Created by Syncfusion PDF', font, {x: 10, y: 20, width: 100, height: 200}, new ej.pdf.({r: 0, g: 0, b: 255}));
// Restore the graphics state
graphics.restore(state);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
The following code snippet explains how add a text watermark in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import { PdfDocument, PdfPage, PdfGraphics, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush} from '@syncfusion/ej2-pdf';
// Load an existing PDF document
-let document: PdfDocument = new PdfDocument(data, password);
+let document: PdfDocument = new PdfDocument(data);
// Access first page
let page: PdfPage = document.getPage(0);
// Gets the graphics of the PDF page
@@ -95,19 +90,17 @@ graphics.setTransparency(0.25);
graphics.rotateTransform(-45);
graphics.drawImage
// Draw the string
-graphics.drawString('Imported using Syncfusion PDF', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+graphics.drawString('Created by Syncfusion PDF', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
// Restore the graphics state
graphics.restore(state);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access first page
var page = document.getPage(0);
// Gets the graphics of the PDF page
@@ -122,14 +115,13 @@ graphics.setTransparency(0.25);
graphics.rotateTransform(-45);
graphics.drawImage
// Draw the string
-graphics.drawString('Imported using Syncfusion PDF', font, {x: 10, y: 20, width: 100, height: 200}, new ej.pdf.PdfBrush({r: 0, g: 0, b: 255}));
+graphics.drawString('Created by Syncfusion PDF', font, {x: 10, y: 20, width: 100, height: 200}, new ej.pdf.PdfBrush({r: 0, g: 0, b: 255}));
// Restore the graphics state
graphics.restore(state);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -138,8 +130,7 @@ document.destroy();
This example demonstrates how to add a image watermark using standard fonts in a PDF document by utilizing the `drawImage` method of the `PdfGraphics` class along with predefined font types from the `PdfStandardFont` class. The transparency can be applied to the images using `setTransparency` method.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import { PdfDocument, PdfPage, PdfGraphics, PdfBitmap} from '@syncfusion/ej2-pdf';
// Load an existing PDF document
@@ -162,10 +153,8 @@ graphics.restore(state);
document.save('output.pdf');
// Destroy the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
var document = new ej.pdf.PdfDocument();
// Access the first page
@@ -186,19 +175,17 @@ graphics.restore(state);
document.save('output.pdf');
// Destroy the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
The following code snippet explains how add a image watermark in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import { PdfDocument, PdfPage, PdfGraphics, PdfBitmap} from '@syncfusion/ej2-pdf';
// Load an existing PDF document
-let document: PdfDocument = new PdfDocument(data, password);
+let document: PdfDocument = new PdfDocument(data);
// Access first page
let page: PdfPage = document.getPage(0);
// Gets the graphics of the PDF page
@@ -217,13 +204,10 @@ graphics.restore(state);
document.save('output.pdf');
// Destroy the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access first page
var page = document.getPage(0);
// Gets the graphics of the PDF page
@@ -242,7 +226,6 @@ graphics.restore(state);
document.save('output.pdf');
// Destroy the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
@@ -251,8 +234,7 @@ document.destroy();
This example demonstrates how to add a text watermark to an existing PDF document using the `PdfWatermarkAnnotation` class. The annotation allows you to specify the watermark text, color, opacity, and position to visually mark the document as confidential or draft.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import { PdfDocument, PdfPage, PdfWatermarkAnnotation} from '@syncfusion/ej2-pdf';
// Load an existing PDF document
@@ -269,10 +251,8 @@ let annotation: PdfWatermarkAnnotation = new PdfWatermarkAnnotation('CONFIDENTIA
page.annotations.add(watermark);
// Destroy the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
var document = new ej.pdf.PdfDocument();
// Add a new page (first page)
@@ -292,19 +272,17 @@ var annotation = new ej.pdf.PdfWatermarkAnnotation(
page.annotations.add(annotation);
// Destroy the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
The following code snippet explains how add a watermark annotation in an existing PDF document.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import { PdfDocument, PdfPage, PdfWatermarkAnnotation} from '@syncfusion/ej2-pdf';
// Load an existing PDF document
-let document: PdfDocument = new PdfDocument(data, password);
+let document: PdfDocument = new PdfDocument(data);
// Get the first page
let page: PdfPage = document.getPage(0);
// Create new watermark annotation
@@ -317,12 +295,10 @@ let annotation: PdfWatermarkAnnotation = new PdfWatermarkAnnotation('WaterMark',
page.annotations.add(watermark);
// Destroy the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Get the first page
var page = document.getPage(0);
// Create new watermark annotation
@@ -335,22 +311,19 @@ opacity:0.3
page.annotations.add(annotation);
// Destroy the document
document.destroy();
-
-
{% endhighlight %}
{% endtabs %}
## Removing Watermark Annotation
-Remove a watermark annotation from the page’s annotation collection using the `PdfAnnotationCollection` of the loaded page. The following example demonstrates how to achieve this.
+Remove a watermark annotation from the page's annotation collection using the `PdfAnnotationCollection` of the loaded page. The following example demonstrates how to achieve this.
{% tabs %}
-{% highlight c# tabtitle="TypeScript" %}
-
+{% highlight typescript tabtitle="TypeScript" %}
import { PdfDocument, PdfPage, PdfAnnotationCollection, PdfWatermarkAnnotation} from '@syncfusion/ej2-pdf';
// Load an existing PDF document
-let document: PdfDocument = new PdfDocument(data, password);
+let document: PdfDocument = new PdfDocument(data);
// Access first page
let page: PdfPage = document.getPage(0);
// Check if the first annotation is a watermark, then remove it
@@ -363,12 +336,10 @@ if (annotation instanceof PdfWatermarkAnnotation) {
document.save('output.pdf');
// Destroy the document
document.destroy();
-
{% endhighlight %}
-{% highlight c# tabtitle="JavaScript" %}
-
+{% highlight javascript tabtitle="JavaScript" %}
// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
+var document = new ej.pdf.PdfDocument(data);
// Access first page
var page = document.getPage(0);
// Check if the first annotation is a watermark, then remove it
@@ -380,6 +351,5 @@ page.annotations.removeAt(0);
document.save('output.pdf');
// Destroy the document
document.destroy();
-
{% endhighlight %}
{% endtabs %}
\ No newline at end of file