Skip to content

DOCINFRA-2341_merged_using_automation #2378

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SyncfusionBuild merged 2 commits into from
Mar 6, 2026
Merged

DOCINFRA-2341_merged_using_automation #2378

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3435f41
1010299: feature removed
Gowrishankar-kumar Mar 6, 2026
124c2f3
Merge pull request #2373 from syncfusion-content/1010299-JS-hotfix
SF2381 Mar 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 0 additions & 64 deletions Document-Processing/PDF/PDF-Library/javascript/FormFields.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -851,70 +851,6 @@ document. Destroy();
{% endhighlight %}
{% endtabs %}

## Add a date field to a PDF form

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.

{% tabs %}
{% highlight typescript tabtitle="TypeScript" %}
import {PdfDocument, pdfPage, PdfForm, PdfTextBoxField, PdfJavaScriptAction } from '@syncfusion/ej2-pdf';

// Create a new PDF document
let document: PdfDocument = new PdfDocument();
// Add a new page to the document
let page: pdfPage = document.addPage();
// Access loaded form
let form: PdfForm = document.form;
// Create a new text box field
const field: PdfTextBoxField = new PdfTextBoxField(page, 'DateField', {
x: 50, y: 200, width: 150, height: 20,
});
// Sets the text value to text box field
field.text = '18/08/2003';
// Sets date formate
const format: string = 'yyyy-mm-dd';
// Add a JavaScript action to run custom scripts or validations
field.actions.format = new PdfJavaScriptAction(`AFDate_FormatEx("${format}");`);
field.actions.keyPressed = new PdfJavaScriptAction(`AFDate_KeystrokeEx("${format}"):`);
field.actions.validate = new PdfJavaScriptAction(`AFDate_Validate("${format}");`);
// Add a new form field
form.add(field);
// Save the document
document.save('output.pdf');
// Destroy the document
document. Destroy();

{% endhighlight %}
{% highlight javascript tabtitle="JavaScript" %}

// Create a new PDF document instance
var document = new ej.pdf.PdfDocument();
// Add a new page to the document
var page = document.addPage();
// Access loaded form
var form = document.form;
// Create a new text box field
const field = new ej.pdf.PdfTextBoxField(page, 'fieldF', {
x: 50, y: 200, width: 150, height: 20
});
// Sets the text value to text box field
field.text = '18/08/2003';
// Sets date formate
const format = 'yyyy-mm-dd';
// Add a JavaScript action to run custom scripts or validations
field.actions.format = new ej.pdf.PdfJavaScriptAction(`AFDate_FormatEx("${format}");`);
field.actions.keyPressed = new ej.pdf.PdfJavaScriptAction(`AFDate_KeystrokeEx("${format}"):`);
field.actions.validate = new ej.pdf.PdfJavaScriptAction(`AFDate_Validate("${format}");`);
// Add a new form field
form.add(field);
// Save the document
document.save('Output.pdf');
// Destroy the document
document. Destroy();

{% endhighlight %}
{% endtabs %}

## Field Auto Naming

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.
Expand Down
55 changes: 0 additions & 55 deletions Document-Processing/PDF/PDF-Library/javascript/Text.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -406,60 +406,5 @@ document.save('Output.pdf');
// Close the document
document.destroy();

{% endhighlight %}
{% endtabs %}

## Embedded font

This example shows how to embed fonts using `PdfDocument.embedFont()` method to ensure consistent text rendering across all platforms. The library supports embedding `PdfStandardFont`, `PdfCjkStandardFont`, and `PdfTrueTypeFont` for reliable Unicode text display. After embedding, the font can be applied through `PdfFont.getFont()` method, allowing precise control over size and style. Additionally, using embedded fonts helps reduce overall PDF size, since the font dictionary is not duplicated for each usage—ensuring cleaner and more efficient output.

{% tabs %}
{% highlight typescript tabtitle="TypeScript" %}
import { PdfDocument, PdfPage, PdfFont, PdfStandardFont, PdfCjkStandardFont, PdfFontFamily, PdfFontStyle, PdfCjkFontFamily, PdfBrush } from '@syncfusion/ej2-pdf';

// Create a new PDF document
let document: PdfDocument = new PdfDocument();
// Add a page
let page: PdfPage = document.addPage();
// Embed a standard font into the PDF document.
const embedded1: PdfStandardFont = document.embedFont(PdfFontFamily.timesRoman, 12, PdfFontStyle.regular);
// Gets a font variant from the base font with the given size and style
const embedded2: PdfFont = embedded1.getFont(14, PdfFontStyle.bold);
const embedded3: PdfFont = embedded1.getFont(14, PdfFontStyle.italic);
// Embed a CJK font into the PDF document.
const embedded4: PdfCjkStandardFont = document.embedFont(PdfCjkFontFamily.hanyangSystemsGothicMedium, 12, PdfFontStyle.regular , true);
// Draw string using embed font.
page.graphics.drawString('timesRoman with regular', embedded1, {x: 10, y: 10, width: 300, height: 24}, new PdfBrush({r: 0, g: 0, b: 255}));
page.graphics.drawString('timesRoman with bold', embedded2, {x: 10, y: 50, width: 300, height: 24}, new PdfBrush({r: 0, g: 0, b: 255}));
page.graphics.drawString('timesRoman with italic', embedded3, {x: 200, y: 50, width: 300, height: 24}, new PdfBrush({r: 0, g: 0, b: 255}));
page.graphics.drawString('Cjkfont with regular', embedded4, {x: 200, y: 10, width: 300, height: 24}, new PdfBrush({r: 0, g: 0, b: 255}));
// 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 new ej.pdf.PdfDocument();
// Add a page
var page = document.addPage();
// Embed a font into the PDF document.
const embedded1 = document.embedFont(new ej.pdf.PdfFontFamily.timesRoman, 12, new ej.pdf.PdfFontStyle.regular);
const embedded2 = document.embedFont(new ej.pdf.PdfCjkFontFamily.hanyangSystemsGothicMedium, 12, new ej.pdf.PdfFontStyle.regular , true);
// Gets a font variant from the base font with the given size and style
const embedded3 = embedded1.getFont(14, new ej.pdf.PdfFontStyle.bold);
const embedded4 = embedded4.getFont(14, new ej.pdf.PdfFontStyle.bold);
// Draw string using embed font.
page.graphics.drawString('timesRoman with regular', embedded1, {x: 10, y: 10, width: 300, height: 24}, new ej.pdf.PdfBrush({r: 0, g: 0, b: 255}));
page.graphics.drawString('timesRoman with bold', embedded3, {x: 10, y: 50, width: 300, height: 24}, new ej.pdf.PdfBrush({r: 0, g: 0, b: 255}));
page.graphics.drawString('Cjkfont with regular', embedded2, {x: 200, y: 10, width: 300, height: 24}, new ej.pdf.PdfBrush({r: 0, g: 0, b: 255}));
page.graphics.drawString('Cjkfont with bold', embedded4, {x: 200, y: 50, width: 300, height: 24}, new ej.pdf.PdfBrush({r: 0, g: 0, b: 255}));
// Save the document
document.save('Output.pdf');
// Close the document
document.destroy();

{% endhighlight %}
{% endtabs %}