Skip to content

Commit 877c9ad

Browse files
SF2381SF2381
authored
Merge pull request #2276 from syncfusion-content/1010299-JS-PageUpdate
1010299: JavaScript PDF Library new features UG Page Updating
2 parents d6b16b0 + 40b475b commit 877c9ad

7 files changed

Lines changed: 608 additions & 8 deletions

File tree

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

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -884,5 +884,135 @@ var signedDocumentData = ej.pdf.PdfSignature.replaceEmptySignature(
884884
// Destroy the document
885885
document.destroy();
886886

887+
{% endhighlight %}
888+
{% endtabs %}
889+
890+
## Sign existing signature field
891+
892+
This section explains how to sign an existing unsigned signature field in a PDF using the JavaScript PDF library. You can locate predefined signature fields and apply a digital signature directly by calling `PdfSignatureField.setSignature()` method, without altering the document layout. This is ideal for templates where signature placeholders already exist, allowing you to add digital signatures to the field using a certificate and signature settings.
893+
894+
{% tabs %}
895+
{% highlight typescript tabtitle="TypeScript" %}
896+
import {PdfDocument, PdfForm, DigestAlgorithm, CryptographicStandard, PdfSignatureField} from '@syncfusion/ej2-pdf';
897+
898+
// Load an existing PDF document
899+
let document: PdfDocument = new PdfDocument(data);
900+
// Access loaded form
901+
let form: PdfForm = document.form;
902+
// Access the loaded form field
903+
let field: PdfSignatureField = form.fieldAt(0) as PdfSignatureField;
904+
// Create a digital signature with CMS + SHA-256
905+
const signature: PdfSignature = PdfSignature.create(certificate, 'password', {
906+
digestAlgorithm: DigestAlgorithm.sha256,
907+
cryptographicStandard: CryptographicStandard.cms
908+
});
909+
// Apply the signature to the field
910+
field.setSignature(signature);
911+
// Save the document
912+
document.save('Output.pdf');
913+
// Close the document
914+
document.destroy();
915+
916+
{% endhighlight %}
917+
{% highlight javascript tabtitle="JavaScript" %}
918+
919+
// Load an existing PDF document
920+
var document = new ej.pdf.PdfDocument(data);
921+
// Access loaded form
922+
var form = document.form;
923+
// Access the loaded form field
924+
var field = form.fieldAt(0);
925+
// Create a digital signature with CMS + SHA-256
926+
const signature = ej.pdf.PdfSignature.create(certificate, 'password', {
927+
digestAlgorithm: ej.pdf.DigestAlgorithm.sha256,
928+
cryptographicStandard: ej.pdf.CryptographicStandard.cms
929+
});
930+
// Apply the signature to the field
931+
field.setSignature(signature);
932+
// Save the document
933+
document.save('Output.pdf');
934+
// Close the document
935+
document.destroy();
936+
937+
{% endhighlight %}
938+
{% endtabs %}
939+
940+
## Remove existing digital signature
941+
942+
This section explains how to remove an existing digital signature from a PDF by using `PdfForm.removeField()` method to delete the signature field entirely. Removing the field clears the signature dictionary, allowing the document to be edited, corrected, or re‑signed as needed. This is useful when preparing a PDF for updates or resolving signature‑related issues.
943+
944+
{% tabs %}
945+
{% highlight typescript tabtitle="TypeScript" %}
946+
import {PdfDocument, PdfForm, PdfSignatureField} from '@syncfusion/ej2-pdf';
947+
948+
// Load an existing PDF document
949+
let document: PdfDocument = new PdfDocument(data);
950+
// Access loaded form
951+
let form: PdfForm = document.form;
952+
// Access the loaded form field
953+
let field: PdfSignatureField = form.fieldAt(0) as PdfSignatureField;
954+
// Remove the signature field
955+
if (field instanceof PdfSignatureField) {
956+
document.form.removeField(field);
957+
}
958+
// Destroy the document
959+
document.destroy();
960+
961+
{% endhighlight %}
962+
{% highlight javascript tabtitle="JavaScript" %}
963+
964+
// Load an existing PDF document
965+
var document = new ej.pdf.PdfDocument(data);
966+
// Access loaded form
967+
var form = document.form;
968+
// Access the loaded form field
969+
var field = form.fieldAt(0);
970+
// Remove the signature field
971+
if (field instanceof ej.pdf.PdfSignatureField) {
972+
document.form.removeField(field);
973+
}
974+
// Destroy the document
975+
document.destroy();
976+
977+
{% endhighlight %}
978+
{% endtabs %}
979+
980+
## Document revisions
981+
982+
Digital signatures in a PDF create new revisions, keeping every previous version intact. These revisions let you see how the document looked when each signature was applied and check if anything changed later. You can access all revisions using `PdfDocument.getRevisions()` method or get a specific one using `PdfSignatureField.getRevision()` method.
983+
984+
{% tabs %}
985+
{% highlight typescript tabtitle="TypeScript" %}
986+
import {PdfDocument, PdfForm, PdfSignatureField} from '@syncfusion/ej2-pdf';
987+
988+
// Load an existing PDF document
989+
let document: PdfDocument = new PdfDocument(data);
990+
// Access loaded form
991+
let form: PdfForm = document.form;
992+
// Access the loaded form field
993+
let signature: PdfSignatureField = form.fieldAt(0);
994+
// Retrieve all revision indexes of the PDF document
995+
let revisions: number[] = document.getRevisions();
996+
// Gets the revision number associated with the signature field
997+
let revision: number = signature.getRevision();
998+
// Destroy the document
999+
document.destroy();
1000+
1001+
{% endhighlight %}
1002+
{% highlight javascript tabtitle="JavaScript" %}
1003+
1004+
// Load an existing PDF document
1005+
var document = new ej.pdf.PdfDocument(data);
1006+
// Access loaded form
1007+
var form = document.form;
1008+
// Access the loaded form field
1009+
var signature = form.fieldAt(0);
1010+
// Retrieve all revision indexes of the PDF document
1011+
var revisions = document.getRevisions();
1012+
// Gets the revision number associated with the signature field
1013+
var revision = signature.getRevision();
1014+
// Destroy the document
1015+
document.destroy();
1016+
8871017
{% endhighlight %}
8881018
{% endtabs %}

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

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -851,6 +851,70 @@ document. Destroy();
851851
{% endhighlight %}
852852
{% endtabs %}
853853

854+
## Add a date field to a PDF form
855+
856+
This section shows how to add a date field to a PDF form, allowing users to enter or select a date within the document. The JavaScript PDF library lets you configure the date field’s appearance, format, and behavior. You can also attach actions that run custom scripts or validations whenever the field is focused, changed, or submitted.
857+
858+
{% tabs %}
859+
{% highlight typescript tabtitle="TypeScript" %}
860+
import {PdfDocument, pdfPage, PdfForm, PdfTextBoxField, PdfJavaScriptAction } from '@syncfusion/ej2-pdf';
861+
862+
// Create a new PDF document
863+
let document: PdfDocument = new PdfDocument();
864+
// Add a new page to the document
865+
let page: pdfPage = document.addPage();
866+
// Access loaded form
867+
let form: PdfForm = document.form;
868+
// Create a new text box field
869+
const field: PdfTextBoxField = new PdfTextBoxField(page, 'DateField', {
870+
x: 50, y: 200, width: 150, height: 20,
871+
});
872+
// Sets the text value to text box field
873+
field.text = '18/08/2003';
874+
// Sets date formate
875+
const format: string = 'yyyy-mm-dd';
876+
// Add a JavaScript action to run custom scripts or validations
877+
field.actions.format = new PdfJavaScriptAction(`AFDate_FormatEx("${format}");`);
878+
field.actions.keyPressed = new PdfJavaScriptAction(`AFDate_KeystrokeEx("${format}"):`);
879+
field.actions.validate = new PdfJavaScriptAction(`AFDate_Validate("${format}");`);
880+
// Add a new form field
881+
form.add(field);
882+
// Save the document
883+
document.save('output.pdf');
884+
// Destroy the document
885+
document. Destroy();
886+
887+
{% endhighlight %}
888+
{% highlight javascript tabtitle="JavaScript" %}
889+
890+
// Create a new PDF document instance
891+
var document = new ej.pdf.PdfDocument();
892+
// Add a new page to the document
893+
var page = document.addPage();
894+
// Access loaded form
895+
var form = document.form;
896+
// Create a new text box field
897+
const field = new ej.pdf.PdfTextBoxField(page, 'fieldF', {
898+
x: 50, y: 200, width: 150, height: 20
899+
});
900+
// Sets the text value to text box field
901+
field.text = '18/08/2003';
902+
// Sets date formate
903+
const format = 'yyyy-mm-dd';
904+
// Add a JavaScript action to run custom scripts or validations
905+
field.actions.format = new ej.pdf.PdfJavaScriptAction(`AFDate_FormatEx("${format}");`);
906+
field.actions.keyPressed = new ej.pdf.PdfJavaScriptAction(`AFDate_KeystrokeEx("${format}"):`);
907+
field.actions.validate = new ej.pdf.PdfJavaScriptAction(`AFDate_Validate("${format}");`);
908+
// Add a new form field
909+
form.add(field);
910+
// Save the document
911+
document.save('Output.pdf');
912+
// Destroy the document
913+
document. Destroy();
914+
915+
{% endhighlight %}
916+
{% endtabs %}
917+
854918
## Field Auto Naming
855919

856920
To prevent grouping when adding fields with the same name, you can enable the `fieldAutoNaming` property of `PdfForm` class. Setting fieldAutoNaming to true ensures that each field gets a unique name internally, even if you specify the same name during creation.

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

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 36, PdfF
2929
let size: Size = font.measureString('Syncfusion');
3030
// Create a new text web link annotation
3131
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);
32+
// Sets the URL of the annotation.
33+
annotation.url = ‘http://www.syncfusion.com’;
3234
// Add annotation to the page
3335
page.annotations.add(annotation);
3436
// Save the document
@@ -51,6 +53,8 @@ var font = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFont
5153
var size = font.measureString('Syncfusion');
5254
// Create a new text web link annotation
5355
var annotation = new ej.pdf.PdfTextWebLinkAnnotation({ x: 50, y: 40, width: size.width, height: size.height }, { r: 0, g: 0, b: 0 }, { r: 165, g: 42, b: 42 }, 1);
56+
// Sets the URL of the annotation.
57+
annotation.url = ‘http://www.syncfusion.com’;
5458
// Add annotation to the page
5559
page.annotations.add(annotation);
5660
// Save the document
@@ -162,5 +166,95 @@ document.save('Output.pdf');
162166
// Close the document
163167
document.destroy();
164168

169+
{% endhighlight %}
170+
{% endtabs %}
171+
172+
## Modifying or updating existing hyperlinks
173+
174+
This example shows how to update hyperlink annotations in a PDF using Syncfusion’s JavaScript PDF Library. Link annotations retrieved from a page can have their URL or bounding region updated as needed. This makes it easy to refresh outdated links or adjust navigation behavior whenever the document changes.
175+
176+
{% tabs %}
177+
{% highlight typescript tabtitle="TypeScript" %}
178+
import { PdfDocument, PdfPage, PdfTextWebLinkAnnotation } from '@syncfusion/ej2-pdf';
179+
180+
// Load an existing PDF document
181+
let document: PdfDocument = new PdfDocument(data);
182+
// Access the first page
183+
let page: PdfPage = document.getPage(0);
184+
// Get the first annotation of the page
185+
let annotation: PdfAnnotation = page.annotations.at(0);
186+
// Modified its properties
187+
if (annotation instanceof PdfTextWebLinkAnnotation) {
188+
annotation.url = 'https://www.google.co.in/';
189+
}
190+
// Save the document
191+
document.save('Output.pdf');
192+
// Close the document
193+
document.destroy();
194+
195+
{% endhighlight %}
196+
{% highlight javascript tabtitle="JavaScript" %}
197+
198+
// Load an existing PDF document
199+
var document = new ej.pdf.PdfDocument(data);
200+
// Access the first page
201+
var page = document.getPage(0);
202+
// Get the first annotation of the page
203+
var annotation = page.annotations.at(0);
204+
// Modified its properties
205+
if (annotation instanceof ej.pdf.PdfTextWebLinkAnnotation) {
206+
annotation.url = 'https://www.google.co.in/';
207+
}
208+
// Save the document
209+
document.save('Output.pdf');
210+
// Close the document
211+
document.destroy();
212+
213+
{% endhighlight %}
214+
{% endtabs %}
215+
216+
## Removing hyperlinks
217+
218+
This example demonstrates how to remove hyperlink annotations from a PDF using Syncfusion’s JavaScript PDF Library. By reviewing each annotation and checking whether it represents a hyperlink, you can remove it using either `remove()` or `removeAt()` methods. This helps clean up outdated or unwanted links while keeping the rest of the document content intact.
219+
220+
{% tabs %}
221+
{% highlight typescript tabtitle="TypeScript" %}
222+
import { PdfDocument, PdfPage, PdfTextWebLinkAnnotation } from '@syncfusion/ej2-pdf';
223+
224+
// Load an existing PDF document
225+
let document: PdfDocument = new PdfDocument(data);
226+
// Access the first page
227+
let page: PdfPage = document.getPage(0);
228+
// Access first annotation from the PDF page
229+
let annotation: PdfTextWebLinkAnnotation = page.annotations.at(0) as PdfTextWebLinkAnnotation;
230+
// Remove an annotation from the collection
231+
page.annotations.remove(annotation);
232+
// Remove an annotation with specific index
233+
page.annotations.removeAt(1);
234+
// Save the document
235+
document.save('output.pdf');
236+
// Close the document
237+
document.destroy();
238+
239+
{% endhighlight %}
240+
{% highlight javascript tabtitle="JavaScript" %}
241+
242+
// Load an existing PDF document
243+
var document = new ej.pdf.PdfDocument(data);
244+
// Access the first page
245+
var page = document.getPage(0);
246+
// Access first annotation from the PDF page
247+
var annotation = page.annotations.at(0);
248+
// Remove an annotation from the collection
249+
if (annotation instanceof ej.pdf.PdfTextWebLinkAnnotation) {
250+
page.annotations.remove(annotation);
251+
}
252+
// Remove an annotation with specific index
253+
page.annotations.removeAt(1);
254+
// Save the document
255+
document.save('output.pdf');
256+
// Close the document
257+
document.destroy();
258+
165259
{% endhighlight %}
166260
{% endtabs %}

‎Document-Processing/PDF/PDF-Library/javascript/Image-Extraction.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
---
2-
title: Image Extraction in TypeScript PDF library | Syncfusion
2+
title: Image Extraction in JavaScript PDF library | Syncfusion
33
description: This section explains how to extract images from PDF documents and retrieve their properties such as position and size using the JavaScript PDF library
44
platform: document-processing
55
control: PDF
66
documentation: UG
77
---
8-
# Image Extraction in TypeScript PDF library
8+
# Image Extraction in JavaScript PDF library
99

1010
The PDF provides support to extract images from PDF documents and retrieve their properties such as bounds, index and raw byte data.
1111

0 commit comments

Comments
 (0)