Skip to content

Commit b18ca26

Browse files
sameerkhan001sameerkhan001
committed
999358-hotfix: Added some topics.
1 parent dd04a09 commit b18ca26

File tree

2 files changed

+420
-150
lines changed

2 files changed

+420
-150
lines changed

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

Lines changed: 295 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -306,7 +306,301 @@ document.destroy();
306306
{% endhighlight %}
307307
{% endtabs %}
308308

309-
## Retrieve the Signed Date of a PDF Signature
309+
## Create and certify a digital signature field
310+
311+
This example demonstrates how to add a signature field to a PDF, create a digital signature using certificate data and a password, certify the document, and save the signed PDF document.
312+
313+
{% tabs %}
314+
{% highlight typescript tabtitle="TypeScript" %}
315+
import { PdfDocument, PdfPage, PdfSignatureField, PdfSignature } from '@syncfusion/ej2-pdf';
316+
317+
// Create a new PDF document
318+
const document = new PdfDocument();
319+
// Add a new page to the document
320+
const page: PdfPage = document.addPage();
321+
// Create a signature field on the page at specified coordinates
322+
const field: PdfSignatureField = new PdfSignatureField(page, 'field', { x: 50, y: 50, width: 100, height: 100 });
323+
// Create a digital signature using certificate data and password, enabling certification
324+
const signature: PdfSignature = PdfSignature.create(certData, password, { certify: true });
325+
// Assign the signature to the signature field
326+
field.setSignature(signature);
327+
// Add the signature field to the document form
328+
document.form.add(field);
329+
// Save the document
330+
document.save('Output.pdf');
331+
// Release resources used by the document
332+
document.destroy();
333+
334+
{% endhighlight %}
335+
{% highlight javascript tabtitle="JavaScript" %}
336+
337+
// Create a new PDF document
338+
var document = new ej.pdf.PdfDocument();
339+
// Add a new page to the document
340+
var page = document.addPage();
341+
// Create a signature field on the page at specified coordinates
342+
var field = new ej.pdf.PdfSignatureField(page, 'field', { x: 50, y: 50, width: 100, height: 100 });
343+
// Create a digital signature using certificate data and password, enabling certification
344+
var signature = ej.pdf.PdfSignature.create(certData, password, { certify: true });
345+
// Assign the signature to the signature field
346+
field.setSignature(signature);
347+
//// Add the signature field to the document form
348+
document.form.add(field);
349+
// Save the document
350+
document.save('Output.pdf');
351+
// Release resources used by the document
352+
document.destroy();
353+
354+
{% endhighlight %}
355+
{% endtabs %}
356+
357+
## Create and lock a digitally signed PDF
358+
359+
This example shows how to add a signature field to a PDF, create a digital signature using certificate data and a password, lock the document after signing, and save the result in PDF library.
360+
361+
{% tabs %}
362+
{% highlight typescript tabtitle="TypeScript" %}
363+
import { PdfDocument, PdfPage, PdfSignatureField, PdfSignature } from '@syncfusion/ej2-pdf';
364+
365+
// Create a new PDF document
366+
const document = new PdfDocument();
367+
// Add a new page to the document
368+
const page: PdfPage = document.addPage();
369+
// Create a signature field on the page at specified coordinates
370+
const field = new PdfSignatureField(page, 'field', { x: 50, y: 50, width: 100, height: 100 });
371+
// Create a digital signature using certificate data and password, locking the document after signing
372+
const signature: PdfSignature = PdfSignature.create(certData, password, { isLocked: true });
373+
// Assign the signature to the signature field
374+
field.setSignature(signature);
375+
// Add the signature field to the document form
376+
document.form.add(field);
377+
// Save the document
378+
document.save('Output.pdf');
379+
// Release resources used by the document
380+
document.destroy();
381+
382+
{% endhighlight %}
383+
{% highlight javascript tabtitle="JavaScript" %}
384+
385+
// Create a new PDF document
386+
var document = new ej.pdf.PdfDocument();
387+
// Add a new page to the document
388+
var page = document.addPage();
389+
// Create a signature field on the page at specified coordinates
390+
var field = new ej.pdf.PdfSignatureField(page, 'field', { x: 50, y: 50, width: 100, height: 100 });
391+
// Create a digital signature using certificate data and password, locking the document after signing
392+
var signature = ej.pdf.PdfSignature.create(certData, password, { isLocked: true });
393+
// Assign// Assign the signature to the signature field
394+
field.setSignature(signature);
395+
// Add the signature field to the document form
396+
document.form.add(field);
397+
// Save the document
398+
document.save('Output.pdf');
399+
// Release resources used by the document
400+
document.destroy();
401+
402+
{% endhighlight %}
403+
{% endtabs %}
404+
405+
## Adding multiple signatures to a PDF
406+
407+
This example demonstrates how to add two visible signature fields to a PDF, apply a certifying signature to the first field (allowing form filling), then reopen the document and apply a second signature with forbid changes permissions.
408+
409+
{% tabs %}
410+
{% highlight typescript tabtitle="TypeScript" %}
411+
412+
import { PdfDocument, PdfPage, PdfSignatureField, PdfSignature, CryptographicStandard, DigestAlgorithm, PdfCertificationFlags } from '@syncfusion/ej2-pdf';
413+
414+
// Create a new PDF document
415+
let document: PdfDocument = new PdfDocument();
416+
// Add a new page to the document
417+
let page: PdfPage = document.addPage();
418+
// Add the first visible signature field
419+
let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', { x: 50, y: 50, width: 100, height: 100 });
420+
// Add the second visible signature field
421+
let field2: PdfSignatureField = new PdfSignatureField(page, 'Signature1', { x: 250, y: 50, width: 100, height: 100 });
422+
// Create a certifying signature
423+
let signature: PdfSignature = PdfSignature.create(
424+
certData,
425+
password,
426+
{
427+
cryptographicStandard: CryptographicStandard.cms,
428+
digestAlgorithm: DigestAlgorithm.sha256,
429+
reason: 'I am author of this document.',
430+
certify: true,
431+
documentPermissions: PdfCertificationFlags.allowFormFill
432+
},
433+
);
434+
// Bind the certifying signature to the first signature field
435+
field.setSignature(signature);
436+
// Add the first signature field
437+
document.form.add(field);
438+
// Add the second signature field
439+
document.form.add(field2);
440+
// Save the current state to a Uint8Array
441+
let data: Uint8Array = document.save();
442+
// Dispose of the first document
443+
document.destroy();
444+
// Reopen the saved bytes as a new PdfDocument
445+
let ldocument: PdfDocument = new PdfDocument(data);
446+
// Retrieve the second signature field by index
447+
field = ldocument.form.fieldAt(1) as PdfSignatureField;
448+
// Create the second signature
449+
signature = PdfSignature.create(
450+
certData,
451+
password,
452+
{
453+
cryptographicStandard: CryptographicStandard.cms,
454+
digestAlgorithm: DigestAlgorithm.sha256,
455+
certify: true,
456+
documentPermissions: PdfCertificationFlags.forbidChanges
457+
},
458+
);
459+
// Bind the signature to the second field
460+
field.setSignature(signature);
461+
// Save the document
462+
ldocument.save('Output.pdf');
463+
// Dispose of the document
464+
ldocument.destroy();
465+
466+
{% endhighlight %}
467+
{% highlight javascript tabtitle="JavaScript" %}
468+
469+
// Create a new PDF document
470+
var document = new ej.pdf.PdfDocument();
471+
// Add a new page to the document
472+
var page = document.addPage();
473+
// Add the first visible signature field
474+
var field = new ej.pdf.PdfSignatureField(page, 'Signature', { x: 50, y: 50, width: 100, height: 100 });
475+
// Add the second visible signature field
476+
var field2 = new ej.pdf.PdfSignatureField(page, 'Signature1', { x: 250, y: 50, width: 100, height: 100 });
477+
// Create a certifying signature (CMS + SHA-256), allowing form fill
478+
var signature = ej.pdf.PdfSignature.create(
479+
certData,
480+
password,
481+
{
482+
cryptographicStandard: ej.pdf.CryptographicStandard.cms,
483+
digestAlgorithm: ej.pdf.DigestAlgorithm.sha256,
484+
reason: 'I am author of this document.',
485+
certify: true,
486+
documentPermissions: ej.pdf.PdfCertificationFlags.allowFormFill
487+
}
488+
);
489+
// Bind the certifying signature to the first signature field
490+
field.setSignature(signature);
491+
//// Add both signature fields to the document form
492+
document.form.add(field);
493+
document.form.add(field2);
494+
// Save the current state to a Uint8Array
495+
var data = document.save();
496+
// Dispose of the first document
497+
document.destroy();
498+
// Reopen the saved bytes as a new PdfDocument
499+
var ldocument = new ej.pdf.PdfDocument(data);
500+
// Retrieve the second signature field by index (0-based; index 1 = the second field)
501+
field = ldocument.form.fieldAt(1);
502+
// Create the second signature (certify with forbid changes)
503+
signature = ej.pdf.PdfSignature.create(
504+
certData,
505+
password,
506+
{
507+
cryptographicStandard: ej.pdf.CryptographicStandard.cms,
508+
digestAlgorithm: ej.pdf.DigestAlgorithm.sha256,
509+
certify: true,
510+
documentPermissions: ej.pdf.PdfCertificationFlags.forbidChanges
511+
}
512+
);
513+
// Bind the signature to the second field
514+
field.setSignature(signature);
515+
// Save the document
516+
ldocument.save('Output.pdf');
517+
// Dispose of the document
518+
ldocument.destroy();
519+
520+
{% endhighlight %}
521+
{% endtabs %}
522+
523+
## Drawing text/image in the Signature Appearance
524+
525+
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.
526+
527+
{% tabs %}
528+
{% highlight typescript tabtitle="TypeScript" %}
529+
import { PdfDocument, PdfPage, PdfSignatureField, PdfSignature, CryptographicStandard, DigestAlgorithm, PdfGraphics, PdfImage, PdfBitmap } from '@syncfusion/ej2-pdf';
530+
531+
// Create a new PDF document
532+
let document: PdfDocument = new PdfDocument();
533+
// Add a new page to the document
534+
let page = document.addPage();
535+
// Create a visible signature field at (50, 50) sized 100x100
536+
let field: PdfSignatureField = new PdfSignatureField(page, 'field', { x: 50, y: 50, width: 100, height: 100 });
537+
// Create a digital signature with CMS + SHA-256
538+
const signature: PdfSignature = PdfSignature.create(
539+
certData,
540+
password,
541+
{
542+
cryptographicStandard: CryptographicStandard.cms,
543+
digestAlgorithm: DigestAlgorithm.sha256,
544+
contactInfo: 'johndoe@owned.us',
545+
locationInfo: 'Honolulu, Hawaii',
546+
reason: 'I am author of this document.'
547+
},
548+
);
549+
// Get the normal appearance graphics for the signature field
550+
let graphics: PdfGraphics = field.getAppearance().normal.graphics;
551+
// Create an image from a base64-encoded bitmap (placeholder content shown)
552+
let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z');
553+
// Draw the image to fill the signature widget (100x100)
554+
graphics.drawImage(image, { x: 0, y: 0, width: 100, height: 100 });
555+
// Register the signature field
556+
document.form.add(field);
557+
// Apply the signature to the field
558+
field.setSignature(signature);
559+
// Save the Document
560+
document.save('Output.pdf');
561+
// Release document resources
562+
document.destroy();
563+
564+
{% endhighlight %}
565+
{% highlight javascript tabtitle="JavaScript" %}
566+
567+
// Create a new PDF document
568+
var document = new ej.pdf.PdfDocument();
569+
// Add a new page to the document
570+
var page = document.addPage();
571+
// Create a visible signature field at (50, 50) sized 100x100
572+
var field = new ej.pdf.PdfSignatureField(page, 'field', { x: 50, y: 50, width: 100, height: 100 });
573+
// Create a digital signature with CMS + SHA-256 and signer info
574+
var signature = ej.pdf.PdfSignature.create(
575+
certData,
576+
password,
577+
{
578+
cryptographicStandard: ej.pdf.CryptographicStandard.cms,
579+
digestAlgorithm: ej.pdf.DigestAlgorithm.sha256,
580+
contactInfo: 'johndoe@owned.us',
581+
locationInfo: 'Honolulu, Hawaii',
582+
reason: 'I am author of this document.'
583+
}
584+
);
585+
// Get the normal appearance graphics for the signature field
586+
var graphics = field.getAppearance().normal.graphics;
587+
// Create an image from a base64-encoded bitmap (placeholder content shown)
588+
var image = new ej.pdf.PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z');
589+
// Draw the image to fill// Draw the image to fill the signature widget (100x100)
590+
graphics.drawImage(image, { x: 0, y: 0, width: 100, height: 100 });
591+
// Register the signature field with the document form
592+
document.form.add(field);
593+
// Apply the signature to the field
594+
field.setSignature(signature);
595+
// Save the document
596+
document.save('Output.pdf');
597+
// Release document resources
598+
document.destroy();
599+
600+
{% endhighlight %}
601+
{% endtabs %}
602+
603+
## Retrieve the signed date of a PDF signature
310604

311605
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.
312606

0 commit comments

Comments
 (0)