Merge pull request #2375 from syncfusion-content/1010299-JS-Update

1010299: JavaScript PDF Library Features adding on UG documentations

Author: SF2381

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

@@ -521,6 +521,69 @@ ldocument.destroy();
 {% endhighlight %}
 {% endtabs %}
 
+## Adding a timestamp in digital signature
+
+This example shows how to apply a digital signature with a trusted timestamp, ensuring the signature remains valid even after the certificate expires. A timestamp callback contacts a Time Stamping Authority (TSA) to add an official time record to the signature. This provides long‑term proof of when the document was signed.
+
+{% tabs %}
+{% highlight typescript tabtitle="TypeScript" %}
+
+import { PdfDocument, PdfPage, PdfForm, PdfSignatureField, PdfSignature, CryptographicStandard, DigestAlgorithm } from '@syncfusion/ej2-pdf';
+
+// Load the document
+let document: PdfDocument = new PdfDocument(data);
+// Gets the first page of the document
+let page: PdfPage = document.getPage(0);
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new signature field
+let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', {x: 10, y: 10, width: 100, height: 50});
+// Create a timestamp callback
+async function timestampCallback(request: Uint8Array): Promise<{ response: Uint8Array }> {
+    // Implement timestamp response logic here
+    return { response: new Uint8Array() }; // Placeholder return
+}
+// Create a new signature using PFX data, private key and call back function for timestamp
+const signature: PdfSignature = PdfSignature.create(certData, password, { cryptographicStandard: CryptographicStandard.cms, digestAlgorithm: DigestAlgorithm.sha256 }, timestampCallback);
+// Sets the signature to the field
+field.setSignature(signature);
+// Add the field into PDF form
+form.add(field);
+// Save the document
+await document.saveAsync('output.pdf');
+// Destroy the document
+document.destroy();
+
+{% endhighlight %}
+{% highlight javascript tabtitle="JavaScript" %}
+
+// Load the document
+var document = new ej.pdf.PdfDocument(data);
+// Gets 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 timestamp callback
+async function timestampCallback(request) {
+    // Implement timestamp response logic here
+    return { response: new Uint8Array() }; // Placeholder return
+}
+// Create a new signature using PFX data, private key and call back function for timestamp
+const signature = PdfSignature.create(certData, password, { cryptographicStandard: ej.pdf.CryptographicStandard.cms, digestAlgorithm: ej.pdf.DigestAlgorithm.sha256 }, timestampCallback);
+// Sets the signature to the field
+field.setSignature(signature);
+// Add the field into PDF form
+form.add(field);
+// Save the document
+await document.saveAsync('output.pdf');
+// Destroy the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
 ## Drawing text/image in the Signature Appearance
 
 This example demonstrates how to create a visible signature field, apply a CMS (SHA-256) digital signature with signer information, customize the signature appearance using a base64-encoded image, and save the signed PDF document.

Document-Processing/PDF/PDF-Library/javascript/Redaction.md

@@ -18,7 +18,7 @@ Redaction permanently removes confidential or sensitive information from a PDF.
 {% tabs %}
 {% highlight typescript tabtitle="TypeScript" %}
 import { PdfDocument } from '@syncfusion/ej2-pdf';
-import { PdfRedactor, PdfRedactionRegion } from '@syncfusion/ej2-pdf-data-extract';
+import { PdfRedactor, PdfRedactionRegion, ApplicationPlatform } from '@syncfusion/ej2-pdf-data-extract';
 
 // Load the document
 let document: PdfDocument = new PdfDocument(data);
@@ -28,15 +28,21 @@ let redactor: PdfRedactor = new PdfRedactor(document);
 let redactions: PdfRedactionRegion[] = [];
 redactions.push(new PdfRedactionRegion(0, {x: 10, y: 10, width: 100, height: 50}));
 redactor.add(redactions);
+// Define a canvas render callback that returns a canvas element and the application platform.
+const canvasRenderCallback = (): {canvas: any, applicationPlatform: ApplicationPlatform} => {
+    const canvas = document.createElement('canvas');
+    return { canvas: canvas, applicationPlatform: ApplicationPlatform.typescript };
+};
 // Apply redactions on the PDF document
-redactor.redact();
+await redactor.redact(callBack: canvasRenderCallback);
 // Save the document
 document.save('output.pdf');
 // Destroy the document
 document.destroy();
 
 {% endhighlight %}
 {% highlight javascript tabtitle="JavaScript" %}
+
 // Load the document
 var document = new ej.pdf.PdfDocument(data);
 // Create a new text extractor
@@ -45,23 +51,30 @@ var redactor = new ej.pdfdataextract.PdfRedactor(document);
 var redactions = [];
 redactions.push(new PdfRedactionRegion(0, {x: 10, y: 10, width: 100, height: 50}));
 redactor.add(redactions);
+// Define a canvas render callback that returns a canvas element and the application platform.
+const canvasRenderCallback = (): {canvas, applicationPlatform} => {
+    const canvas = document.createElement('canvas');
+    return { canvas: canvas, applicationPlatform: ej.pdf.ApplicationPlatform.typescript };
+};
 // Apply redactions on the PDF document
-redactor.redact();
+await redactor.redact(canvasRenderCallback);
 // Save the document
 document.save('output.pdf');
 // Destroy the document
 document.destroy();
 {% endhighlight %}
 {% endtabs %}
 
+N>  Use PdfRedactor.redact(callback) when you need to redact images along with other PDF content. In contrast, PdfRedactor.redactSync() is faster because it runs synchronously, but it cannot redact images—only text and other non‑image elements.
+
 ## 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 typescript tabtitle="TypeScript" %}
 import { PdfDocument } from '@syncfusion/ej2-pdf';
-import { PdfRedactor, PdfRedactionRegion} from '@syncfusion/ej2-pdf-data-extract';
+import { PdfRedactor, PdfRedactionRegion, ApplicationPlatform } from '@syncfusion/ej2-pdf-data-extract';
 
 // Load an existing PDF document
 let document: PdfDocument = new PdfDocument(data);
@@ -76,14 +89,21 @@ redaction.fillColor = {r: 255, g: 0, b: 0};
 redactions.push(redaction);
 // Add redactions with specified options.
 redactor.add(redactions);
+// Define a canvas render callback that returns a canvas element and the application platform.
+const canvasRenderCallback = (): {canvas: any, applicationPlatform: ApplicationPlatform} => {
+    const canvas = document.createElement('canvas');
+    return { canvas: canvas, applicationPlatform: ApplicationPlatform.typescript };
+};
 // Apply redactions on the PDF document
-redactor.redact();
+await redactor.redact(callBack: canvasRenderCallback);
 // 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);
 // Add redactions to the collection
@@ -97,8 +117,13 @@ redaction.fillColor = {r: 255, g: 0, b: 0};
 redactions.push(redaction);
 // Add redactions with specified options.
 redactor.add(redactions);
+// Define a canvas render callback that returns a canvas element and the application platform.
+const canvasRenderCallback = (): {canvas, applicationPlatform} => {
+    const canvas = document.createElement('canvas');
+    return { canvas: canvas, applicationPlatform: ej.pdf.ApplicationPlatform.typescript };
+};
 // Apply redactions on the PDF document
-redactor.redact();
+await redactor.redact(canvasRenderCallback);
 // Save the document
 document.save('output.pdf');
 // Destroy the document
@@ -113,7 +138,7 @@ Customize the redacted region by drawing text or graphics over it, using `PdfRed
 {% tabs %}
 {% highlight typescript tabtitle="TypeScript" %}
 import { PdfDocument } from '@syncfusion/ej2-pdf';
-import { PdfRedactor, PdfRedactionRegion } from '@syncfusion/ej2-pdf-data-extract';
+import { PdfRedactor, PdfRedactionRegion, ApplicationPlatform } from '@syncfusion/ej2-pdf-data-extract';
 
 // Load an existing PDF document
 let document = new PdfDocument(data);
@@ -136,8 +161,13 @@ redactions.push(redaction);
 let redactor = new PdfRedactor(document);
 // Add redactions with specified options
 redactor.add(redactions);
+// Define a canvas render callback that returns a canvas element and the application platform.
+const canvasRenderCallback = (): {canvas: any, applicationPlatform: ApplicationPlatform} => {
+    const canvas = document.createElement('canvas');
+    return { canvas: canvas, applicationPlatform: ApplicationPlatform.typescript };
+};
 // Apply redactions on the PDF document
-redactor.redact();
+await redactor.redact(callBack: canvasRenderCallback);
 // Save the document
 document.save('output.pdf');
 // Destroy the document
@@ -166,9 +196,15 @@ redaction = new ej.pdf.PdfRedactionRegion(0, {  x: 40, y: 43, width: 80, height:
 redactions.push(redaction);
 // Initialize redactor
 var redactor = new ej.pdf.PdfRedactor(document);
-// Add redactions and apply them
+// Add redactions with specified options
 redactor.add(redactions);
-redactor.redact();
+// Define a canvas render callback that returns a canvas element and the application platform.
+const canvasRenderCallback = (): {canvas, applicationPlatform} => {
+    const canvas = document.createElement('canvas');
+    return { canvas: canvas, applicationPlatform: ej.pdf.ApplicationPlatform.typescript };
+};
+// Apply redactions on the PDF document
+await redactor.redact(canvasRenderCallback);
 // Save and dispose
 document.save('output.pdf');
 document.destroy();