diff --git a/javascript/pdf-add-annotations/README.md b/javascript/pdf-add-annotations/README.md
new file mode 100644
index 0000000..31d03ee
--- /dev/null
+++ b/javascript/pdf-add-annotations/README.md
@@ -0,0 +1,22 @@
+# How to Add Annotation in PDF in JavaScript
+
+This project is a complete working application to add annotations in PDF using JavaScript.
+
+## Getting Started
+
+To get started you need to clone the `pdf-add-annotations` repository.
+
+```
+git clone https://github.com/SyncfusionExamples/javascript-pdf-examples.git
+```
+
+## Running
+
+You can run the application by simply opening the `index.html` file in any web browser.
+
+## Resources
+
+You can also refer the below resources to know more details about Javascript PDF Library.
+
+* [JavaScript PDF Library Demos](https://document.syncfusion.com/demos/pdf/javascript-es5/#/tailwind3/pdf/default.html)
+* [JavaScript PDF Library Documentation](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/overview)
diff --git a/javascript/pdf-add-annotations/index.html b/javascript/pdf-add-annotations/index.html
new file mode 100644
index 0000000..3fb7f7b
--- /dev/null
+++ b/javascript/pdf-add-annotations/index.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
Add Annotations in PDF
+
+
+
+
\ No newline at end of file
diff --git a/javascript/pdf-add-layers/index.html b/javascript/pdf-add-layers/index.html
index 4504c30..6d917ed 100644
--- a/javascript/pdf-add-layers/index.html
+++ b/javascript/pdf-add-layers/index.html
@@ -1,6 +1,7 @@
-
+
+
Add Layers
@@ -9,7 +10,7 @@
Add Layers
+
+
Get Bookmark Page Index from PDF
@@ -9,7 +10,7 @@
Get Bookmark Page Index from PDF
+
+
Add and Remove Bookmarks
@@ -10,7 +11,7 @@
Add and Remove Bookmarks
+
+
@@ -10,7 +11,7 @@
Digital signature
+
+
+
+
Draw Text
+
+
+
+
\ No newline at end of file
diff --git a/javascript/pdf-export-annotations/index.html b/javascript/pdf-export-annotations/index.html
index 436e31d..fffa30d 100644
--- a/javascript/pdf-export-annotations/index.html
+++ b/javascript/pdf-export-annotations/index.html
@@ -1,6 +1,7 @@
-
+
+
Export Annotations from PDF
@@ -9,7 +10,7 @@
Export Annotations from PDF
+
+
Extract Image from PDF document
@@ -10,7 +11,7 @@
Extract Image from PDF document
+
+
Extract Text from PDF document
@@ -10,7 +11,7 @@
Extract Text from PDF document
+
+
@@ -12,7 +13,7 @@
PDF Forms
+
+
+
+
Flow Text
+
+
+
+
\ No newline at end of file
diff --git a/javascript/pdf-form-fillings/index.html b/javascript/pdf-form-fillings/index.html
index 4ab68b4..57614bc 100644
--- a/javascript/pdf-form-fillings/index.html
+++ b/javascript/pdf-form-fillings/index.html
@@ -1,6 +1,7 @@
-
+
+
@@ -12,7 +13,7 @@
PDF Forms
+
+
+
+
Header And Footer
+
+
+
+
\ No newline at end of file
diff --git a/javascript/pdf-import-page/index.html b/javascript/pdf-import-page/index.html
index 7c41d2b..d8a871b 100644
--- a/javascript/pdf-import-page/index.html
+++ b/javascript/pdf-import-page/index.html
@@ -1,6 +1,7 @@
-
+
+
Importing Pages
@@ -8,7 +9,7 @@
Importing Pages
+
+
@@ -10,7 +11,7 @@
Add Ordered and Unordered lists into PDF document
+
+
Merge Multiple PDFs into One File
@@ -8,27 +9,35 @@
Merge Multiple PDFs into One File
+
+
Modify Annotations in PDF
@@ -9,7 +10,7 @@
Modify Annotations in PDF
+
+
@@ -12,28 +13,58 @@
Modify PDF Forms
+
+
Redact Data in PDF document
@@ -8,7 +9,7 @@
Redact Data in PDF document
+
+
Remove Annotations from PDF
@@ -9,7 +10,7 @@
Remove Annotations from PDF
+
+
Remove Bookmark Using Index from PDF
@@ -9,7 +10,7 @@
Remove Bookmark Using Index from PDF
+
+
Remove Layers
@@ -9,7 +10,7 @@
Remove Layers
+
+
Split PDF
@@ -10,7 +11,7 @@
Split PDF
+
+
+
+
Create Stamp Annotations in PDF
+
+
+
+
\ No newline at end of file
diff --git a/javascript/pdf-unicode-text/README.md b/javascript/pdf-unicode-text/README.md
new file mode 100644
index 0000000..2edc5a3
--- /dev/null
+++ b/javascript/pdf-unicode-text/README.md
@@ -0,0 +1,22 @@
+# How to Render Unicode Text in PDF in JavaScript
+
+This project is a complete working application to render unicode text in a PDF document using JavaScript.
+
+## Getting Started
+
+To get started you need to clone the `pdf-draw-text` repository.
+
+```
+git clone https://github.com/SyncfusionExamples/javascript-pdf-examples.git
+```
+
+## Running
+
+You can run the application by simply opening the `index.html` file in any web browser.
+
+## Resources
+
+You can also refer the below resources to know more details about Javascript PDF Library.
+
+* [JavaScript PDF Library Demos](https://document.syncfusion.com/demos/pdf/javascript-es5/#/tailwind3/pdf/default.html)
+* [JavaScript PDF Library Documentation](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/overview)
diff --git a/javascript/pdf-unicode-text/index.html b/javascript/pdf-unicode-text/index.html
new file mode 100644
index 0000000..732ed01
--- /dev/null
+++ b/javascript/pdf-unicode-text/index.html
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
Render Unicode Text
+
+
+
+
\ No newline at end of file
diff --git a/typescript/pdf-add-annotations/.github/workflows/gitleaks.yaml b/typescript/pdf-add-annotations/.github/workflows/gitleaks.yaml
new file mode 100644
index 0000000..9ae62e1
--- /dev/null
+++ b/typescript/pdf-add-annotations/.github/workflows/gitleaks.yaml
@@ -0,0 +1,44 @@
+name: Secret Value found!!
+on:
+ push:
+ public:
+jobs:
+ scan:
+ name: gitleaks
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v4.2.2
+ - name: Install the gitleaks
+ run: wget https://github.com/zricethezav/gitleaks/releases/download/v8.15.2/gitleaks_8.15.2_linux_x64.tar.gz
+ shell: pwsh
+ - name: Extract the tar file
+ run: tar xzvf gitleaks_8.15.2_linux_x64.tar.gz
+ - name: Generate the report
+ id: gitleaks
+ run: $GITHUB_WORKSPACE/gitleaks detect -s $GITHUB_WORKSPACE -f json -r $GITHUB_WORKSPACE/leaksreport.json
+ shell: bash
+ continue-on-error: true
+ - name: Setup NuGet.exe
+ if: steps.gitleaks.outcome != 'success'
+ uses: nuget/setup-nuget@v2
+ with:
+ nuget-version: latest
+ - name: Install Mono
+ if: steps.gitleaks.outcome != 'success'
+ run: |
+ sudo apt update
+ sudo apt install -y mono-complete
+ - name: Install the dotnet SDK to a custom directory
+ if: steps.gitleaks.outcome != 'success'
+ run: |
+ mkdir -p $GITHUB_WORKSPACE/dotnet
+ curl -sSL https://dot.net/v1/dotnet-install.sh | bash /dev/stdin --install-dir $GITHUB_WORKSPACE/dotnet --channel 6.0
+ - name: Install the report tool packages
+ if: steps.gitleaks.outcome != 'success'
+ run: |
+ export PATH=$GITHUB_WORKSPACE/dotnet:$PATH
+ nuget install "Syncfusion.Email" -source ${{ secrets.NexusFeedLink }} -ExcludeVersion
+ dir $GITHUB_WORKSPACE/Syncfusion.Email/lib/net6.0
+ dotnet $GITHUB_WORKSPACE/Syncfusion.Email/lib/net6.0/GitleaksReportMail.dll ${{ secrets.CITEAMCREDENTIALS }} "$GITHUB_REF_NAME" ${{ secrets.NETWORKCREDENTIALS }} ${{ secrets.NETWORKKEY }} "$GITHUB_WORKSPACE" ${{ secrets.ORGANIZATIONNAME }}
+ exit 1
\ No newline at end of file
diff --git a/typescript/pdf-add-annotations/.gitignore b/typescript/pdf-add-annotations/.gitignore
new file mode 100644
index 0000000..1eae0cf
--- /dev/null
+++ b/typescript/pdf-add-annotations/.gitignore
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/typescript/pdf-add-annotations/README.md b/typescript/pdf-add-annotations/README.md
new file mode 100644
index 0000000..b7fdc3a
--- /dev/null
+++ b/typescript/pdf-add-annotations/README.md
@@ -0,0 +1,43 @@
+# How to Add Annotations in PDF in TypeScript
+
+This project is a complete working application to add annotations in PDF using TypeScript.
+
+## Getting Started
+
+To get started you need to clone the `pdf-add-annotations` repository and navigate to `pdf-add-annotations` location.
+
+```
+git clone https://github.com/SyncfusionExamples/javascript-pdf-examples.git pdf-add-annotations
+cd pdf-add-annotations
+```
+
+## Installing
+
+We can get all the Essential JS 2 components in a single npm package [`ej2`](https://www.npmjs.com/package/@syncfusion/ej2).
+
+We already configure the required packages in the `package.json` file.
+
+You can run the below command to install all dependent packages related to this seed project.
+
+```
+npm install @syncfusion/ej2-pdf
+```
+
+## Running
+
+The application is configured with [webpack-dev-server](https://webpack.js.org/configuration/dev-server/#devserver), so it will serve the web application in your default browser.
+
+We have used [Webpack](https://github.com/webpack/webpack) for module loading.
+
+You can use the below npm script to run the web application.
+
+```
+npm run start
+```
+
+## Resources
+
+You can also refer the below resources to know more details about Javascript PDF Library.
+
+* [JavaScript PDF Library Demos](https://document.syncfusion.com/demos/pdf/javascript/#/tailwind3/pdf/default.html)
+* [JavaScript PDF Library Documentation](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/overview)
\ No newline at end of file
diff --git a/typescript/pdf-add-annotations/e2e/index.spec.js b/typescript/pdf-add-annotations/e2e/index.spec.js
new file mode 100644
index 0000000..e69de29
diff --git a/typescript/pdf-add-annotations/e2e/protractor.conf.js b/typescript/pdf-add-annotations/e2e/protractor.conf.js
new file mode 100644
index 0000000..43eee1b
--- /dev/null
+++ b/typescript/pdf-add-annotations/e2e/protractor.conf.js
@@ -0,0 +1,21 @@
+exports.config = {
+
+ allScriptsTimeout: 11000,
+
+ capabilities: {
+ 'browserName': 'chrome'
+ },
+
+ framework: 'jasmine',
+
+ jasmineNodeOpts: {
+ defaultTimeoutInterval: 10000
+ },
+ directConnect: true,
+
+ onPrepare: function() {
+ browser.waitForAngularEnabled(false);
+ },
+
+ specs: ['./*.spec.js']
+};
\ No newline at end of file
diff --git a/typescript/pdf-add-annotations/gulpfile.js b/typescript/pdf-add-annotations/gulpfile.js
new file mode 100644
index 0000000..6a623f3
--- /dev/null
+++ b/typescript/pdf-add-annotations/gulpfile.js
@@ -0,0 +1,62 @@
+'use strict';
+
+var gulp = require('gulp');
+
+/**
+ * Compile TypeScript to JS
+ */
+gulp.task('compile', function (done) {
+ var webpack = require('webpack');
+ var webpackStream = require('webpack-stream');
+ gulp.src(['./src/app/app.ts']).pipe(webpackStream({
+ config: require('./webpack.config.js')
+ }, webpack))
+ .pipe(gulp.dest('./dist'))
+ .on('end', function () {
+ done();
+ });
+});
+
+/**
+ * Testing spec files
+ */
+var protractor = require('gulp-protractor').protractor;
+var webdriver_standalone = require('gulp-protractor').webdriver_standalone;
+var webdriver_update = require('gulp-protractor').webdriver_update_specific;
+
+gulp.task('e2e-serve', webdriver_standalone);
+
+gulp.task('e2e-webdriver-update', webdriver_update({
+ webdriverManagerArgs: ['--ie', '--edge']
+}));
+
+gulp.task('e2e-test', gulp.series('compile', function (done) {
+ var browserSync = require('browser-sync');
+ var bs = browserSync.create('Essential JS 2');
+ var options = {
+ server: {
+ baseDir: [
+ './dist/',
+ ],
+ directory: true
+ },
+ ui: false,
+ open: false,
+ notify: false
+ };
+ bs.init(options, function () {
+ gulp.src(['./spec/**/*.spec.js'])
+ .pipe(protractor({
+ configFile: 'e2e/protractor.conf.js'
+ }))
+ .on('error', function (e) {
+ console.error('Error: ' + e.message);
+ done();
+ process.exit(1);
+ })
+ .on('end', function () {
+ done();
+ process.exit(0);
+ });
+ });
+}));
\ No newline at end of file
diff --git a/typescript/pdf-add-annotations/license b/typescript/pdf-add-annotations/license
new file mode 100644
index 0000000..111c12a
--- /dev/null
+++ b/typescript/pdf-add-annotations/license
@@ -0,0 +1,10 @@
+Essential JS 2 library is available under the Syncfusion Essential Studio program, and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
+
+To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions.
+
+Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
+
+Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions.
+
+The Syncfusion license that contains the terms and conditions can be found at
+https://www.syncfusion.com/content/downloads/syncfusion_license.pdf
diff --git a/typescript/pdf-add-annotations/package.json b/typescript/pdf-add-annotations/package.json
new file mode 100644
index 0000000..32cebf8
--- /dev/null
+++ b/typescript/pdf-add-annotations/package.json
@@ -0,0 +1,38 @@
+{
+ "name": "ej2-quickstart",
+ "version": "0.0.1",
+ "description": "Essential JS 2 typescript quick start application",
+ "author": "Syncfusion Inc.",
+ "license": "SEE LICENSE IN license",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/syncfusion/ej2-quickstart.git"
+ },
+ "scripts": {
+ "start": "webpack serve --mode development",
+ "build": "webpack --mode production",
+ "serve": "gulp e2e-serve",
+ "test": "gulp e2e-test",
+ "update-webdriver": "gulp e2e-webdriver-update"
+ },
+ "devDependencies": {
+ "ajv": "^8.11.2",
+ "browser-sync": "^2.18.12",
+ "css-loader": "^6.7.2",
+ "gulp": "*",
+ "gulp-protractor": "*",
+ "gulp-typescript": "*",
+ "html-webpack-plugin": "^5.5.0",
+ "jasmine": "^2.6.0",
+ "mini-css-extract-plugin": "^2.7.0",
+ "ts-loader": "^9.5.1",
+ "typescript": "5.4.5",
+ "webpack": "^5.75.0",
+ "webpack-cli": "^5.0.0",
+ "webpack-dev-server": "^5.2.1",
+ "webpack-stream": "^7.0.0"
+ },
+ "dependencies": {
+ "@syncfusion/ej2": "*"
+ }
+}
diff --git a/typescript/pdf-add-annotations/src/app/app.ts b/typescript/pdf-add-annotations/src/app/app.ts
new file mode 100644
index 0000000..1ad2296
--- /dev/null
+++ b/typescript/pdf-add-annotations/src/app/app.ts
@@ -0,0 +1,33 @@
+import { Button } from '@syncfusion/ej2-buttons';
+import { PdfDocument, PdfPage, PdfLineAnnotation, PdfAnnotationLineEndingStyle, PdfLineEndingStyle, PdfAnnotationCaption, PdfLineCaptionType } from '@syncfusion/ej2-pdf';
+
+const addBtn = new Button({ cssClass: `e-primary` });
+addBtn.appendTo('#addBtn');
+addBtn.element.onclick = addAnnotations;
+
+function addAnnotations() {
+ //Create PDF document
+ const document: PdfDocument = new PdfDocument();
+ // Access the first page
+ let page: PdfPage = document.addPage();
+ // Creates a new line annotation.
+ let lineAnnotation: PdfLineAnnotation = new PdfLineAnnotation({ x: 180, y: 620 }, { x: 300, y: 620 }, {
+ text: 'Line Annotation',
+ author: 'Syncfusion',
+ color: { r: 255, g: 0, b: 0 },
+ innerColor: { r: 255, g: 255, b: 0 },
+ lineEndingStyle: new PdfAnnotationLineEndingStyle({ begin: PdfLineEndingStyle.circle, end: PdfLineEndingStyle.diamond }),
+ opacity: 0.5
+ });
+ // Assigns the leader line
+ lineAnnotation.leaderExt = 0;
+ lineAnnotation.leaderLine = 0;
+ // Assigns the line caption type
+ lineAnnotation.caption = new PdfAnnotationCaption({ cap: true, type: PdfLineCaptionType.inline });
+ // Adds annotation to the page
+ page.annotations.add(lineAnnotation);
+ // Save the PDF
+ document.save('Annotations.pdf');
+ // Destroy the document instance to release memory
+ document.destroy();
+}
\ No newline at end of file
diff --git a/typescript/pdf-add-annotations/src/index.html b/typescript/pdf-add-annotations/src/index.html
new file mode 100644
index 0000000..fa831db
--- /dev/null
+++ b/typescript/pdf-add-annotations/src/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+ Remove Annotations from PDF
+
+
+
+
+
Add Annotations in PDF
+
+
+
+
+
\ No newline at end of file
diff --git a/typescript/pdf-add-annotations/src/resources/favicon.ico b/typescript/pdf-add-annotations/src/resources/favicon.ico
new file mode 100644
index 0000000..d8d5c15
Binary files /dev/null and b/typescript/pdf-add-annotations/src/resources/favicon.ico differ
diff --git a/typescript/pdf-add-annotations/src/styles/styles.css b/typescript/pdf-add-annotations/src/styles/styles.css
new file mode 100644
index 0000000..0da413e
--- /dev/null
+++ b/typescript/pdf-add-annotations/src/styles/styles.css
@@ -0,0 +1 @@
+@import '../../node_modules/@syncfusion/ej2/material.css';
\ No newline at end of file
diff --git a/typescript/pdf-add-annotations/tsconfig.json b/typescript/pdf-add-annotations/tsconfig.json
new file mode 100644
index 0000000..3292391
--- /dev/null
+++ b/typescript/pdf-add-annotations/tsconfig.json
@@ -0,0 +1,12 @@
+{
+ "compilerOptions": {
+ "target": "es2016",
+ "module": "ES6",
+ "sourceMap": true,
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true,
+ "strict": true,
+ "skipLibCheck": true,
+ "moduleResolution": "bundler"
+ }
+}
diff --git a/typescript/pdf-add-annotations/webpack.config.js b/typescript/pdf-add-annotations/webpack.config.js
new file mode 100644
index 0000000..8a2b060
--- /dev/null
+++ b/typescript/pdf-add-annotations/webpack.config.js
@@ -0,0 +1,45 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require('path');
+
+module.exports = {
+ entry: ['./src/app/app.ts', './src/styles/styles.css'],
+ module: {
+ rules: [
+ {
+ test: /\.ts?$/,
+ use: 'ts-loader',
+ exclude: /node_modules/,
+ },
+ {
+ test: /\.css$/,
+ use: [ MiniCssExtractPlugin.loader, "css-loader" ]
+ },
+ ],
+ },
+ resolve: {
+ extensions: ['.ts', '.js'],
+ },
+ output: {
+ filename: 'bundle.js',
+ path: path.resolve(__dirname, 'dist'),
+ },
+ plugins: [
+ new HtmlWebpackPlugin({
+ template: 'src/index.html'
+ }),
+ new MiniCssExtractPlugin({
+ filename: "bundle.css"
+ })
+ ],
+ devServer: {
+ static: {
+ directory: path.join(__dirname, "dist"),
+ },
+ compress: true,
+ port: 4000,
+ open: true,
+ hot: true,
+ historyApiFallback: true
+ },
+};
diff --git a/typescript/pdf-add-layers/package.json b/typescript/pdf-add-layers/package.json
index 70da801..32cebf8 100644
--- a/typescript/pdf-add-layers/package.json
+++ b/typescript/pdf-add-layers/package.json
@@ -25,8 +25,8 @@
"html-webpack-plugin": "^5.5.0",
"jasmine": "^2.6.0",
"mini-css-extract-plugin": "^2.7.0",
- "ts-loader": "^9.4.1",
- "typescript": "*",
+ "ts-loader": "^9.5.1",
+ "typescript": "5.4.5",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^5.2.1",
diff --git a/typescript/pdf-add-layers/src/app/app.ts b/typescript/pdf-add-layers/src/app/app.ts
index 2c419f8..120c3ab 100644
--- a/typescript/pdf-add-layers/src/app/app.ts
+++ b/typescript/pdf-add-layers/src/app/app.ts
@@ -1,7 +1,7 @@
import { Button } from '@syncfusion/ej2-buttons';
import { PdfDocument, PdfPageSettings, PdfMargins, PdfPage, PdfGraphics, PdfBrush, PdfPen, PdfFontFamily, PdfStandardFont } from '@syncfusion/ej2-pdf';
-const addBtn = new Button();
+const addBtn = new Button({ cssClass: `e-primary`});
addBtn.appendTo('#addBtn');
addBtn.element.onclick = (): void => {
const doc = new PdfDocument();
diff --git a/typescript/pdf-bookmark-index/package.json b/typescript/pdf-bookmark-index/package.json
index 70da801..32cebf8 100644
--- a/typescript/pdf-bookmark-index/package.json
+++ b/typescript/pdf-bookmark-index/package.json
@@ -25,8 +25,8 @@
"html-webpack-plugin": "^5.5.0",
"jasmine": "^2.6.0",
"mini-css-extract-plugin": "^2.7.0",
- "ts-loader": "^9.4.1",
- "typescript": "*",
+ "ts-loader": "^9.5.1",
+ "typescript": "5.4.5",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^5.2.1",
diff --git a/typescript/pdf-bookmark-index/src/app/app.ts b/typescript/pdf-bookmark-index/src/app/app.ts
index 7be7ac3..6108432 100644
--- a/typescript/pdf-bookmark-index/src/app/app.ts
+++ b/typescript/pdf-bookmark-index/src/app/app.ts
@@ -1,7 +1,7 @@
import { Button } from '@syncfusion/ej2-buttons';
import { PdfDocument, PdfBookmarkBase } from '@syncfusion/ej2-pdf';
-const indexBtn = new Button();
+const indexBtn = new Button({ cssClass: `e-primary`});
indexBtn.appendTo('#indexBtn');
indexBtn.element.onclick = getBookmarkIndex;
diff --git a/typescript/pdf-bookmark-sample/package.json b/typescript/pdf-bookmark-sample/package.json
index 70da801..32cebf8 100644
--- a/typescript/pdf-bookmark-sample/package.json
+++ b/typescript/pdf-bookmark-sample/package.json
@@ -25,8 +25,8 @@
"html-webpack-plugin": "^5.5.0",
"jasmine": "^2.6.0",
"mini-css-extract-plugin": "^2.7.0",
- "ts-loader": "^9.4.1",
- "typescript": "*",
+ "ts-loader": "^9.5.1",
+ "typescript": "5.4.5",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^5.2.1",
diff --git a/typescript/pdf-bookmark-sample/src/app/app.ts b/typescript/pdf-bookmark-sample/src/app/app.ts
index a043c9f..86b7346 100644
--- a/typescript/pdf-bookmark-sample/src/app/app.ts
+++ b/typescript/pdf-bookmark-sample/src/app/app.ts
@@ -2,7 +2,7 @@ import { Button } from '@syncfusion/ej2-buttons';
import { PdfDocument, PdfPage, PdfBrush, PdfFontFamily, PdfDestination, PdfBookmark, PdfStandardFont, Rectangle, PdfBookmarkBase } from '@syncfusion/ej2-pdf';
-const addBtn = new Button();
+const addBtn = new Button({ cssClass: `e-primary`});
addBtn.appendTo('#addBtn');
addBtn.element.onclick = addBookmarks;
@@ -75,7 +75,7 @@ function addBookmarks() {
}
// Create the Remove Bookmark button
-const removeBtn = new Button();
+const removeBtn = new Button({ cssClass: `e-primary`});
removeBtn.appendTo('#removeBtn');
removeBtn.element.onclick = removeBookmark;
diff --git a/typescript/pdf-digital-signature/package.json b/typescript/pdf-digital-signature/package.json
index 70da801..32cebf8 100644
--- a/typescript/pdf-digital-signature/package.json
+++ b/typescript/pdf-digital-signature/package.json
@@ -25,8 +25,8 @@
"html-webpack-plugin": "^5.5.0",
"jasmine": "^2.6.0",
"mini-css-extract-plugin": "^2.7.0",
- "ts-loader": "^9.4.1",
- "typescript": "*",
+ "ts-loader": "^9.5.1",
+ "typescript": "5.4.5",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^5.2.1",
diff --git a/typescript/pdf-digital-signature/src/app/app.ts b/typescript/pdf-digital-signature/src/app/app.ts
index 77ce392..e871927 100644
--- a/typescript/pdf-digital-signature/src/app/app.ts
+++ b/typescript/pdf-digital-signature/src/app/app.ts
@@ -1,7 +1,7 @@
import { Button } from '@syncfusion/ej2-buttons';
import { PdfDocument, PdfSignatureField, PdfSignature, CryptographicStandard, DigestAlgorithm, PdfBitmap } from '@syncfusion/ej2-pdf';
-const signBtn = new Button();
+const signBtn = new Button({ cssClass: `e-primary`});
signBtn.appendTo('#signBtn');
signBtn.element.onclick = async (): Promise => {
try {
diff --git a/typescript/pdf-draw-text/.github/workflows/gitleaks.yaml b/typescript/pdf-draw-text/.github/workflows/gitleaks.yaml
new file mode 100644
index 0000000..9ae62e1
--- /dev/null
+++ b/typescript/pdf-draw-text/.github/workflows/gitleaks.yaml
@@ -0,0 +1,44 @@
+name: Secret Value found!!
+on:
+ push:
+ public:
+jobs:
+ scan:
+ name: gitleaks
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v4.2.2
+ - name: Install the gitleaks
+ run: wget https://github.com/zricethezav/gitleaks/releases/download/v8.15.2/gitleaks_8.15.2_linux_x64.tar.gz
+ shell: pwsh
+ - name: Extract the tar file
+ run: tar xzvf gitleaks_8.15.2_linux_x64.tar.gz
+ - name: Generate the report
+ id: gitleaks
+ run: $GITHUB_WORKSPACE/gitleaks detect -s $GITHUB_WORKSPACE -f json -r $GITHUB_WORKSPACE/leaksreport.json
+ shell: bash
+ continue-on-error: true
+ - name: Setup NuGet.exe
+ if: steps.gitleaks.outcome != 'success'
+ uses: nuget/setup-nuget@v2
+ with:
+ nuget-version: latest
+ - name: Install Mono
+ if: steps.gitleaks.outcome != 'success'
+ run: |
+ sudo apt update
+ sudo apt install -y mono-complete
+ - name: Install the dotnet SDK to a custom directory
+ if: steps.gitleaks.outcome != 'success'
+ run: |
+ mkdir -p $GITHUB_WORKSPACE/dotnet
+ curl -sSL https://dot.net/v1/dotnet-install.sh | bash /dev/stdin --install-dir $GITHUB_WORKSPACE/dotnet --channel 6.0
+ - name: Install the report tool packages
+ if: steps.gitleaks.outcome != 'success'
+ run: |
+ export PATH=$GITHUB_WORKSPACE/dotnet:$PATH
+ nuget install "Syncfusion.Email" -source ${{ secrets.NexusFeedLink }} -ExcludeVersion
+ dir $GITHUB_WORKSPACE/Syncfusion.Email/lib/net6.0
+ dotnet $GITHUB_WORKSPACE/Syncfusion.Email/lib/net6.0/GitleaksReportMail.dll ${{ secrets.CITEAMCREDENTIALS }} "$GITHUB_REF_NAME" ${{ secrets.NETWORKCREDENTIALS }} ${{ secrets.NETWORKKEY }} "$GITHUB_WORKSPACE" ${{ secrets.ORGANIZATIONNAME }}
+ exit 1
\ No newline at end of file
diff --git a/typescript/pdf-draw-text/.gitignore b/typescript/pdf-draw-text/.gitignore
new file mode 100644
index 0000000..1eae0cf
--- /dev/null
+++ b/typescript/pdf-draw-text/.gitignore
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/typescript/pdf-draw-text/README.md b/typescript/pdf-draw-text/README.md
new file mode 100644
index 0000000..cc4d7e7
--- /dev/null
+++ b/typescript/pdf-draw-text/README.md
@@ -0,0 +1,43 @@
+# How to Draw Text with Various Formatting in a PDF using TypeScript
+
+This project is a complete working application to draw text with various formatting in a PDF document using TypeScript.
+
+## Getting Started
+
+To get started you need to clone the `pdf-draw-text` repository and navigate to `pdf-draw-text` location.
+
+```
+git clone https://github.com/SyncfusionExamples/javascript-pdf-examples.git pdf-draw-text
+cd pdf-draw-text
+```
+
+## Installing
+
+We can get all the Essential JS 2 components in a single npm package [`ej2`](https://www.npmjs.com/package/@syncfusion/ej2).
+
+We already configure the required packages in the `package.json` file.
+
+You can run the below command to install all dependent packages related to this seed project.
+
+```
+npm install @syncfusion/ej2-pdf
+```
+
+## Running
+
+The application is configured with [webpack-dev-server](https://webpack.js.org/configuration/dev-server/#devserver), so it will serve the web application in your default browser.
+
+We have used [Webpack](https://github.com/webpack/webpack) for module loading.
+
+You can use the below npm script to run the web application.
+
+```
+npm run start
+```
+
+## Resources
+
+You can also refer the below resources to know more details about Javascript PDF Library.
+
+* [JavaScript PDF Library Demos](https://document.syncfusion.com/demos/pdf/javascript/#/tailwind3/pdf/default.html)
+* [JavaScript PDF Library Documentation](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/overview)
\ No newline at end of file
diff --git a/typescript/pdf-draw-text/e2e/index.spec.js b/typescript/pdf-draw-text/e2e/index.spec.js
new file mode 100644
index 0000000..e69de29
diff --git a/typescript/pdf-draw-text/e2e/protractor.conf.js b/typescript/pdf-draw-text/e2e/protractor.conf.js
new file mode 100644
index 0000000..43eee1b
--- /dev/null
+++ b/typescript/pdf-draw-text/e2e/protractor.conf.js
@@ -0,0 +1,21 @@
+exports.config = {
+
+ allScriptsTimeout: 11000,
+
+ capabilities: {
+ 'browserName': 'chrome'
+ },
+
+ framework: 'jasmine',
+
+ jasmineNodeOpts: {
+ defaultTimeoutInterval: 10000
+ },
+ directConnect: true,
+
+ onPrepare: function() {
+ browser.waitForAngularEnabled(false);
+ },
+
+ specs: ['./*.spec.js']
+};
\ No newline at end of file
diff --git a/typescript/pdf-draw-text/gulpfile.js b/typescript/pdf-draw-text/gulpfile.js
new file mode 100644
index 0000000..6a623f3
--- /dev/null
+++ b/typescript/pdf-draw-text/gulpfile.js
@@ -0,0 +1,62 @@
+'use strict';
+
+var gulp = require('gulp');
+
+/**
+ * Compile TypeScript to JS
+ */
+gulp.task('compile', function (done) {
+ var webpack = require('webpack');
+ var webpackStream = require('webpack-stream');
+ gulp.src(['./src/app/app.ts']).pipe(webpackStream({
+ config: require('./webpack.config.js')
+ }, webpack))
+ .pipe(gulp.dest('./dist'))
+ .on('end', function () {
+ done();
+ });
+});
+
+/**
+ * Testing spec files
+ */
+var protractor = require('gulp-protractor').protractor;
+var webdriver_standalone = require('gulp-protractor').webdriver_standalone;
+var webdriver_update = require('gulp-protractor').webdriver_update_specific;
+
+gulp.task('e2e-serve', webdriver_standalone);
+
+gulp.task('e2e-webdriver-update', webdriver_update({
+ webdriverManagerArgs: ['--ie', '--edge']
+}));
+
+gulp.task('e2e-test', gulp.series('compile', function (done) {
+ var browserSync = require('browser-sync');
+ var bs = browserSync.create('Essential JS 2');
+ var options = {
+ server: {
+ baseDir: [
+ './dist/',
+ ],
+ directory: true
+ },
+ ui: false,
+ open: false,
+ notify: false
+ };
+ bs.init(options, function () {
+ gulp.src(['./spec/**/*.spec.js'])
+ .pipe(protractor({
+ configFile: 'e2e/protractor.conf.js'
+ }))
+ .on('error', function (e) {
+ console.error('Error: ' + e.message);
+ done();
+ process.exit(1);
+ })
+ .on('end', function () {
+ done();
+ process.exit(0);
+ });
+ });
+}));
\ No newline at end of file
diff --git a/typescript/pdf-draw-text/license b/typescript/pdf-draw-text/license
new file mode 100644
index 0000000..111c12a
--- /dev/null
+++ b/typescript/pdf-draw-text/license
@@ -0,0 +1,10 @@
+Essential JS 2 library is available under the Syncfusion Essential Studio program, and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
+
+To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions.
+
+Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
+
+Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions.
+
+The Syncfusion license that contains the terms and conditions can be found at
+https://www.syncfusion.com/content/downloads/syncfusion_license.pdf
diff --git a/typescript/pdf-draw-text/package.json b/typescript/pdf-draw-text/package.json
new file mode 100644
index 0000000..32cebf8
--- /dev/null
+++ b/typescript/pdf-draw-text/package.json
@@ -0,0 +1,38 @@
+{
+ "name": "ej2-quickstart",
+ "version": "0.0.1",
+ "description": "Essential JS 2 typescript quick start application",
+ "author": "Syncfusion Inc.",
+ "license": "SEE LICENSE IN license",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/syncfusion/ej2-quickstart.git"
+ },
+ "scripts": {
+ "start": "webpack serve --mode development",
+ "build": "webpack --mode production",
+ "serve": "gulp e2e-serve",
+ "test": "gulp e2e-test",
+ "update-webdriver": "gulp e2e-webdriver-update"
+ },
+ "devDependencies": {
+ "ajv": "^8.11.2",
+ "browser-sync": "^2.18.12",
+ "css-loader": "^6.7.2",
+ "gulp": "*",
+ "gulp-protractor": "*",
+ "gulp-typescript": "*",
+ "html-webpack-plugin": "^5.5.0",
+ "jasmine": "^2.6.0",
+ "mini-css-extract-plugin": "^2.7.0",
+ "ts-loader": "^9.5.1",
+ "typescript": "5.4.5",
+ "webpack": "^5.75.0",
+ "webpack-cli": "^5.0.0",
+ "webpack-dev-server": "^5.2.1",
+ "webpack-stream": "^7.0.0"
+ },
+ "dependencies": {
+ "@syncfusion/ej2": "*"
+ }
+}
diff --git a/typescript/pdf-draw-text/src/app/app.ts b/typescript/pdf-draw-text/src/app/app.ts
new file mode 100644
index 0000000..775ac83
--- /dev/null
+++ b/typescript/pdf-draw-text/src/app/app.ts
@@ -0,0 +1,71 @@
+import { Button } from "@syncfusion/ej2-buttons";
+import { PdfBrush, PdfCjkFontFamily, PdfCjkStandardFont, PdfDocument, PdfFontFamily, PdfFontStyle, PdfGraphics, PdfPage, PdfStandardFont, PdfStringFormat, PdfTextAlignment, PdfTextDirection, PdfTrueTypeFont, PdfVerticalAlignment } from '@syncfusion/ej2-pdf';
+
+let button: Button = new Button({ cssClass: `e-primary` });
+button.appendTo('#drawText');
+// Font URLs
+var inputData = 'https://cdn.syncfusion.com/content/pdf-resources/noto-naskh-arabic-regular.ttf';
+button.element.onclick = async (): Promise => {
+ // Load Arabic font bytes
+ const arabicFontBytes = await fetchAsUint8Array(inputData);
+ // Create PDF document and page
+ const document: PdfDocument = new PdfDocument();
+ const page: PdfPage = document.addPage();
+ const graphics: PdfGraphics = page.graphics;
+ const bounds = graphics.clientSize;
+ // Common colors
+ const headingBrush: PdfBrush = new PdfBrush({ r: 126, g: 70, b: 19 });
+ const greenBrush: PdfBrush = new PdfBrush({ r: 0, g: 255, b: 0 });
+ const blueBrush: PdfBrush = new PdfBrush({ r: 0, g: 0, b: 255 });
+ const redBrush: PdfBrush = new PdfBrush({ r: 255, g: 0, b: 0 });
+ // Fonts
+ const headingFont: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 20, PdfFontStyle.bold);
+ const standardFont: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 13, PdfFontStyle.regular);
+ // Embedded TrueType font for Arabic text
+ const arabicFont: PdfTrueTypeFont = new PdfTrueTypeFont(arabicFontBytes, 13);
+ // CJK font for Japanese text
+ const cjkFont: PdfCjkStandardFont = new PdfCjkStandardFont(PdfCjkFontFamily.heiseiKakuGothicW5, 13, PdfFontStyle.bold);
+ //-------------------------------------------------------------------------
+ // Font Types Section
+ //-------------------------------------------------------------------------
+ graphics.drawString("Font types", headingFont, { x: 200, y: 50, width: bounds.width, height: bounds.height }, headingBrush);
+
+ // Standard font text
+ graphics.drawString("Hello World - Standard font type", standardFont, { x: 10, y: 100, width: bounds.width, height: bounds.height }, greenBrush);
+ // Arabic text using embedded TrueType font
+ graphics.drawString("سنبدأ بنظرة عامة مفاهيمية على مستند PDF بسيط. تم تصميم هذا الفصل ليكون توجيهًا مختصرًا قبل الغوص في مستند حقيقي وإنشاءه من البداية.\nيمكن تقسيم ملف PDF إلى أربعة أجزاء: الرأس والجسم والجدول الإسناد الترافقي والمقطورة. يضع الرأس الملف كملف PDF ، حيث يحدد النص المستند المرئي ، ويسرد جدول الإسناد الترافقي موقع كل شيء في الملف ، ويوفر المقطع الدعائي تعليمات حول كيفية بدء قراءة الملف. - TrueType Font type",
+ arabicFont, { x: 10, y: 130, width: bounds.width, height: bounds.height }, blueBrush
+ );
+ // Japanese text using CJK font
+ graphics.drawString("こんにちは世界 - CJK Font type", cjkFont, { x: 10, y: 250, width: bounds.width, height: bounds.height }, redBrush);
+ //-------------------------------------------------------------------------
+ // Text Alignment Section
+ //-------------------------------------------------------------------------
+ graphics.drawString("Alignment types", headingFont, { x: 200, y: 280, width: bounds.width, height: bounds.height }, headingBrush);
+ // Right-to-left text format
+ let textFormat: PdfStringFormat = new PdfStringFormat(PdfTextAlignment.right, PdfVerticalAlignment.bottom);
+ textFormat.wordSpacing = 2;
+ textFormat.characterSpacing = 1;
+ textFormat.textDirection = PdfTextDirection.rightToLeft;
+ textFormat.lineLimit = false;
+ textFormat.noClip = true;
+ graphics.drawString("JavaScript PDF Library - Alignment Right and Bottom", standardFont, { x: 10, y: 150, width: 400, height: 200 }, blueBrush, textFormat);
+ // Left-top alignment
+ textFormat = new PdfStringFormat(PdfTextAlignment.left, PdfVerticalAlignment.top);
+ graphics.drawString("JavaScript PDF Library - Alignment Left and Top", standardFont, { x: 10, y: 380, width: 400, height: 200 }, blueBrush, textFormat);
+ // Save and clean up
+ document.save("DrawText.pdf");
+ document.destroy();
+};
+
+// Helper: fetch font as Uint8Array
+function fetchAsUint8Array(url: string): Promise {
+ return fetch(url, { cache: 'no-cache' })
+ .then(function (res) {
+ if (!res.ok) throw new Error("Failed to fetch " + url + ": " + res.status + " " + res.statusText);
+ return res.arrayBuffer();
+ })
+ .then(function (buf) {
+ return new Uint8Array(buf);
+ });
+}
\ No newline at end of file
diff --git a/typescript/pdf-draw-text/src/index.html b/typescript/pdf-draw-text/src/index.html
new file mode 100644
index 0000000..23e6d3a
--- /dev/null
+++ b/typescript/pdf-draw-text/src/index.html
@@ -0,0 +1,12 @@
+
+
+
+ Draw Text
+
+
+
+
+
Draw Text
+
+
+
\ No newline at end of file
diff --git a/typescript/pdf-draw-text/src/resources/favicon.ico b/typescript/pdf-draw-text/src/resources/favicon.ico
new file mode 100644
index 0000000..d8d5c15
Binary files /dev/null and b/typescript/pdf-draw-text/src/resources/favicon.ico differ
diff --git a/typescript/pdf-draw-text/src/styles/styles.css b/typescript/pdf-draw-text/src/styles/styles.css
new file mode 100644
index 0000000..0da413e
--- /dev/null
+++ b/typescript/pdf-draw-text/src/styles/styles.css
@@ -0,0 +1 @@
+@import '../../node_modules/@syncfusion/ej2/material.css';
\ No newline at end of file
diff --git a/typescript/pdf-draw-text/tsconfig.json b/typescript/pdf-draw-text/tsconfig.json
new file mode 100644
index 0000000..3292391
--- /dev/null
+++ b/typescript/pdf-draw-text/tsconfig.json
@@ -0,0 +1,12 @@
+{
+ "compilerOptions": {
+ "target": "es2016",
+ "module": "ES6",
+ "sourceMap": true,
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true,
+ "strict": true,
+ "skipLibCheck": true,
+ "moduleResolution": "bundler"
+ }
+}
diff --git a/typescript/pdf-draw-text/webpack.config.js b/typescript/pdf-draw-text/webpack.config.js
new file mode 100644
index 0000000..8a2b060
--- /dev/null
+++ b/typescript/pdf-draw-text/webpack.config.js
@@ -0,0 +1,45 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require('path');
+
+module.exports = {
+ entry: ['./src/app/app.ts', './src/styles/styles.css'],
+ module: {
+ rules: [
+ {
+ test: /\.ts?$/,
+ use: 'ts-loader',
+ exclude: /node_modules/,
+ },
+ {
+ test: /\.css$/,
+ use: [ MiniCssExtractPlugin.loader, "css-loader" ]
+ },
+ ],
+ },
+ resolve: {
+ extensions: ['.ts', '.js'],
+ },
+ output: {
+ filename: 'bundle.js',
+ path: path.resolve(__dirname, 'dist'),
+ },
+ plugins: [
+ new HtmlWebpackPlugin({
+ template: 'src/index.html'
+ }),
+ new MiniCssExtractPlugin({
+ filename: "bundle.css"
+ })
+ ],
+ devServer: {
+ static: {
+ directory: path.join(__dirname, "dist"),
+ },
+ compress: true,
+ port: 4000,
+ open: true,
+ hot: true,
+ historyApiFallback: true
+ },
+};
diff --git a/typescript/pdf-export-annotations/.github/workflows/gitleaks.yaml b/typescript/pdf-export-annotations/.github/workflows/gitleaks.yaml
new file mode 100644
index 0000000..9ae62e1
--- /dev/null
+++ b/typescript/pdf-export-annotations/.github/workflows/gitleaks.yaml
@@ -0,0 +1,44 @@
+name: Secret Value found!!
+on:
+ push:
+ public:
+jobs:
+ scan:
+ name: gitleaks
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v4.2.2
+ - name: Install the gitleaks
+ run: wget https://github.com/zricethezav/gitleaks/releases/download/v8.15.2/gitleaks_8.15.2_linux_x64.tar.gz
+ shell: pwsh
+ - name: Extract the tar file
+ run: tar xzvf gitleaks_8.15.2_linux_x64.tar.gz
+ - name: Generate the report
+ id: gitleaks
+ run: $GITHUB_WORKSPACE/gitleaks detect -s $GITHUB_WORKSPACE -f json -r $GITHUB_WORKSPACE/leaksreport.json
+ shell: bash
+ continue-on-error: true
+ - name: Setup NuGet.exe
+ if: steps.gitleaks.outcome != 'success'
+ uses: nuget/setup-nuget@v2
+ with:
+ nuget-version: latest
+ - name: Install Mono
+ if: steps.gitleaks.outcome != 'success'
+ run: |
+ sudo apt update
+ sudo apt install -y mono-complete
+ - name: Install the dotnet SDK to a custom directory
+ if: steps.gitleaks.outcome != 'success'
+ run: |
+ mkdir -p $GITHUB_WORKSPACE/dotnet
+ curl -sSL https://dot.net/v1/dotnet-install.sh | bash /dev/stdin --install-dir $GITHUB_WORKSPACE/dotnet --channel 6.0
+ - name: Install the report tool packages
+ if: steps.gitleaks.outcome != 'success'
+ run: |
+ export PATH=$GITHUB_WORKSPACE/dotnet:$PATH
+ nuget install "Syncfusion.Email" -source ${{ secrets.NexusFeedLink }} -ExcludeVersion
+ dir $GITHUB_WORKSPACE/Syncfusion.Email/lib/net6.0
+ dotnet $GITHUB_WORKSPACE/Syncfusion.Email/lib/net6.0/GitleaksReportMail.dll ${{ secrets.CITEAMCREDENTIALS }} "$GITHUB_REF_NAME" ${{ secrets.NETWORKCREDENTIALS }} ${{ secrets.NETWORKKEY }} "$GITHUB_WORKSPACE" ${{ secrets.ORGANIZATIONNAME }}
+ exit 1
\ No newline at end of file
diff --git a/typescript/pdf-export-annotations/.gitignore b/typescript/pdf-export-annotations/.gitignore
new file mode 100644
index 0000000..1eae0cf
--- /dev/null
+++ b/typescript/pdf-export-annotations/.gitignore
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/typescript/pdf-export-annotations/README.md b/typescript/pdf-export-annotations/README.md
new file mode 100644
index 0000000..6cce617
--- /dev/null
+++ b/typescript/pdf-export-annotations/README.md
@@ -0,0 +1,43 @@
+# How to to Export Annotations from PDF using TypeScript
+
+This project is a complete working application to export annotations from PDF in TypeScript.
+
+## Getting Started
+
+To get started you need to clone the `pdf-export-annotations` repository and navigate to `pdf-export-annotations` location.
+
+```
+git clone https://github.com/SyncfusionExamples/javascript-pdf-examples.git pdf-export-annotations
+cd pdf-export-annotations
+```
+
+## Installing
+
+We can get all the Essential JS 2 components in a single npm package [`ej2`](https://www.npmjs.com/package/@syncfusion/ej2).
+
+We already configure the required packages in the `package.json` file.
+
+You can run the below command to install all dependent packages related to this seed project.
+
+```
+npm install @syncfusion/ej2-pdf
+```
+
+## Running
+
+The application is configured with [webpack-dev-server](https://webpack.js.org/configuration/dev-server/#devserver), so it will serve the web application in your default browser.
+
+We have used [Webpack](https://github.com/webpack/webpack) for module loading.
+
+You can use the below npm script to run the web application.
+
+```
+npm run start
+```
+
+## Resources
+
+You can also refer the below resources to know more details about Javascript PDF Library.
+
+* [JavaScript PDF Library Demos](https://document.syncfusion.com/demos/pdf/javascript/#/tailwind3/pdf/default.html)
+* [JavaScript PDF Library Documentation](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/overview)
\ No newline at end of file
diff --git a/typescript/pdf-export-annotations/e2e/index.spec.js b/typescript/pdf-export-annotations/e2e/index.spec.js
new file mode 100644
index 0000000..e69de29
diff --git a/typescript/pdf-export-annotations/e2e/protractor.conf.js b/typescript/pdf-export-annotations/e2e/protractor.conf.js
new file mode 100644
index 0000000..43eee1b
--- /dev/null
+++ b/typescript/pdf-export-annotations/e2e/protractor.conf.js
@@ -0,0 +1,21 @@
+exports.config = {
+
+ allScriptsTimeout: 11000,
+
+ capabilities: {
+ 'browserName': 'chrome'
+ },
+
+ framework: 'jasmine',
+
+ jasmineNodeOpts: {
+ defaultTimeoutInterval: 10000
+ },
+ directConnect: true,
+
+ onPrepare: function() {
+ browser.waitForAngularEnabled(false);
+ },
+
+ specs: ['./*.spec.js']
+};
\ No newline at end of file
diff --git a/typescript/pdf-export-annotations/gulpfile.js b/typescript/pdf-export-annotations/gulpfile.js
new file mode 100644
index 0000000..6a623f3
--- /dev/null
+++ b/typescript/pdf-export-annotations/gulpfile.js
@@ -0,0 +1,62 @@
+'use strict';
+
+var gulp = require('gulp');
+
+/**
+ * Compile TypeScript to JS
+ */
+gulp.task('compile', function (done) {
+ var webpack = require('webpack');
+ var webpackStream = require('webpack-stream');
+ gulp.src(['./src/app/app.ts']).pipe(webpackStream({
+ config: require('./webpack.config.js')
+ }, webpack))
+ .pipe(gulp.dest('./dist'))
+ .on('end', function () {
+ done();
+ });
+});
+
+/**
+ * Testing spec files
+ */
+var protractor = require('gulp-protractor').protractor;
+var webdriver_standalone = require('gulp-protractor').webdriver_standalone;
+var webdriver_update = require('gulp-protractor').webdriver_update_specific;
+
+gulp.task('e2e-serve', webdriver_standalone);
+
+gulp.task('e2e-webdriver-update', webdriver_update({
+ webdriverManagerArgs: ['--ie', '--edge']
+}));
+
+gulp.task('e2e-test', gulp.series('compile', function (done) {
+ var browserSync = require('browser-sync');
+ var bs = browserSync.create('Essential JS 2');
+ var options = {
+ server: {
+ baseDir: [
+ './dist/',
+ ],
+ directory: true
+ },
+ ui: false,
+ open: false,
+ notify: false
+ };
+ bs.init(options, function () {
+ gulp.src(['./spec/**/*.spec.js'])
+ .pipe(protractor({
+ configFile: 'e2e/protractor.conf.js'
+ }))
+ .on('error', function (e) {
+ console.error('Error: ' + e.message);
+ done();
+ process.exit(1);
+ })
+ .on('end', function () {
+ done();
+ process.exit(0);
+ });
+ });
+}));
\ No newline at end of file
diff --git a/typescript/pdf-export-annotations/license b/typescript/pdf-export-annotations/license
new file mode 100644
index 0000000..111c12a
--- /dev/null
+++ b/typescript/pdf-export-annotations/license
@@ -0,0 +1,10 @@
+Essential JS 2 library is available under the Syncfusion Essential Studio program, and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
+
+To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions.
+
+Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
+
+Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions.
+
+The Syncfusion license that contains the terms and conditions can be found at
+https://www.syncfusion.com/content/downloads/syncfusion_license.pdf
diff --git a/typescript/pdf-export-annotations/package.json b/typescript/pdf-export-annotations/package.json
new file mode 100644
index 0000000..32cebf8
--- /dev/null
+++ b/typescript/pdf-export-annotations/package.json
@@ -0,0 +1,38 @@
+{
+ "name": "ej2-quickstart",
+ "version": "0.0.1",
+ "description": "Essential JS 2 typescript quick start application",
+ "author": "Syncfusion Inc.",
+ "license": "SEE LICENSE IN license",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/syncfusion/ej2-quickstart.git"
+ },
+ "scripts": {
+ "start": "webpack serve --mode development",
+ "build": "webpack --mode production",
+ "serve": "gulp e2e-serve",
+ "test": "gulp e2e-test",
+ "update-webdriver": "gulp e2e-webdriver-update"
+ },
+ "devDependencies": {
+ "ajv": "^8.11.2",
+ "browser-sync": "^2.18.12",
+ "css-loader": "^6.7.2",
+ "gulp": "*",
+ "gulp-protractor": "*",
+ "gulp-typescript": "*",
+ "html-webpack-plugin": "^5.5.0",
+ "jasmine": "^2.6.0",
+ "mini-css-extract-plugin": "^2.7.0",
+ "ts-loader": "^9.5.1",
+ "typescript": "5.4.5",
+ "webpack": "^5.75.0",
+ "webpack-cli": "^5.0.0",
+ "webpack-dev-server": "^5.2.1",
+ "webpack-stream": "^7.0.0"
+ },
+ "dependencies": {
+ "@syncfusion/ej2": "*"
+ }
+}
diff --git a/typescript/pdf-export-annotations/src/app/app.ts b/typescript/pdf-export-annotations/src/app/app.ts
new file mode 100644
index 0000000..716c42a
--- /dev/null
+++ b/typescript/pdf-export-annotations/src/app/app.ts
@@ -0,0 +1,39 @@
+import { Button } from '@syncfusion/ej2-buttons';
+import { PdfDocument, DataFormat, PdfAnnotationExportSettings } from '@syncfusion/ej2-pdf';
+
+const exportBtn = new Button({ cssClass: `e-primary` });
+exportBtn.appendTo('#exportBtn');
+exportBtn.element.onclick = exportAnnotations;
+
+function exportAnnotations() {
+ const templateUrl = 'https://cdn.syncfusion.com/content/pdf-resources/annotation.pdf';
+ readFromUrl(templateUrl)
+ .then(function (pdfBytes) {
+ // Load the existing PDF document
+ const document: PdfDocument = new PdfDocument(pdfBytes);
+ const settings = new PdfAnnotationExportSettings();
+ settings.exportAppearance = true;
+ settings.dataFormat = DataFormat.json;
+ document.exportAnnotations('ExportAnnotations.json', settings);
+ // Destroy the document instance to release memory
+ document.destroy();
+ });
+}
+
+// Fetch PDF data from a URL
+function readFromUrl(url: any): Promise {
+ return fetch(url, { cache: 'no-cache' })
+ .then(function (res) {
+ // Check whether the request was successful
+ if (!res.ok) {
+ throw new Error(
+ 'Failed to fetch ' + url + ': ' + res.status + ' ' + res.statusText
+ );
+ }
+ return res.arrayBuffer();
+ })
+ .then(function (buf) {
+ // Convert the response to Uint8Array
+ return new Uint8Array(buf);
+ });
+}
\ No newline at end of file
diff --git a/typescript/pdf-export-annotations/src/index.html b/typescript/pdf-export-annotations/src/index.html
new file mode 100644
index 0000000..922330d
--- /dev/null
+++ b/typescript/pdf-export-annotations/src/index.html
@@ -0,0 +1,9 @@
+
+
+
+ Export Annotation from PDF
+
+
+
+
+
\ No newline at end of file
diff --git a/typescript/pdf-export-annotations/src/resources/favicon.ico b/typescript/pdf-export-annotations/src/resources/favicon.ico
new file mode 100644
index 0000000..d8d5c15
Binary files /dev/null and b/typescript/pdf-export-annotations/src/resources/favicon.ico differ
diff --git a/typescript/pdf-export-annotations/src/styles/styles.css b/typescript/pdf-export-annotations/src/styles/styles.css
new file mode 100644
index 0000000..0da413e
--- /dev/null
+++ b/typescript/pdf-export-annotations/src/styles/styles.css
@@ -0,0 +1 @@
+@import '../../node_modules/@syncfusion/ej2/material.css';
\ No newline at end of file
diff --git a/typescript/pdf-export-annotations/tsconfig.json b/typescript/pdf-export-annotations/tsconfig.json
new file mode 100644
index 0000000..3292391
--- /dev/null
+++ b/typescript/pdf-export-annotations/tsconfig.json
@@ -0,0 +1,12 @@
+{
+ "compilerOptions": {
+ "target": "es2016",
+ "module": "ES6",
+ "sourceMap": true,
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true,
+ "strict": true,
+ "skipLibCheck": true,
+ "moduleResolution": "bundler"
+ }
+}
diff --git a/typescript/pdf-export-annotations/webpack.config.js b/typescript/pdf-export-annotations/webpack.config.js
new file mode 100644
index 0000000..8a2b060
--- /dev/null
+++ b/typescript/pdf-export-annotations/webpack.config.js
@@ -0,0 +1,45 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require('path');
+
+module.exports = {
+ entry: ['./src/app/app.ts', './src/styles/styles.css'],
+ module: {
+ rules: [
+ {
+ test: /\.ts?$/,
+ use: 'ts-loader',
+ exclude: /node_modules/,
+ },
+ {
+ test: /\.css$/,
+ use: [ MiniCssExtractPlugin.loader, "css-loader" ]
+ },
+ ],
+ },
+ resolve: {
+ extensions: ['.ts', '.js'],
+ },
+ output: {
+ filename: 'bundle.js',
+ path: path.resolve(__dirname, 'dist'),
+ },
+ plugins: [
+ new HtmlWebpackPlugin({
+ template: 'src/index.html'
+ }),
+ new MiniCssExtractPlugin({
+ filename: "bundle.css"
+ })
+ ],
+ devServer: {
+ static: {
+ directory: path.join(__dirname, "dist"),
+ },
+ compress: true,
+ port: 4000,
+ open: true,
+ hot: true,
+ historyApiFallback: true
+ },
+};
diff --git a/typescript/pdf-extract-image/package.json b/typescript/pdf-extract-image/package.json
index 70da801..32cebf8 100644
--- a/typescript/pdf-extract-image/package.json
+++ b/typescript/pdf-extract-image/package.json
@@ -25,8 +25,8 @@
"html-webpack-plugin": "^5.5.0",
"jasmine": "^2.6.0",
"mini-css-extract-plugin": "^2.7.0",
- "ts-loader": "^9.4.1",
- "typescript": "*",
+ "ts-loader": "^9.5.1",
+ "typescript": "5.4.5",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^5.2.1",
diff --git a/typescript/pdf-extract-image/src/app/app.ts b/typescript/pdf-extract-image/src/app/app.ts
index 95b021a..3e95d30 100644
--- a/typescript/pdf-extract-image/src/app/app.ts
+++ b/typescript/pdf-extract-image/src/app/app.ts
@@ -2,7 +2,7 @@ import { Button } from '@syncfusion/ej2-buttons';
import { PdfDocument } from '@syncfusion/ej2-pdf';
import { PdfDataExtractor } from '@syncfusion/ej2-pdf-data-extract';
-const extractBtn = new Button();
+const extractBtn = new Button({ cssClass: `e-primary`});
extractBtn.appendTo('#extractbtn');
extractBtn.element.onclick = async (): Promise => {
diff --git a/typescript/pdf-extract-text/package.json b/typescript/pdf-extract-text/package.json
index 70da801..32cebf8 100644
--- a/typescript/pdf-extract-text/package.json
+++ b/typescript/pdf-extract-text/package.json
@@ -25,8 +25,8 @@
"html-webpack-plugin": "^5.5.0",
"jasmine": "^2.6.0",
"mini-css-extract-plugin": "^2.7.0",
- "ts-loader": "^9.4.1",
- "typescript": "*",
+ "ts-loader": "^9.5.1",
+ "typescript": "5.4.5",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^5.2.1",
diff --git a/typescript/pdf-extract-text/src/app/app.ts b/typescript/pdf-extract-text/src/app/app.ts
index c686e21..0b11406 100644
--- a/typescript/pdf-extract-text/src/app/app.ts
+++ b/typescript/pdf-extract-text/src/app/app.ts
@@ -2,7 +2,7 @@ import { Button } from '@syncfusion/ej2-buttons';
import { PdfDocument } from '@syncfusion/ej2-pdf';
import { PdfDataExtractor } from '@syncfusion/ej2-pdf-data-extract';
-const extractBtn = new Button();
+const extractBtn = new Button({ cssClass: `e-primary`});
extractBtn.appendTo('#extractbtn');
extractBtn.element.onclick = async (): Promise => {
try {
diff --git a/typescript/pdf-fill-form/package.json b/typescript/pdf-fill-form/package.json
index 70da801..32cebf8 100644
--- a/typescript/pdf-fill-form/package.json
+++ b/typescript/pdf-fill-form/package.json
@@ -25,8 +25,8 @@
"html-webpack-plugin": "^5.5.0",
"jasmine": "^2.6.0",
"mini-css-extract-plugin": "^2.7.0",
- "ts-loader": "^9.4.1",
- "typescript": "*",
+ "ts-loader": "^9.5.1",
+ "typescript": "5.4.5",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^5.2.1",
diff --git a/typescript/pdf-fill-form/src/app/app.ts b/typescript/pdf-fill-form/src/app/app.ts
index 05c6040..06b0197 100644
--- a/typescript/pdf-fill-form/src/app/app.ts
+++ b/typescript/pdf-fill-form/src/app/app.ts
@@ -2,7 +2,7 @@
import { PdfDocument, PdfForm, PdfTextBoxField, PdfCheckBoxField, PdfRadioButtonListField, PdfListBoxField } from '@syncfusion/ej2-pdf';
import { Button } from '@syncfusion/ej2-buttons';
// Create and initialize the PDF creation button
-var editForm = new Button();
+var editForm = new Button({ cssClass: `e-primary`});
editForm.appendTo('#editForm');
// Generate an PDF form when the button is clicked
editForm.element.onclick = editFormFields;
diff --git a/typescript/pdf-flow-text/.github/workflows/gitleaks.yaml b/typescript/pdf-flow-text/.github/workflows/gitleaks.yaml
new file mode 100644
index 0000000..9ae62e1
--- /dev/null
+++ b/typescript/pdf-flow-text/.github/workflows/gitleaks.yaml
@@ -0,0 +1,44 @@
+name: Secret Value found!!
+on:
+ push:
+ public:
+jobs:
+ scan:
+ name: gitleaks
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v4.2.2
+ - name: Install the gitleaks
+ run: wget https://github.com/zricethezav/gitleaks/releases/download/v8.15.2/gitleaks_8.15.2_linux_x64.tar.gz
+ shell: pwsh
+ - name: Extract the tar file
+ run: tar xzvf gitleaks_8.15.2_linux_x64.tar.gz
+ - name: Generate the report
+ id: gitleaks
+ run: $GITHUB_WORKSPACE/gitleaks detect -s $GITHUB_WORKSPACE -f json -r $GITHUB_WORKSPACE/leaksreport.json
+ shell: bash
+ continue-on-error: true
+ - name: Setup NuGet.exe
+ if: steps.gitleaks.outcome != 'success'
+ uses: nuget/setup-nuget@v2
+ with:
+ nuget-version: latest
+ - name: Install Mono
+ if: steps.gitleaks.outcome != 'success'
+ run: |
+ sudo apt update
+ sudo apt install -y mono-complete
+ - name: Install the dotnet SDK to a custom directory
+ if: steps.gitleaks.outcome != 'success'
+ run: |
+ mkdir -p $GITHUB_WORKSPACE/dotnet
+ curl -sSL https://dot.net/v1/dotnet-install.sh | bash /dev/stdin --install-dir $GITHUB_WORKSPACE/dotnet --channel 6.0
+ - name: Install the report tool packages
+ if: steps.gitleaks.outcome != 'success'
+ run: |
+ export PATH=$GITHUB_WORKSPACE/dotnet:$PATH
+ nuget install "Syncfusion.Email" -source ${{ secrets.NexusFeedLink }} -ExcludeVersion
+ dir $GITHUB_WORKSPACE/Syncfusion.Email/lib/net6.0
+ dotnet $GITHUB_WORKSPACE/Syncfusion.Email/lib/net6.0/GitleaksReportMail.dll ${{ secrets.CITEAMCREDENTIALS }} "$GITHUB_REF_NAME" ${{ secrets.NETWORKCREDENTIALS }} ${{ secrets.NETWORKKEY }} "$GITHUB_WORKSPACE" ${{ secrets.ORGANIZATIONNAME }}
+ exit 1
\ No newline at end of file
diff --git a/typescript/pdf-flow-text/.gitignore b/typescript/pdf-flow-text/.gitignore
new file mode 100644
index 0000000..1eae0cf
--- /dev/null
+++ b/typescript/pdf-flow-text/.gitignore
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/typescript/pdf-flow-text/README.md b/typescript/pdf-flow-text/README.md
new file mode 100644
index 0000000..7fd179f
--- /dev/null
+++ b/typescript/pdf-flow-text/README.md
@@ -0,0 +1,43 @@
+# How to Flow Text Across Pages in PDF in TypeScript
+
+This project is a complete working application to flow text accross pages in PDF document using TypeScript.
+
+## Getting Started
+
+To get started you need to clone the `pdf-flow-text` repository and navigate to `pdf-flow-text` location.
+
+```
+git clone https://github.com/SyncfusionExamples/javascript-pdf-examples.git pdf-flow-text
+cd pdf-flow-text
+```
+
+## Installing
+
+We can get all the Essential JS 2 components in a single npm package [`ej2`](https://www.npmjs.com/package/@syncfusion/ej2).
+
+We already configure the required packages in the `package.json` file.
+
+You can run the below command to install all dependent packages related to this seed project.
+
+```
+npm install @syncfusion/ej2-pdf
+```
+
+## Running
+
+The application is configured with [webpack-dev-server](https://webpack.js.org/configuration/dev-server/#devserver), so it will serve the web application in your default browser.
+
+We have used [Webpack](https://github.com/webpack/webpack) for module loading.
+
+You can use the below npm script to run the web application.
+
+```
+npm run start
+```
+
+## Resources
+
+You can also refer the below resources to know more details about Javascript PDF Library.
+
+* [JavaScript PDF Library Demos](https://document.syncfusion.com/demos/pdf/javascript/#/tailwind3/pdf/default.html)
+* [JavaScript PDF Library Documentation](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/overview)
\ No newline at end of file
diff --git a/typescript/pdf-flow-text/e2e/index.spec.js b/typescript/pdf-flow-text/e2e/index.spec.js
new file mode 100644
index 0000000..e69de29
diff --git a/typescript/pdf-flow-text/e2e/protractor.conf.js b/typescript/pdf-flow-text/e2e/protractor.conf.js
new file mode 100644
index 0000000..43eee1b
--- /dev/null
+++ b/typescript/pdf-flow-text/e2e/protractor.conf.js
@@ -0,0 +1,21 @@
+exports.config = {
+
+ allScriptsTimeout: 11000,
+
+ capabilities: {
+ 'browserName': 'chrome'
+ },
+
+ framework: 'jasmine',
+
+ jasmineNodeOpts: {
+ defaultTimeoutInterval: 10000
+ },
+ directConnect: true,
+
+ onPrepare: function() {
+ browser.waitForAngularEnabled(false);
+ },
+
+ specs: ['./*.spec.js']
+};
\ No newline at end of file
diff --git a/typescript/pdf-flow-text/gulpfile.js b/typescript/pdf-flow-text/gulpfile.js
new file mode 100644
index 0000000..6a623f3
--- /dev/null
+++ b/typescript/pdf-flow-text/gulpfile.js
@@ -0,0 +1,62 @@
+'use strict';
+
+var gulp = require('gulp');
+
+/**
+ * Compile TypeScript to JS
+ */
+gulp.task('compile', function (done) {
+ var webpack = require('webpack');
+ var webpackStream = require('webpack-stream');
+ gulp.src(['./src/app/app.ts']).pipe(webpackStream({
+ config: require('./webpack.config.js')
+ }, webpack))
+ .pipe(gulp.dest('./dist'))
+ .on('end', function () {
+ done();
+ });
+});
+
+/**
+ * Testing spec files
+ */
+var protractor = require('gulp-protractor').protractor;
+var webdriver_standalone = require('gulp-protractor').webdriver_standalone;
+var webdriver_update = require('gulp-protractor').webdriver_update_specific;
+
+gulp.task('e2e-serve', webdriver_standalone);
+
+gulp.task('e2e-webdriver-update', webdriver_update({
+ webdriverManagerArgs: ['--ie', '--edge']
+}));
+
+gulp.task('e2e-test', gulp.series('compile', function (done) {
+ var browserSync = require('browser-sync');
+ var bs = browserSync.create('Essential JS 2');
+ var options = {
+ server: {
+ baseDir: [
+ './dist/',
+ ],
+ directory: true
+ },
+ ui: false,
+ open: false,
+ notify: false
+ };
+ bs.init(options, function () {
+ gulp.src(['./spec/**/*.spec.js'])
+ .pipe(protractor({
+ configFile: 'e2e/protractor.conf.js'
+ }))
+ .on('error', function (e) {
+ console.error('Error: ' + e.message);
+ done();
+ process.exit(1);
+ })
+ .on('end', function () {
+ done();
+ process.exit(0);
+ });
+ });
+}));
\ No newline at end of file
diff --git a/typescript/pdf-flow-text/license b/typescript/pdf-flow-text/license
new file mode 100644
index 0000000..111c12a
--- /dev/null
+++ b/typescript/pdf-flow-text/license
@@ -0,0 +1,10 @@
+Essential JS 2 library is available under the Syncfusion Essential Studio program, and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
+
+To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions.
+
+Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
+
+Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions.
+
+The Syncfusion license that contains the terms and conditions can be found at
+https://www.syncfusion.com/content/downloads/syncfusion_license.pdf
diff --git a/typescript/pdf-flow-text/package.json b/typescript/pdf-flow-text/package.json
new file mode 100644
index 0000000..32cebf8
--- /dev/null
+++ b/typescript/pdf-flow-text/package.json
@@ -0,0 +1,38 @@
+{
+ "name": "ej2-quickstart",
+ "version": "0.0.1",
+ "description": "Essential JS 2 typescript quick start application",
+ "author": "Syncfusion Inc.",
+ "license": "SEE LICENSE IN license",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/syncfusion/ej2-quickstart.git"
+ },
+ "scripts": {
+ "start": "webpack serve --mode development",
+ "build": "webpack --mode production",
+ "serve": "gulp e2e-serve",
+ "test": "gulp e2e-test",
+ "update-webdriver": "gulp e2e-webdriver-update"
+ },
+ "devDependencies": {
+ "ajv": "^8.11.2",
+ "browser-sync": "^2.18.12",
+ "css-loader": "^6.7.2",
+ "gulp": "*",
+ "gulp-protractor": "*",
+ "gulp-typescript": "*",
+ "html-webpack-plugin": "^5.5.0",
+ "jasmine": "^2.6.0",
+ "mini-css-extract-plugin": "^2.7.0",
+ "ts-loader": "^9.5.1",
+ "typescript": "5.4.5",
+ "webpack": "^5.75.0",
+ "webpack-cli": "^5.0.0",
+ "webpack-dev-server": "^5.2.1",
+ "webpack-stream": "^7.0.0"
+ },
+ "dependencies": {
+ "@syncfusion/ej2": "*"
+ }
+}
diff --git a/typescript/pdf-flow-text/src/app/app.ts b/typescript/pdf-flow-text/src/app/app.ts
new file mode 100644
index 0000000..50fa23a
--- /dev/null
+++ b/typescript/pdf-flow-text/src/app/app.ts
@@ -0,0 +1,48 @@
+import { Button } from "@syncfusion/ej2-buttons";
+import { PdfDocument, PdfPage, PdfFontFamily, PdfLayoutFormat, PdfLayoutType, PdfLayoutBreakType, PdfBrush, PdfStandardFont, PdfTextElement } from '@syncfusion/ej2-pdf';
+
+let button: Button = new Button({ cssClass: `e-primary`});
+button.appendTo('#textFlow');
+button.element.onclick = async (): Promise => {
+ let textContent: string = '';
+ try {
+ const resp = await fetch('https://cdn.syncfusion.com/content/pdf-resources/pdf-textFlow.txt');
+ if (resp.ok) {
+ textContent = await resp.text();
+ }
+ } catch (e) {
+ /* If fetch fails, leave textContent empty */
+ }
+ // Create a new PDF document
+ let doc: PdfDocument = new PdfDocument();
+ // Add a new page to the document
+ let page: PdfPage = doc.addPage();
+ // Get the client size of the page for layout calculations
+ let clientSize = page.graphics.clientSize;
+ // Create an instance for layout format for drawing
+ let layoutFormat: PdfLayoutFormat = new PdfLayoutFormat();
+ // Set the layout type to paginate for the page layout format
+ layoutFormat.layout = PdfLayoutType.paginate;
+ // Set the layout break type for the page
+ layoutFormat.break = PdfLayoutBreakType.fitPage;
+ // Set the paginate bounds for the page
+ layoutFormat.paginateBounds = { x: 0, y: 0, width: clientSize.width, height: clientSize.height };
+ // Define a text element with styling and layout options
+ let element: PdfTextElement = {
+ text: textContent, // The text string to render
+ font: new PdfStandardFont(PdfFontFamily.timesRoman, 14), // Times Roman font at 14pt
+ brush: new PdfBrush({ r: 0, g: 0, b: 0 }), // Black color brush (RGB: 0,0,0)
+ layoutFormat: layoutFormat // Apply the pagination layout settings
+ };
+ // Draw the text element on the page within the specified bounds
+ page.drawTextElement(element, {
+ x: 0, // X coordinate starting position
+ y: 0, // Y coordinate starting position
+ width: clientSize.width, // Width matches page width
+ height: clientSize.height // Height matches page height
+ });
+ // Save the document
+ doc.save('TextFlowOutput.pdf');
+ // Destroy the document
+ doc.destroy();
+};
\ No newline at end of file
diff --git a/typescript/pdf-flow-text/src/index.html b/typescript/pdf-flow-text/src/index.html
new file mode 100644
index 0000000..012ad1c
--- /dev/null
+++ b/typescript/pdf-flow-text/src/index.html
@@ -0,0 +1,12 @@
+
+
+
+ Text Flow
+
+
+
+
+
Text Flow
+
+
+
\ No newline at end of file
diff --git a/typescript/pdf-flow-text/src/resources/favicon.ico b/typescript/pdf-flow-text/src/resources/favicon.ico
new file mode 100644
index 0000000..d8d5c15
Binary files /dev/null and b/typescript/pdf-flow-text/src/resources/favicon.ico differ
diff --git a/typescript/pdf-flow-text/src/styles/styles.css b/typescript/pdf-flow-text/src/styles/styles.css
new file mode 100644
index 0000000..0da413e
--- /dev/null
+++ b/typescript/pdf-flow-text/src/styles/styles.css
@@ -0,0 +1 @@
+@import '../../node_modules/@syncfusion/ej2/material.css';
\ No newline at end of file
diff --git a/typescript/pdf-flow-text/tsconfig.json b/typescript/pdf-flow-text/tsconfig.json
new file mode 100644
index 0000000..3292391
--- /dev/null
+++ b/typescript/pdf-flow-text/tsconfig.json
@@ -0,0 +1,12 @@
+{
+ "compilerOptions": {
+ "target": "es2016",
+ "module": "ES6",
+ "sourceMap": true,
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true,
+ "strict": true,
+ "skipLibCheck": true,
+ "moduleResolution": "bundler"
+ }
+}
diff --git a/typescript/pdf-flow-text/webpack.config.js b/typescript/pdf-flow-text/webpack.config.js
new file mode 100644
index 0000000..8a2b060
--- /dev/null
+++ b/typescript/pdf-flow-text/webpack.config.js
@@ -0,0 +1,45 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require('path');
+
+module.exports = {
+ entry: ['./src/app/app.ts', './src/styles/styles.css'],
+ module: {
+ rules: [
+ {
+ test: /\.ts?$/,
+ use: 'ts-loader',
+ exclude: /node_modules/,
+ },
+ {
+ test: /\.css$/,
+ use: [ MiniCssExtractPlugin.loader, "css-loader" ]
+ },
+ ],
+ },
+ resolve: {
+ extensions: ['.ts', '.js'],
+ },
+ output: {
+ filename: 'bundle.js',
+ path: path.resolve(__dirname, 'dist'),
+ },
+ plugins: [
+ new HtmlWebpackPlugin({
+ template: 'src/index.html'
+ }),
+ new MiniCssExtractPlugin({
+ filename: "bundle.css"
+ })
+ ],
+ devServer: {
+ static: {
+ directory: path.join(__dirname, "dist"),
+ },
+ compress: true,
+ port: 4000,
+ open: true,
+ hot: true,
+ historyApiFallback: true
+ },
+};
diff --git a/typescript/pdf-form-fillings/package.json b/typescript/pdf-form-fillings/package.json
index 70da801..32cebf8 100644
--- a/typescript/pdf-form-fillings/package.json
+++ b/typescript/pdf-form-fillings/package.json
@@ -25,8 +25,8 @@
"html-webpack-plugin": "^5.5.0",
"jasmine": "^2.6.0",
"mini-css-extract-plugin": "^2.7.0",
- "ts-loader": "^9.4.1",
- "typescript": "*",
+ "ts-loader": "^9.5.1",
+ "typescript": "5.4.5",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^5.2.1",
diff --git a/typescript/pdf-form-fillings/src/app/app.ts b/typescript/pdf-form-fillings/src/app/app.ts
index 986e0bf..34a325d 100644
--- a/typescript/pdf-form-fillings/src/app/app.ts
+++ b/typescript/pdf-form-fillings/src/app/app.ts
@@ -2,7 +2,7 @@ import { PdfDocument, PdfTextBoxField, PdfStandardFont, PdfFontFamily, PdfFontSt
import { Button } from '@syncfusion/ej2-buttons';
// Create button
-const formBtn = new Button();
+const formBtn = new Button({ cssClass: `e-primary`});
formBtn.appendTo('#formBtn');
// Generate PDF form on click
formBtn.element.onclick = createFormFields;
diff --git a/typescript/pdf-header-footer/.github/workflows/gitleaks.yaml b/typescript/pdf-header-footer/.github/workflows/gitleaks.yaml
new file mode 100644
index 0000000..9ae62e1
--- /dev/null
+++ b/typescript/pdf-header-footer/.github/workflows/gitleaks.yaml
@@ -0,0 +1,44 @@
+name: Secret Value found!!
+on:
+ push:
+ public:
+jobs:
+ scan:
+ name: gitleaks
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v4.2.2
+ - name: Install the gitleaks
+ run: wget https://github.com/zricethezav/gitleaks/releases/download/v8.15.2/gitleaks_8.15.2_linux_x64.tar.gz
+ shell: pwsh
+ - name: Extract the tar file
+ run: tar xzvf gitleaks_8.15.2_linux_x64.tar.gz
+ - name: Generate the report
+ id: gitleaks
+ run: $GITHUB_WORKSPACE/gitleaks detect -s $GITHUB_WORKSPACE -f json -r $GITHUB_WORKSPACE/leaksreport.json
+ shell: bash
+ continue-on-error: true
+ - name: Setup NuGet.exe
+ if: steps.gitleaks.outcome != 'success'
+ uses: nuget/setup-nuget@v2
+ with:
+ nuget-version: latest
+ - name: Install Mono
+ if: steps.gitleaks.outcome != 'success'
+ run: |
+ sudo apt update
+ sudo apt install -y mono-complete
+ - name: Install the dotnet SDK to a custom directory
+ if: steps.gitleaks.outcome != 'success'
+ run: |
+ mkdir -p $GITHUB_WORKSPACE/dotnet
+ curl -sSL https://dot.net/v1/dotnet-install.sh | bash /dev/stdin --install-dir $GITHUB_WORKSPACE/dotnet --channel 6.0
+ - name: Install the report tool packages
+ if: steps.gitleaks.outcome != 'success'
+ run: |
+ export PATH=$GITHUB_WORKSPACE/dotnet:$PATH
+ nuget install "Syncfusion.Email" -source ${{ secrets.NexusFeedLink }} -ExcludeVersion
+ dir $GITHUB_WORKSPACE/Syncfusion.Email/lib/net6.0
+ dotnet $GITHUB_WORKSPACE/Syncfusion.Email/lib/net6.0/GitleaksReportMail.dll ${{ secrets.CITEAMCREDENTIALS }} "$GITHUB_REF_NAME" ${{ secrets.NETWORKCREDENTIALS }} ${{ secrets.NETWORKKEY }} "$GITHUB_WORKSPACE" ${{ secrets.ORGANIZATIONNAME }}
+ exit 1
\ No newline at end of file
diff --git a/typescript/pdf-header-footer/.gitignore b/typescript/pdf-header-footer/.gitignore
new file mode 100644
index 0000000..1eae0cf
--- /dev/null
+++ b/typescript/pdf-header-footer/.gitignore
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/typescript/pdf-header-footer/README.md b/typescript/pdf-header-footer/README.md
new file mode 100644
index 0000000..54ee950
--- /dev/null
+++ b/typescript/pdf-header-footer/README.md
@@ -0,0 +1,43 @@
+# How to Add Headers and Footers in PDF in TypeScript
+
+This project is a complete working application to add headers and footers in PDF document using TypeScript.
+
+## Getting Started
+
+To get started you need to clone the `pdf-header-footer` repository and navigate to `pdf-header-footer` location.
+
+```
+git clone https://github.com/SyncfusionExamples/javascript-pdf-examples.git pdf-header-footer
+cd pdf-header-footer
+```
+
+## Installing
+
+We can get all the Essential JS 2 components in a single npm package [`ej2`](https://www.npmjs.com/package/@syncfusion/ej2).
+
+We already configure the required packages in the `package.json` file.
+
+You can run the below command to install all dependent packages related to this seed project.
+
+```
+npm install @syncfusion/ej2-pdf
+```
+
+## Running
+
+The application is configured with [webpack-dev-server](https://webpack.js.org/configuration/dev-server/#devserver), so it will serve the web application in your default browser.
+
+We have used [Webpack](https://github.com/webpack/webpack) for module loading.
+
+You can use the below npm script to run the web application.
+
+```
+npm run start
+```
+
+## Resources
+
+You can also refer the below resources to know more details about Javascript PDF Library.
+
+* [JavaScript PDF Library Demos](https://document.syncfusion.com/demos/pdf/javascript/#/tailwind3/pdf/default.html)
+* [JavaScript PDF Library Documentation](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/overview)
\ No newline at end of file
diff --git a/typescript/pdf-header-footer/e2e/index.spec.js b/typescript/pdf-header-footer/e2e/index.spec.js
new file mode 100644
index 0000000..e69de29
diff --git a/typescript/pdf-header-footer/e2e/protractor.conf.js b/typescript/pdf-header-footer/e2e/protractor.conf.js
new file mode 100644
index 0000000..43eee1b
--- /dev/null
+++ b/typescript/pdf-header-footer/e2e/protractor.conf.js
@@ -0,0 +1,21 @@
+exports.config = {
+
+ allScriptsTimeout: 11000,
+
+ capabilities: {
+ 'browserName': 'chrome'
+ },
+
+ framework: 'jasmine',
+
+ jasmineNodeOpts: {
+ defaultTimeoutInterval: 10000
+ },
+ directConnect: true,
+
+ onPrepare: function() {
+ browser.waitForAngularEnabled(false);
+ },
+
+ specs: ['./*.spec.js']
+};
\ No newline at end of file
diff --git a/typescript/pdf-header-footer/gulpfile.js b/typescript/pdf-header-footer/gulpfile.js
new file mode 100644
index 0000000..6a623f3
--- /dev/null
+++ b/typescript/pdf-header-footer/gulpfile.js
@@ -0,0 +1,62 @@
+'use strict';
+
+var gulp = require('gulp');
+
+/**
+ * Compile TypeScript to JS
+ */
+gulp.task('compile', function (done) {
+ var webpack = require('webpack');
+ var webpackStream = require('webpack-stream');
+ gulp.src(['./src/app/app.ts']).pipe(webpackStream({
+ config: require('./webpack.config.js')
+ }, webpack))
+ .pipe(gulp.dest('./dist'))
+ .on('end', function () {
+ done();
+ });
+});
+
+/**
+ * Testing spec files
+ */
+var protractor = require('gulp-protractor').protractor;
+var webdriver_standalone = require('gulp-protractor').webdriver_standalone;
+var webdriver_update = require('gulp-protractor').webdriver_update_specific;
+
+gulp.task('e2e-serve', webdriver_standalone);
+
+gulp.task('e2e-webdriver-update', webdriver_update({
+ webdriverManagerArgs: ['--ie', '--edge']
+}));
+
+gulp.task('e2e-test', gulp.series('compile', function (done) {
+ var browserSync = require('browser-sync');
+ var bs = browserSync.create('Essential JS 2');
+ var options = {
+ server: {
+ baseDir: [
+ './dist/',
+ ],
+ directory: true
+ },
+ ui: false,
+ open: false,
+ notify: false
+ };
+ bs.init(options, function () {
+ gulp.src(['./spec/**/*.spec.js'])
+ .pipe(protractor({
+ configFile: 'e2e/protractor.conf.js'
+ }))
+ .on('error', function (e) {
+ console.error('Error: ' + e.message);
+ done();
+ process.exit(1);
+ })
+ .on('end', function () {
+ done();
+ process.exit(0);
+ });
+ });
+}));
\ No newline at end of file
diff --git a/typescript/pdf-header-footer/license b/typescript/pdf-header-footer/license
new file mode 100644
index 0000000..111c12a
--- /dev/null
+++ b/typescript/pdf-header-footer/license
@@ -0,0 +1,10 @@
+Essential JS 2 library is available under the Syncfusion Essential Studio program, and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
+
+To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions.
+
+Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
+
+Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions.
+
+The Syncfusion license that contains the terms and conditions can be found at
+https://www.syncfusion.com/content/downloads/syncfusion_license.pdf
diff --git a/typescript/pdf-header-footer/package.json b/typescript/pdf-header-footer/package.json
new file mode 100644
index 0000000..32cebf8
--- /dev/null
+++ b/typescript/pdf-header-footer/package.json
@@ -0,0 +1,38 @@
+{
+ "name": "ej2-quickstart",
+ "version": "0.0.1",
+ "description": "Essential JS 2 typescript quick start application",
+ "author": "Syncfusion Inc.",
+ "license": "SEE LICENSE IN license",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/syncfusion/ej2-quickstart.git"
+ },
+ "scripts": {
+ "start": "webpack serve --mode development",
+ "build": "webpack --mode production",
+ "serve": "gulp e2e-serve",
+ "test": "gulp e2e-test",
+ "update-webdriver": "gulp e2e-webdriver-update"
+ },
+ "devDependencies": {
+ "ajv": "^8.11.2",
+ "browser-sync": "^2.18.12",
+ "css-loader": "^6.7.2",
+ "gulp": "*",
+ "gulp-protractor": "*",
+ "gulp-typescript": "*",
+ "html-webpack-plugin": "^5.5.0",
+ "jasmine": "^2.6.0",
+ "mini-css-extract-plugin": "^2.7.0",
+ "ts-loader": "^9.5.1",
+ "typescript": "5.4.5",
+ "webpack": "^5.75.0",
+ "webpack-cli": "^5.0.0",
+ "webpack-dev-server": "^5.2.1",
+ "webpack-stream": "^7.0.0"
+ },
+ "dependencies": {
+ "@syncfusion/ej2": "*"
+ }
+}
diff --git a/typescript/pdf-header-footer/src/app/app.ts b/typescript/pdf-header-footer/src/app/app.ts
new file mode 100644
index 0000000..fba5a40
--- /dev/null
+++ b/typescript/pdf-header-footer/src/app/app.ts
@@ -0,0 +1,223 @@
+import { Button } from "@syncfusion/ej2-buttons";
+import { PdfDocument, PdfFontFamily, PdfBrush, PdfStandardFont, PdfCompositeField, PdfDashStyle, PdfFontStyle, PdfMargins, PdfPageCountField, PdfPageNumberField, PdfPageSettings, PdfPageTemplateElement, PdfPen, PdfStringFormat, PdfTextAlignment, Rectangle } from '@syncfusion/ej2-pdf';
+
+// Create and initialize the PDF creation button
+var generatePDF = new Button({ cssClass: `e-primary` });
+generatePDF.appendTo('#generatePDF');
+// Generate an Modified Form PDF when the button is clicked
+generatePDF.element.onclick = generateHeaderFooter;
+
+function generateHeaderFooter() {
+ const pageWidth = 800;
+ const pageHeight = 520;
+ let doc = new PdfDocument();
+ let setting = new PdfPageSettings();
+ setting.size = { width: pageWidth, height: pageHeight };
+ const margin = new PdfMargins(15);
+ setting.margins = margin;
+ let page1 = doc.addPage(setting);
+ let page2 = doc.addPage(setting);
+ const header = new PdfPageTemplateElement({ width: pageWidth, height: 125 });
+ const hg = header.graphics;
+ const titleFont = new PdfStandardFont(PdfFontFamily.helvetica, 18, PdfFontStyle.bold);
+ const font = new PdfStandardFont(PdfFontFamily.helvetica, 10);
+ const blue = new PdfBrush({ r: 91, g: 125, b: 192 });
+ const black = new PdfBrush({ r: 0, g: 0, b: 0 });
+ // ===== TITLE =====
+ hg.drawString('Credit Card Statement', titleFont, { x: 20, y: 20, width: 400, height: 25 }, blue);
+ // ===== RIGHT SIDE TEXT =====
+ const rightFormat = new PdfStringFormat();
+ rightFormat.alignment = PdfTextAlignment.right;
+ // fonts
+ const boldFont = new PdfStandardFont(PdfFontFamily.helvetica, 10, PdfFontStyle.bold);
+ const rightBlockX = pageWidth - 220;
+ const rightBlockWidth = 200;
+ // ✅ Move DOWN to center with address section
+ hg.drawString('For Lost or Stolen Card,', boldFont,
+ {
+ x: rightBlockX - 20,
+ y: 55, // ✅ key fix (was too high before)
+ width: rightBlockWidth,
+ height: 15
+ }, black, rightFormat
+ );
+ hg.drawString('Call: 1-800-XXX-XXXX', font,
+ {
+ x: rightBlockX - 30,
+ y: 70, // ✅ directly below
+ width: rightBlockWidth,
+ height: 15
+ }, black, rightFormat
+ );
+ // ===== CUSTOMER DETAILS (LEFT) =====
+ let y = 55;
+ hg.drawString('Name: Abraham Swearengin', font, { x: 20, y, width: 300, height: 15 }, black);
+ y += 15;
+ hg.drawString('Address: United States, California,', font, { x: 20, y, width: 320, height: 15 }, black);
+ y += 15;
+ hg.drawString('San Mateo, 9920 BridgePointe Parkway,', font, { x: 20, y, width: 320, height: 15 }, black);
+ y += 15;
+ hg.drawString('Account Number: 12345-67-8901', font, { x: 20, y, width: 320, height: 15 }, black);
+ // ===== DIVIDER LINE (IMPORTANT MISSING PART) =====
+ const dividerPen = new PdfPen({ r: 91, g: 125, b: 192 }, 1);
+ hg.drawLine(dividerPen, { x: 20, y: 120 }, { x: pageWidth - 20, y: 120 });
+ // APPLY TEMPLATE
+ doc.template.top = { template: header };
+ const footer = new PdfPageTemplateElement({ width: pageWidth, height: 70 });
+ const fg = footer.graphics;
+ // dashed line
+ const pen = new PdfPen({ r: 91, g: 125, b: 192 }, 1);
+ pen.dashStyle = PdfDashStyle.dash;
+ fg.drawLine(pen, { x: 20, y: 5 }, { x: pageWidth - 20, y: 5 });
+ // page number
+ const pageNumber = new PdfPageNumberField({ font });
+ const pageCount = new PdfPageCountField({ font });
+ const composite = new PdfCompositeField({ font, brush: black, pattern: 'Page {0} of {1}', automaticFields: [pageNumber, pageCount] });
+ for (let i = 0; i < doc.pageCount; i++) {
+ let page = doc.getPage(i);
+ const bottomY = 335;
+ composite.draw(page.graphics, { x: 20, y: bottomY });
+ }
+ fg.drawString('800 Interchange Blvd.\nSuite 2501, Austin, TX 78721\nAny Questions? support@adventure-works.com',
+ font, { x: pageWidth - 300, y: 15, width: 280, height: 50 }, black, rightFormat);
+ doc.template.bottom = { template: footer };
+ const g = page1.graphics;
+ let y1 = 0;
+ const startX = 20;
+ const contentWidth = pageWidth - 40;
+ const contentFont = new PdfStandardFont(PdfFontFamily.helvetica, 10);
+ const boldContentFont = new PdfStandardFont(PdfFontFamily.helvetica, 10, PdfFontStyle.bold);
+ const blueBrush = new PdfBrush({ r: 91, g: 125, b: 192 });
+ const whiteBrush = new PdfBrush({ r: 255, g: 255, b: 255 });
+ const blackBrush = new PdfBrush({ r: 0, g: 0, b: 0 });
+ const linePen = new PdfPen({ r: 120, g: 120, b: 120 }, 0.5);
+ g.drawRectangle({ x: startX, y: y1, width: pageWidth - 110, height: 22 }, blueBrush);
+ g.drawString('Payment Information', boldContentFont, { x: startX + 8, y: y1 + 5, width: 300, height: 20 }, whiteBrush);
+ y1 += 30;
+ // ================= PAYMENT TEXT =================
+ const gap = 18;
+ g.drawString('Date: 10/15/XX', contentFont, { x: startX, y: y1, width: 300, height: 20 }, blackBrush);
+ y1 += gap;
+ g.drawString('Payment Due Date: 11/5/XX', contentFont, { x: startX, y: y1, width: 300, height: 20 }, blackBrush);
+ y1 += gap;
+ g.drawString('New Balance: $2402.00', contentFont, { x: startX, y: y1, width: 300, height: 20 }, blackBrush);
+ y1 += gap;
+ g.drawString('Minimum Payment: $50', contentFont, { x: startX, y: y1, width: 300, height: 20 }, blackBrush);
+ y1 += 20;
+ // ================= DIVIDER =================
+ g.drawLine(linePen, { x: startX, y: y1 }, { x: startX + contentWidth - 30, y: y1 });
+ y1 += 5;
+ // ================= TABLE SETUP =================
+ // ✅ 2 columns (FULL WIDTH)
+ const colWidths = [contentWidth * 0.60, contentWidth * 0.30];
+ // ================= TABLE HEADER =================
+ g.drawRectangle({ x: startX, y: y1, width: pageWidth - 115, height: 22 }, blueBrush);
+ g.drawString('Account Summary', boldContentFont, { x: startX + 8, y: y1 + 4, width: pageWidth - 115, height: 20 }, whiteBrush);
+ y1 += 22;
+ // ================= ROW HELPER =================
+ function drawRow(label: string, value: string) {
+ const rightAlign = new PdfStringFormat();
+ rightAlign.alignment = PdfTextAlignment.right;
+ // ✅ DRAW CELLS
+ g.drawRectangle({ x: startX, y: y1, width: colWidths[0], height: 20 }, linePen);
+ g.drawRectangle({ x: startX + colWidths[0], y: y1, width: colWidths[1], height: 20 }, linePen);
+ g.drawString(label, contentFont, { x: startX + 5, y: y1 + 4, width: colWidths[0] - 10, height: 20 }, blackBrush);
+ // ✅ VALUE (FIXED CLIPPING ISSUE)
+ g.drawString(value, contentFont,
+ {
+ x: startX + colWidths[0] - 2, // ✅ shift LEFT instead of inside
+ y: y1 + 4,
+ width: colWidths[1],
+ height: 20
+ }, blackBrush, rightAlign
+ );
+ y1 += 20;
+ }
+ // ================= TABLE DATA =================
+ drawRow('Previous Balance', '$1200.00');
+ drawRow('Payment, Credits', '-$200.00');
+ drawRow('Purchases', '$1500.00');
+ drawRow('Cash Advances', '$100.00');
+ drawRow('Fees Charged', '$0');
+ drawRow('Interest Charged', '$2.00');
+ drawRow('New Balance', '$2402.00');
+ // ================= PAGE 2 =================
+ const g2 = page2.graphics;
+ let y2 = 0;
+ // ✅ Same margins as Page 1
+ const startX2 = 20;
+ const contentWidth2 = pageWidth - 40;
+ // Reuse fonts/brushes already defined
+ const rightAlign2 = new PdfStringFormat();
+ rightAlign2.alignment = PdfTextAlignment.right;
+ // ================= SECTION 1 =================
+ // HEADER (✅ same width as page1)
+ g2.drawRectangle({ x: startX2, y: y2, width: pageWidth - 115, height: 22 }, blueBrush
+ );
+ g2.drawString('Account Summary', boldContentFont, { x: startX2 + 8, y: y2 + 4, width: 200, height: 20 }, whiteBrush);
+ y2 += 22;
+ const colW1 = contentWidth2 * 0.60;
+ const colW2 = contentWidth2 * 0.30;
+ function drawRow2(left: string, right: string) {
+ g2.drawRectangle({ x: startX2, y: y2, width: colW1, height: 20 }, linePen);
+ g2.drawRectangle({ x: startX2 + colW1, y: y2, width: colW2, height: 20 }, linePen);
+ g2.drawString(left, contentFont, { x: startX2 + 5, y: y2 + 4, width: colW1 - 10, height: 20 }, blackBrush);
+ g2.drawString(right, contentFont,
+ {
+ x: startX2 + colW1 - 2,
+ y: y2 + 4,
+ width: colW2,
+ height: 20
+ }, blackBrush, rightAlign2
+ );
+ y2 += 20;
+ }
+ drawRow2('Opening/Closing Date', '9/15/XX - 10/14/XX');
+ drawRow2('Credit Access Line', '$15,000.00');
+ drawRow2('Available Credit', '$10,000.00');
+ drawRow2('Cash Access Line', '$2,000');
+ drawRow2('Available for Cash', '$2,000');
+ drawRow2('Previous Due Amount', '$0');
+ drawRow2('Balance Over the Credit Access Line', '$0');
+ y2 += 20;
+ // ================= SECTION 2 =================
+ const tableWidth = pageWidth - 115;
+ const col3 = [tableWidth * 0.4, tableWidth * 0.3, tableWidth * 0.3];
+ const centerAlign = new PdfStringFormat();
+ centerAlign.alignment = PdfTextAlignment.center;
+ let x = startX2;
+ ['Finance Charge Summary', 'Purchases', 'Advances'].forEach((text, i) => {
+ g2.drawRectangle({ x, y: y2, width: col3[i], height: 22 }, blueBrush);
+ g2.drawString(text, boldContentFont, { x, y: y2 + 4, width: col3[i], height: 20 }, whiteBrush, centerAlign);
+ x += col3[i];
+ });
+ y2 += 22;
+ function drawRow3(label: string, val1: string, val2: string) {
+ let x = startX2;
+ col3.forEach(w => {
+ g2.drawRectangle({ x, y: y2, width: w, height: 20 }, linePen);
+ x += w;
+ });
+ g2.drawString(label, contentFont, { x: startX2 + 5, y: y2 + 4, width: col3[0] - 10, height: 20 }, blackBrush);
+ g2.drawString(val1, contentFont,
+ {
+ x: startX2 + col3[0] - 2,
+ y: y2 + 4,
+ width: col3[1],
+ height: 20
+ }, blackBrush, rightAlign2
+ );
+ g2.drawString(val2, contentFont,
+ {
+ x: startX2 + col3[0] + col3[1] - 2,
+ y: y2 + 4,
+ width: col3[2],
+ height: 20
+ }, blackBrush, rightAlign2
+ );
+ y2 += 20;
+ }
+ drawRow3('Periodic Rate', '1.05%', '0.73%');
+ drawRow3('Annual Percentage Rate (APR)', '12.05%', '5.25%');
+ doc.save('HeaderAndFooter.pdf');
+}
\ No newline at end of file
diff --git a/typescript/pdf-header-footer/src/index.html b/typescript/pdf-header-footer/src/index.html
new file mode 100644
index 0000000..0cedaa6
--- /dev/null
+++ b/typescript/pdf-header-footer/src/index.html
@@ -0,0 +1,12 @@
+
+
+
+ Header and Footer
+
+
+
+
+
Header And Footer
+
+
+
\ No newline at end of file
diff --git a/typescript/pdf-header-footer/src/resources/favicon.ico b/typescript/pdf-header-footer/src/resources/favicon.ico
new file mode 100644
index 0000000..d8d5c15
Binary files /dev/null and b/typescript/pdf-header-footer/src/resources/favicon.ico differ
diff --git a/typescript/pdf-header-footer/src/styles/styles.css b/typescript/pdf-header-footer/src/styles/styles.css
new file mode 100644
index 0000000..0da413e
--- /dev/null
+++ b/typescript/pdf-header-footer/src/styles/styles.css
@@ -0,0 +1 @@
+@import '../../node_modules/@syncfusion/ej2/material.css';
\ No newline at end of file
diff --git a/typescript/pdf-header-footer/tsconfig.json b/typescript/pdf-header-footer/tsconfig.json
new file mode 100644
index 0000000..3292391
--- /dev/null
+++ b/typescript/pdf-header-footer/tsconfig.json
@@ -0,0 +1,12 @@
+{
+ "compilerOptions": {
+ "target": "es2016",
+ "module": "ES6",
+ "sourceMap": true,
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true,
+ "strict": true,
+ "skipLibCheck": true,
+ "moduleResolution": "bundler"
+ }
+}
diff --git a/typescript/pdf-header-footer/webpack.config.js b/typescript/pdf-header-footer/webpack.config.js
new file mode 100644
index 0000000..8a2b060
--- /dev/null
+++ b/typescript/pdf-header-footer/webpack.config.js
@@ -0,0 +1,45 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require('path');
+
+module.exports = {
+ entry: ['./src/app/app.ts', './src/styles/styles.css'],
+ module: {
+ rules: [
+ {
+ test: /\.ts?$/,
+ use: 'ts-loader',
+ exclude: /node_modules/,
+ },
+ {
+ test: /\.css$/,
+ use: [ MiniCssExtractPlugin.loader, "css-loader" ]
+ },
+ ],
+ },
+ resolve: {
+ extensions: ['.ts', '.js'],
+ },
+ output: {
+ filename: 'bundle.js',
+ path: path.resolve(__dirname, 'dist'),
+ },
+ plugins: [
+ new HtmlWebpackPlugin({
+ template: 'src/index.html'
+ }),
+ new MiniCssExtractPlugin({
+ filename: "bundle.css"
+ })
+ ],
+ devServer: {
+ static: {
+ directory: path.join(__dirname, "dist"),
+ },
+ compress: true,
+ port: 4000,
+ open: true,
+ hot: true,
+ historyApiFallback: true
+ },
+};
diff --git a/typescript/pdf-import-page/package.json b/typescript/pdf-import-page/package.json
index 70da801..32cebf8 100644
--- a/typescript/pdf-import-page/package.json
+++ b/typescript/pdf-import-page/package.json
@@ -25,8 +25,8 @@
"html-webpack-plugin": "^5.5.0",
"jasmine": "^2.6.0",
"mini-css-extract-plugin": "^2.7.0",
- "ts-loader": "^9.4.1",
- "typescript": "*",
+ "ts-loader": "^9.5.1",
+ "typescript": "5.4.5",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^5.2.1",
diff --git a/typescript/pdf-import-page/src/app/app.ts b/typescript/pdf-import-page/src/app/app.ts
index b9f4a61..271f5a9 100644
--- a/typescript/pdf-import-page/src/app/app.ts
+++ b/typescript/pdf-import-page/src/app/app.ts
@@ -1,7 +1,7 @@
import { Button } from '@syncfusion/ej2-buttons';
import { PdfDocument } from '@syncfusion/ej2-pdf';
-const importBtn = new Button();
+const importBtn = new Button({ cssClass: `e-primary`});
importBtn.appendTo('#importBtn');
importBtn.element.onclick = async (): Promise => {
try {
diff --git a/typescript/pdf-list-sample/package.json b/typescript/pdf-list-sample/package.json
index 70da801..32cebf8 100644
--- a/typescript/pdf-list-sample/package.json
+++ b/typescript/pdf-list-sample/package.json
@@ -25,8 +25,8 @@
"html-webpack-plugin": "^5.5.0",
"jasmine": "^2.6.0",
"mini-css-extract-plugin": "^2.7.0",
- "ts-loader": "^9.4.1",
- "typescript": "*",
+ "ts-loader": "^9.5.1",
+ "typescript": "5.4.5",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^5.2.1",
diff --git a/typescript/pdf-list-sample/src/app/app.ts b/typescript/pdf-list-sample/src/app/app.ts
index ef8fa11..7692fa0 100644
--- a/typescript/pdf-list-sample/src/app/app.ts
+++ b/typescript/pdf-list-sample/src/app/app.ts
@@ -2,7 +2,7 @@ import { Button } from '@syncfusion/ej2-buttons';
import { PdfDocument, PdfBrush, PdfFontFamily, PdfFontStyle, PdfListItem, PdfListItemCollection, PdfOrderedList, PdfStringFormat, PdfUnorderedList, PdfUnorderedListStyle } from '@syncfusion/ej2-pdf';
// Create Ordered List button
-let listBtn: Button = new Button();
+let listBtn: Button = new Button({ cssClass: `e-primary`});
listBtn.appendTo('#listBtn');
listBtn.element.onclick = (): void => {
let pdf = new PdfDocument();
diff --git a/typescript/pdf-merge-sample/package.json b/typescript/pdf-merge-sample/package.json
index 70da801..32cebf8 100644
--- a/typescript/pdf-merge-sample/package.json
+++ b/typescript/pdf-merge-sample/package.json
@@ -25,8 +25,8 @@
"html-webpack-plugin": "^5.5.0",
"jasmine": "^2.6.0",
"mini-css-extract-plugin": "^2.7.0",
- "ts-loader": "^9.4.1",
- "typescript": "*",
+ "ts-loader": "^9.5.1",
+ "typescript": "5.4.5",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^5.2.1",
diff --git a/typescript/pdf-merge-sample/src/app/app.ts b/typescript/pdf-merge-sample/src/app/app.ts
index 73f06f9..22067cc 100644
--- a/typescript/pdf-merge-sample/src/app/app.ts
+++ b/typescript/pdf-merge-sample/src/app/app.ts
@@ -2,12 +2,13 @@ import { Button } from '@syncfusion/ej2-buttons';
import { PdfDocument } from '@syncfusion/ej2-pdf';
// Create the Merge button and attach it to the container element
-const mergeBtn = new Button();
+const mergeBtn = new Button({ cssClass: `e-primary`});
mergeBtn.appendTo('#mergeBtn');
// URLs of the PDF files to be merged
const templateUrl1 = 'https://cdn.syncfusion.com/content/pdf-resources/pdf-succinctly.pdf';
const templateUrl2 = 'https://cdn.syncfusion.com/content/pdf-resources/syncfusion-brochure.pdf';
+const templateUrl3 = 'https://cdn.syncfusion.com/content/pdf-resources/credit_card_statement.pdf';
// Handle the button click event
mergeBtn.element.onclick = async (): Promise => {
@@ -15,20 +16,24 @@ mergeBtn.element.onclick = async (): Promise => {
// Fetch both PDF files as Uint8Array
const pdfBytes1 = await fetchAsUint8Array(templateUrl1);
const pdfBytes2 = await fetchAsUint8Array(templateUrl2);
+ const pdfBytes3 = await fetchAsUint8Array(templateUrl3);
// Create PdfDocument instances from the downloaded PDF data
const doc1 = new PdfDocument(pdfBytes1);
const doc2 = new PdfDocument(pdfBytes2);
+ const doc3 = new PdfDocument(pdfBytes3);
// Import all pages from doc2 into doc1
// Parameters:
// doc2 -> Source PDF document
// 0 -> Starting page index
// doc2.pageCount - 1 -> Ending page index
doc1.importPageRange(doc2, 0, doc2.pageCount - 1);
+ doc1.importPageRange(doc3, 0, doc3.pageCount - 1);
// Save the merged PDF and trigger download
doc1.save('MergedPDF.pdf');
// Release resources used by both PDF documents
doc1.destroy();
doc2.destroy();
+ doc3.destroy();
} catch (err) {
// Log any errors that occur during the merge process
console.error('Merge PDFs failed:', err);
diff --git a/typescript/pdf-modify-annotations/package.json b/typescript/pdf-modify-annotations/package.json
index 70da801..32cebf8 100644
--- a/typescript/pdf-modify-annotations/package.json
+++ b/typescript/pdf-modify-annotations/package.json
@@ -25,8 +25,8 @@
"html-webpack-plugin": "^5.5.0",
"jasmine": "^2.6.0",
"mini-css-extract-plugin": "^2.7.0",
- "ts-loader": "^9.4.1",
- "typescript": "*",
+ "ts-loader": "^9.5.1",
+ "typescript": "5.4.5",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^5.2.1",
diff --git a/typescript/pdf-modify-annotations/src/app/app.ts b/typescript/pdf-modify-annotations/src/app/app.ts
index 5f48c78..c4a8e7a 100644
--- a/typescript/pdf-modify-annotations/src/app/app.ts
+++ b/typescript/pdf-modify-annotations/src/app/app.ts
@@ -1,7 +1,7 @@
import { Button } from '@syncfusion/ej2-buttons';
import { PdfDocument, PdfPage, PdfAnnotation } from '@syncfusion/ej2-pdf';
-const modifyBtn = new Button();
+const modifyBtn = new Button({ cssClass: `e-primary` });
modifyBtn.appendTo('#modifyBtn');
modifyBtn.element.onclick = modifyAnnotations;
@@ -15,12 +15,14 @@ function modifyAnnotations() {
let page: PdfPage = document.getPage(0);
// Access first annotation from the PDF page
let annotation: PdfAnnotation = page.annotations.at(0);
- // Modify its properties
- if (annotation) {
- annotation.text = 'Pop Annotation';
- annotation.color = { r: 0, g: 128, b: 255 };
- annotation.opacity = 0.5;
- }
+ annotation.name = 'Pop Annotation';
+ annotation.text = 'Pop Annotation';
+ annotation.color = { r: 255, g: 0, b: 0 };
+ annotation.opacity = 0.5;
+ annotation.author = 'John';
+ annotation.subject = 'Popup';
+ annotation.open = false;
+ annotation.setAppearance(true);
// Save the Updated PDF
document.save('ModifyAnnotations.pdf');
// Destroy the document instance to release memory
diff --git a/typescript/pdf-modify-form/package.json b/typescript/pdf-modify-form/package.json
index 70da801..32cebf8 100644
--- a/typescript/pdf-modify-form/package.json
+++ b/typescript/pdf-modify-form/package.json
@@ -25,8 +25,8 @@
"html-webpack-plugin": "^5.5.0",
"jasmine": "^2.6.0",
"mini-css-extract-plugin": "^2.7.0",
- "ts-loader": "^9.4.1",
- "typescript": "*",
+ "ts-loader": "^9.5.1",
+ "typescript": "5.4.5",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^5.2.1",
diff --git a/typescript/pdf-modify-form/src/app/app.ts b/typescript/pdf-modify-form/src/app/app.ts
index a691736..00f462f 100644
--- a/typescript/pdf-modify-form/src/app/app.ts
+++ b/typescript/pdf-modify-form/src/app/app.ts
@@ -1,27 +1,59 @@
-import { PdfDocument, PdfTextBoxField } from '@syncfusion/ej2-pdf';
+import { PdfDocument, PdfTextBoxField, PdfTextAlignment, PdfJavaScriptAction, PdfFormFieldVisibility, PdfStandardFont, PdfForm, PdfFontFamily } from '@syncfusion/ej2-pdf';
import { Button } from '@syncfusion/ej2-buttons';
// Create and initialize the PDF creation button
-var modifyForm = new Button();
+var modifyForm = new Button({ cssClass: `e-primary` });
modifyForm.appendTo('#modifyForm');
// Generate an Modified Form PDF when the button is clicked
modifyForm.element.onclick = modifyFormFields;
function modifyFormFields() {
fetchAsUint8Array(
- 'https://cdn.syncfusion.com/content/pdf-resources/form-filling-document.pdf'
+ 'https://cdn.syncfusion.com/content/pdf-resources/filled-form.pdf'
)
.then(function (pdfBytes) {
- // Create a PdfDocument instance from the loaded PDF bytes
- const pdf = new PdfDocument(pdfBytes);
- // Access the Name text box field (Field Index: 1)
- let nameField: PdfTextBoxField = pdf.form.fieldAt(1) as PdfTextBoxField;
- // Set the name value
+ // Load the PDF document
+ const pdf: PdfDocument = new PdfDocument(pdfBytes);
+ const form: PdfForm = pdf.form;
+ // -------------------------
+ // Date of Birth field
+ // -------------------------
+ const dobField = form.fieldAt(0) as PdfTextBoxField;
+ dobField.text = '13/07/2002';
+ dobField.textAlignment = PdfTextAlignment.left;
+ // Date format used for validation and formatting
+ const dateFormat: string = 'yyyy-mm-dd';
+ // Add JavaScript actions for date formatting and validation
+ dobField.actions.format = new PdfJavaScriptAction(
+ `AFDate_FormatEx("${dateFormat}");`
+ );
+ dobField.actions.keyPressed = new PdfJavaScriptAction(
+ `AFDate_KeystrokeEx("${dateFormat}");`
+ );
+ dobField.actions.validate = new PdfJavaScriptAction(
+ `AFDate_Validate("${dateFormat}");`
+ );
+ dobField.setAppearance(true);
+ // -------------------------
+ // Name field
+ // -------------------------
+ const nameField = form.fieldAt(1) as PdfTextBoxField
+ nameField.maxLength = 0;
+ nameField.required = false;
+ nameField.insertSpaces = false;
+ nameField.multiLine = false;
+ nameField.toolTip = "Text Box Tooltip";
+ nameField.borderColor = { r: 0, g: 0, b: 0 };
+ nameField.backColor = { r: 218, g: 234, b: 0 };
+ nameField.font = new PdfStandardFont(PdfFontFamily.helvetica, 10);
+ nameField.visibility = PdfFormFieldVisibility.visible;
nameField.text = 'John Allister';
+ nameField.defaultValue = 'John Allister';
+ nameField.textAlignment = PdfTextAlignment.center;
nameField.setAppearance(true);
- // Save the modified PDF document and download it
+ // Save the updated PDF
pdf.save('ModifiedForm.pdf');
- // Release resources associated with the PDF document
+ // Release resources
pdf.destroy();
})
.catch(function (err) {
diff --git a/typescript/pdf-redact-data/package.json b/typescript/pdf-redact-data/package.json
index 70da801..32cebf8 100644
--- a/typescript/pdf-redact-data/package.json
+++ b/typescript/pdf-redact-data/package.json
@@ -25,8 +25,8 @@
"html-webpack-plugin": "^5.5.0",
"jasmine": "^2.6.0",
"mini-css-extract-plugin": "^2.7.0",
- "ts-loader": "^9.4.1",
- "typescript": "*",
+ "ts-loader": "^9.5.1",
+ "typescript": "5.4.5",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^5.2.1",
diff --git a/typescript/pdf-redact-data/src/app/app.ts b/typescript/pdf-redact-data/src/app/app.ts
index 933277a..3e9a450 100644
--- a/typescript/pdf-redact-data/src/app/app.ts
+++ b/typescript/pdf-redact-data/src/app/app.ts
@@ -3,7 +3,7 @@ import { PdfDocument } from '@syncfusion/ej2-pdf';
import { PdfRedactor, PdfRedactionRegion } from '@syncfusion/ej2-pdf-data-extract';
// Create Redact button
-let redactbtn: Button = new Button();
+let redactbtn: Button = new Button({ cssClass: `e-primary`});
redactbtn.appendTo('#redactbtn');
redactbtn.element.onclick = redactPdf;
// Template PDF URL
diff --git a/typescript/pdf-remove-annotations/package.json b/typescript/pdf-remove-annotations/package.json
index 70da801..32cebf8 100644
--- a/typescript/pdf-remove-annotations/package.json
+++ b/typescript/pdf-remove-annotations/package.json
@@ -25,8 +25,8 @@
"html-webpack-plugin": "^5.5.0",
"jasmine": "^2.6.0",
"mini-css-extract-plugin": "^2.7.0",
- "ts-loader": "^9.4.1",
- "typescript": "*",
+ "ts-loader": "^9.5.1",
+ "typescript": "5.4.5",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^5.2.1",
diff --git a/typescript/pdf-remove-annotations/src/app/app.ts b/typescript/pdf-remove-annotations/src/app/app.ts
index 45ca081..372720e 100644
--- a/typescript/pdf-remove-annotations/src/app/app.ts
+++ b/typescript/pdf-remove-annotations/src/app/app.ts
@@ -1,7 +1,7 @@
import { Button } from '@syncfusion/ej2-buttons';
import { PdfDocument, PdfPage, PdfAnnotation } from '@syncfusion/ej2-pdf';
-const removeBtn = new Button();
+const removeBtn = new Button({ cssClass: `e-primary`});
removeBtn.appendTo('#removeBtn');
removeBtn.element.onclick = removeAnnotations;
diff --git a/typescript/pdf-remove-bookmark/package.json b/typescript/pdf-remove-bookmark/package.json
index 70da801..32cebf8 100644
--- a/typescript/pdf-remove-bookmark/package.json
+++ b/typescript/pdf-remove-bookmark/package.json
@@ -25,8 +25,8 @@
"html-webpack-plugin": "^5.5.0",
"jasmine": "^2.6.0",
"mini-css-extract-plugin": "^2.7.0",
- "ts-loader": "^9.4.1",
- "typescript": "*",
+ "ts-loader": "^9.5.1",
+ "typescript": "5.4.5",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^5.2.1",
diff --git a/typescript/pdf-remove-bookmark/src/app/app.ts b/typescript/pdf-remove-bookmark/src/app/app.ts
index 7bd0f3c..016472d 100644
--- a/typescript/pdf-remove-bookmark/src/app/app.ts
+++ b/typescript/pdf-remove-bookmark/src/app/app.ts
@@ -1,7 +1,7 @@
import { Button } from '@syncfusion/ej2-buttons';
import { PdfDocument, PdfBookmarkBase } from '@syncfusion/ej2-pdf';
-const indexBtn = new Button();
+const indexBtn = new Button({ cssClass: `e-primary`});
indexBtn.appendTo('#indexBtn');
indexBtn.element.onclick = getBookmarkIndex;
diff --git a/typescript/pdf-remove-layers/package.json b/typescript/pdf-remove-layers/package.json
index 70da801..32cebf8 100644
--- a/typescript/pdf-remove-layers/package.json
+++ b/typescript/pdf-remove-layers/package.json
@@ -25,8 +25,8 @@
"html-webpack-plugin": "^5.5.0",
"jasmine": "^2.6.0",
"mini-css-extract-plugin": "^2.7.0",
- "ts-loader": "^9.4.1",
- "typescript": "*",
+ "ts-loader": "^9.5.1",
+ "typescript": "5.4.5",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^5.2.1",
diff --git a/typescript/pdf-remove-layers/src/app/app.ts b/typescript/pdf-remove-layers/src/app/app.ts
index ca2e260..f59e765 100644
--- a/typescript/pdf-remove-layers/src/app/app.ts
+++ b/typescript/pdf-remove-layers/src/app/app.ts
@@ -1,7 +1,7 @@
import { Button } from '@syncfusion/ej2-buttons';
import { PdfDocument, PdfLayerCollection, PdfLayer } from '@syncfusion/ej2-pdf';
-const removeBtn = new Button();
+const removeBtn = new Button({ cssClass: `e-primary`});
removeBtn.appendTo('#removeBtn');
removeBtn.element.onclick = removeLayers;
diff --git a/typescript/pdf-split/package.json b/typescript/pdf-split/package.json
index 70da801..8a9173d 100644
--- a/typescript/pdf-split/package.json
+++ b/typescript/pdf-split/package.json
@@ -25,7 +25,7 @@
"html-webpack-plugin": "^5.5.0",
"jasmine": "^2.6.0",
"mini-css-extract-plugin": "^2.7.0",
- "ts-loader": "^9.4.1",
+ "ts-loader": "^9.6.1",
"typescript": "*",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0",
diff --git a/typescript/pdf-split/src/app/app.ts b/typescript/pdf-split/src/app/app.ts
index 1cc9eb2..3f14cef 100644
--- a/typescript/pdf-split/src/app/app.ts
+++ b/typescript/pdf-split/src/app/app.ts
@@ -6,7 +6,7 @@ import { Save } from '@syncfusion/ej2/file-utils';
const DEFAULT_PDF_URL = 'https://cdn.syncfusion.com/content/pdf-resources/pdf-succinctly.pdf';
// Initialize button
-const splitBtnSf = new Button();
+const splitBtnSf = new Button({ cssClass: `e-primary`});
splitBtnSf.appendTo('#splitBtn');
splitBtnSf.element.onclick = splitPDF;
diff --git a/typescript/pdf-stamp-annotations/.github/workflows/gitleaks.yaml b/typescript/pdf-stamp-annotations/.github/workflows/gitleaks.yaml
new file mode 100644
index 0000000..9ae62e1
--- /dev/null
+++ b/typescript/pdf-stamp-annotations/.github/workflows/gitleaks.yaml
@@ -0,0 +1,44 @@
+name: Secret Value found!!
+on:
+ push:
+ public:
+jobs:
+ scan:
+ name: gitleaks
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v4.2.2
+ - name: Install the gitleaks
+ run: wget https://github.com/zricethezav/gitleaks/releases/download/v8.15.2/gitleaks_8.15.2_linux_x64.tar.gz
+ shell: pwsh
+ - name: Extract the tar file
+ run: tar xzvf gitleaks_8.15.2_linux_x64.tar.gz
+ - name: Generate the report
+ id: gitleaks
+ run: $GITHUB_WORKSPACE/gitleaks detect -s $GITHUB_WORKSPACE -f json -r $GITHUB_WORKSPACE/leaksreport.json
+ shell: bash
+ continue-on-error: true
+ - name: Setup NuGet.exe
+ if: steps.gitleaks.outcome != 'success'
+ uses: nuget/setup-nuget@v2
+ with:
+ nuget-version: latest
+ - name: Install Mono
+ if: steps.gitleaks.outcome != 'success'
+ run: |
+ sudo apt update
+ sudo apt install -y mono-complete
+ - name: Install the dotnet SDK to a custom directory
+ if: steps.gitleaks.outcome != 'success'
+ run: |
+ mkdir -p $GITHUB_WORKSPACE/dotnet
+ curl -sSL https://dot.net/v1/dotnet-install.sh | bash /dev/stdin --install-dir $GITHUB_WORKSPACE/dotnet --channel 6.0
+ - name: Install the report tool packages
+ if: steps.gitleaks.outcome != 'success'
+ run: |
+ export PATH=$GITHUB_WORKSPACE/dotnet:$PATH
+ nuget install "Syncfusion.Email" -source ${{ secrets.NexusFeedLink }} -ExcludeVersion
+ dir $GITHUB_WORKSPACE/Syncfusion.Email/lib/net6.0
+ dotnet $GITHUB_WORKSPACE/Syncfusion.Email/lib/net6.0/GitleaksReportMail.dll ${{ secrets.CITEAMCREDENTIALS }} "$GITHUB_REF_NAME" ${{ secrets.NETWORKCREDENTIALS }} ${{ secrets.NETWORKKEY }} "$GITHUB_WORKSPACE" ${{ secrets.ORGANIZATIONNAME }}
+ exit 1
\ No newline at end of file
diff --git a/typescript/pdf-stamp-annotations/.gitignore b/typescript/pdf-stamp-annotations/.gitignore
new file mode 100644
index 0000000..1eae0cf
--- /dev/null
+++ b/typescript/pdf-stamp-annotations/.gitignore
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/typescript/pdf-stamp-annotations/README.md b/typescript/pdf-stamp-annotations/README.md
new file mode 100644
index 0000000..71696cf
--- /dev/null
+++ b/typescript/pdf-stamp-annotations/README.md
@@ -0,0 +1,43 @@
+# How to Create a Custom Stamp Annotation in PDF using TypeScript
+
+This project is a complete working application to create a custom stamp annotation in PDF using TypeScript.
+
+## Getting Started
+
+To get started you need to clone the `pdf-stamp-annotations` repository and navigate to `pdf-stamp-annotations` location.
+
+```
+git clone https://github.com/SyncfusionExamples/javascript-pdf-examples.git pdf-stamp-annotations
+cd pdf-stamp-annotations
+```
+
+## Installing
+
+We can get all the Essential JS 2 components in a single npm package [`ej2`](https://www.npmjs.com/package/@syncfusion/ej2).
+
+We already configure the required packages in the `package.json` file.
+
+You can run the below command to install all dependent packages related to this seed project.
+
+```
+npm install @syncfusion/ej2-pdf
+```
+
+## Running
+
+The application is configured with [webpack-dev-server](https://webpack.js.org/configuration/dev-server/#devserver), so it will serve the web application in your default browser.
+
+We have used [Webpack](https://github.com/webpack/webpack) for module loading.
+
+You can use the below npm script to run the web application.
+
+```
+npm run start
+```
+
+## Resources
+
+You can also refer the below resources to know more details about Javascript PDF Library.
+
+* [JavaScript PDF Library Demos](https://document.syncfusion.com/demos/pdf/javascript/#/tailwind3/pdf/default.html)
+* [JavaScript PDF Library Documentation](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/overview)
\ No newline at end of file
diff --git a/typescript/pdf-stamp-annotations/e2e/index.spec.js b/typescript/pdf-stamp-annotations/e2e/index.spec.js
new file mode 100644
index 0000000..e69de29
diff --git a/typescript/pdf-stamp-annotations/e2e/protractor.conf.js b/typescript/pdf-stamp-annotations/e2e/protractor.conf.js
new file mode 100644
index 0000000..43eee1b
--- /dev/null
+++ b/typescript/pdf-stamp-annotations/e2e/protractor.conf.js
@@ -0,0 +1,21 @@
+exports.config = {
+
+ allScriptsTimeout: 11000,
+
+ capabilities: {
+ 'browserName': 'chrome'
+ },
+
+ framework: 'jasmine',
+
+ jasmineNodeOpts: {
+ defaultTimeoutInterval: 10000
+ },
+ directConnect: true,
+
+ onPrepare: function() {
+ browser.waitForAngularEnabled(false);
+ },
+
+ specs: ['./*.spec.js']
+};
\ No newline at end of file
diff --git a/typescript/pdf-stamp-annotations/gulpfile.js b/typescript/pdf-stamp-annotations/gulpfile.js
new file mode 100644
index 0000000..6a623f3
--- /dev/null
+++ b/typescript/pdf-stamp-annotations/gulpfile.js
@@ -0,0 +1,62 @@
+'use strict';
+
+var gulp = require('gulp');
+
+/**
+ * Compile TypeScript to JS
+ */
+gulp.task('compile', function (done) {
+ var webpack = require('webpack');
+ var webpackStream = require('webpack-stream');
+ gulp.src(['./src/app/app.ts']).pipe(webpackStream({
+ config: require('./webpack.config.js')
+ }, webpack))
+ .pipe(gulp.dest('./dist'))
+ .on('end', function () {
+ done();
+ });
+});
+
+/**
+ * Testing spec files
+ */
+var protractor = require('gulp-protractor').protractor;
+var webdriver_standalone = require('gulp-protractor').webdriver_standalone;
+var webdriver_update = require('gulp-protractor').webdriver_update_specific;
+
+gulp.task('e2e-serve', webdriver_standalone);
+
+gulp.task('e2e-webdriver-update', webdriver_update({
+ webdriverManagerArgs: ['--ie', '--edge']
+}));
+
+gulp.task('e2e-test', gulp.series('compile', function (done) {
+ var browserSync = require('browser-sync');
+ var bs = browserSync.create('Essential JS 2');
+ var options = {
+ server: {
+ baseDir: [
+ './dist/',
+ ],
+ directory: true
+ },
+ ui: false,
+ open: false,
+ notify: false
+ };
+ bs.init(options, function () {
+ gulp.src(['./spec/**/*.spec.js'])
+ .pipe(protractor({
+ configFile: 'e2e/protractor.conf.js'
+ }))
+ .on('error', function (e) {
+ console.error('Error: ' + e.message);
+ done();
+ process.exit(1);
+ })
+ .on('end', function () {
+ done();
+ process.exit(0);
+ });
+ });
+}));
\ No newline at end of file
diff --git a/typescript/pdf-stamp-annotations/license b/typescript/pdf-stamp-annotations/license
new file mode 100644
index 0000000..111c12a
--- /dev/null
+++ b/typescript/pdf-stamp-annotations/license
@@ -0,0 +1,10 @@
+Essential JS 2 library is available under the Syncfusion Essential Studio program, and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
+
+To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions.
+
+Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
+
+Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions.
+
+The Syncfusion license that contains the terms and conditions can be found at
+https://www.syncfusion.com/content/downloads/syncfusion_license.pdf
diff --git a/typescript/pdf-stamp-annotations/package.json b/typescript/pdf-stamp-annotations/package.json
new file mode 100644
index 0000000..d0dbef6
--- /dev/null
+++ b/typescript/pdf-stamp-annotations/package.json
@@ -0,0 +1,38 @@
+{
+ "name": "ej2-quickstart",
+ "version": "0.0.1",
+ "description": "Essential JS 2 typescript quick start application",
+ "author": "Syncfusion Inc.",
+ "license": "SEE LICENSE IN license",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/syncfusion/ej2-quickstart.git"
+ },
+ "scripts": {
+ "start": "webpack serve --mode development",
+ "build": "webpack --mode production",
+ "serve": "gulp e2e-serve",
+ "test": "gulp e2e-test",
+ "update-webdriver": "gulp e2e-webdriver-update"
+ },
+ "devDependencies": {
+ "ajv": "^8.11.2",
+ "browser-sync": "^2.18.12",
+ "css-loader": "^6.7.2",
+ "gulp": "*",
+ "gulp-protractor": "*",
+ "gulp-typescript": "*",
+ "html-webpack-plugin": "^5.5.0",
+ "jasmine": "^2.6.0",
+ "mini-css-extract-plugin": "^2.7.0",
+ "ts-loader": "9.6.1",
+ "typescript": "*",
+ "webpack": "^5.75.0",
+ "webpack-cli": "^5.0.0",
+ "webpack-dev-server": "^5.2.1",
+ "webpack-stream": "^7.0.0"
+ },
+ "dependencies": {
+ "@syncfusion/ej2": "*"
+ }
+}
diff --git a/typescript/pdf-stamp-annotations/src/app/app.ts b/typescript/pdf-stamp-annotations/src/app/app.ts
new file mode 100644
index 0000000..fe1ce5c
--- /dev/null
+++ b/typescript/pdf-stamp-annotations/src/app/app.ts
@@ -0,0 +1,59 @@
+import { Button } from '@syncfusion/ej2-buttons';
+import { PdfDocument, PdfPage, PdfBitmap, PdfImage, PdfRubberStampAnnotation } from '@syncfusion/ej2-pdf';
+
+// Create and render the button in the UI.
+const stampBtn = new Button({ cssClass: `e-primary` });
+stampBtn.appendTo('#stampBtn');
+// Attach the click event to generate the PDF with a rubber stamp annotation.
+stampBtn.element.onclick = modifyAnnotations;
+async function modifyAnnotations(): Promise {
+ // Read Base64 image data from image file
+ let base64: string = await readFromUrl('https://cdn.syncfusion.com/content/pdf-resources/xamarin-jpeg.jpg');
+ // Create a new PDF document.
+ const document: PdfDocument = new PdfDocument();
+ // Add a new page to the PDF document.
+ const page: PdfPage = document.addPage();
+ // Create a rubber stamp annotation and define its position and size.
+ const annotation: PdfRubberStampAnnotation =
+ new PdfRubberStampAnnotation({
+ x: 50, // Horizontal position
+ y: 100, // Vertical position
+ width: 100,
+ height: 75
+ });
+ // Create an image object from the Base64-encoded JPEG data.
+ const image: PdfImage = new PdfBitmap(base64);
+ // Draw the image onto the annotation's normal appearance template.
+ // This image will be displayed as the visual content of the stamp.
+ annotation.appearance.normal.graphics.drawImage(image, {
+ x: 0,
+ y: 0,
+ width: 100,
+ height: 75
+ });
+ // Add the rubber stamp annotation to the page.
+ page.annotations.add(annotation);
+ // Save the PDF document and download it as "StampAnnotations.pdf".
+ document.save('StampAnnotation.pdf');
+ // Release all resources associated with the document.
+ document.destroy();
+}
+
+/**
+ * Read image file
+ * @param {string} url
+ * @returns {Promise}
+ */
+async function readFromUrl(url) {
+ const response = await fetch(url);
+ if (!response.ok) {
+ throw new Error(
+ `Failed to fetch ${url}: ${response.status} ${response.statusText}`
+ );
+ }
+ const buffer = await response.arrayBuffer();
+ return btoa(
+ new Uint8Array(buffer)
+ .reduce((data, byte) => data + String.fromCharCode(byte), '')
+ );
+}
\ No newline at end of file
diff --git a/typescript/pdf-stamp-annotations/src/index.html b/typescript/pdf-stamp-annotations/src/index.html
new file mode 100644
index 0000000..f9d41ff
--- /dev/null
+++ b/typescript/pdf-stamp-annotations/src/index.html
@@ -0,0 +1,13 @@
+
+
+
+ Create Stamp Annotations in PDF
+
+
+
+
+
Create Stamp Annotations in PDF
+
+
+
+
\ No newline at end of file
diff --git a/typescript/pdf-stamp-annotations/src/resources/favicon.ico b/typescript/pdf-stamp-annotations/src/resources/favicon.ico
new file mode 100644
index 0000000..d8d5c15
Binary files /dev/null and b/typescript/pdf-stamp-annotations/src/resources/favicon.ico differ
diff --git a/typescript/pdf-stamp-annotations/src/styles/styles.css b/typescript/pdf-stamp-annotations/src/styles/styles.css
new file mode 100644
index 0000000..0da413e
--- /dev/null
+++ b/typescript/pdf-stamp-annotations/src/styles/styles.css
@@ -0,0 +1 @@
+@import '../../node_modules/@syncfusion/ej2/material.css';
\ No newline at end of file
diff --git a/typescript/pdf-stamp-annotations/tsconfig.json b/typescript/pdf-stamp-annotations/tsconfig.json
new file mode 100644
index 0000000..3292391
--- /dev/null
+++ b/typescript/pdf-stamp-annotations/tsconfig.json
@@ -0,0 +1,12 @@
+{
+ "compilerOptions": {
+ "target": "es2016",
+ "module": "ES6",
+ "sourceMap": true,
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true,
+ "strict": true,
+ "skipLibCheck": true,
+ "moduleResolution": "bundler"
+ }
+}
diff --git a/typescript/pdf-stamp-annotations/webpack.config.js b/typescript/pdf-stamp-annotations/webpack.config.js
new file mode 100644
index 0000000..8a2b060
--- /dev/null
+++ b/typescript/pdf-stamp-annotations/webpack.config.js
@@ -0,0 +1,45 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require('path');
+
+module.exports = {
+ entry: ['./src/app/app.ts', './src/styles/styles.css'],
+ module: {
+ rules: [
+ {
+ test: /\.ts?$/,
+ use: 'ts-loader',
+ exclude: /node_modules/,
+ },
+ {
+ test: /\.css$/,
+ use: [ MiniCssExtractPlugin.loader, "css-loader" ]
+ },
+ ],
+ },
+ resolve: {
+ extensions: ['.ts', '.js'],
+ },
+ output: {
+ filename: 'bundle.js',
+ path: path.resolve(__dirname, 'dist'),
+ },
+ plugins: [
+ new HtmlWebpackPlugin({
+ template: 'src/index.html'
+ }),
+ new MiniCssExtractPlugin({
+ filename: "bundle.css"
+ })
+ ],
+ devServer: {
+ static: {
+ directory: path.join(__dirname, "dist"),
+ },
+ compress: true,
+ port: 4000,
+ open: true,
+ hot: true,
+ historyApiFallback: true
+ },
+};
diff --git a/typescript/pdf-unicode-text/.github/workflows/gitleaks.yaml b/typescript/pdf-unicode-text/.github/workflows/gitleaks.yaml
new file mode 100644
index 0000000..9ae62e1
--- /dev/null
+++ b/typescript/pdf-unicode-text/.github/workflows/gitleaks.yaml
@@ -0,0 +1,44 @@
+name: Secret Value found!!
+on:
+ push:
+ public:
+jobs:
+ scan:
+ name: gitleaks
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v4.2.2
+ - name: Install the gitleaks
+ run: wget https://github.com/zricethezav/gitleaks/releases/download/v8.15.2/gitleaks_8.15.2_linux_x64.tar.gz
+ shell: pwsh
+ - name: Extract the tar file
+ run: tar xzvf gitleaks_8.15.2_linux_x64.tar.gz
+ - name: Generate the report
+ id: gitleaks
+ run: $GITHUB_WORKSPACE/gitleaks detect -s $GITHUB_WORKSPACE -f json -r $GITHUB_WORKSPACE/leaksreport.json
+ shell: bash
+ continue-on-error: true
+ - name: Setup NuGet.exe
+ if: steps.gitleaks.outcome != 'success'
+ uses: nuget/setup-nuget@v2
+ with:
+ nuget-version: latest
+ - name: Install Mono
+ if: steps.gitleaks.outcome != 'success'
+ run: |
+ sudo apt update
+ sudo apt install -y mono-complete
+ - name: Install the dotnet SDK to a custom directory
+ if: steps.gitleaks.outcome != 'success'
+ run: |
+ mkdir -p $GITHUB_WORKSPACE/dotnet
+ curl -sSL https://dot.net/v1/dotnet-install.sh | bash /dev/stdin --install-dir $GITHUB_WORKSPACE/dotnet --channel 6.0
+ - name: Install the report tool packages
+ if: steps.gitleaks.outcome != 'success'
+ run: |
+ export PATH=$GITHUB_WORKSPACE/dotnet:$PATH
+ nuget install "Syncfusion.Email" -source ${{ secrets.NexusFeedLink }} -ExcludeVersion
+ dir $GITHUB_WORKSPACE/Syncfusion.Email/lib/net6.0
+ dotnet $GITHUB_WORKSPACE/Syncfusion.Email/lib/net6.0/GitleaksReportMail.dll ${{ secrets.CITEAMCREDENTIALS }} "$GITHUB_REF_NAME" ${{ secrets.NETWORKCREDENTIALS }} ${{ secrets.NETWORKKEY }} "$GITHUB_WORKSPACE" ${{ secrets.ORGANIZATIONNAME }}
+ exit 1
\ No newline at end of file
diff --git a/typescript/pdf-unicode-text/.gitignore b/typescript/pdf-unicode-text/.gitignore
new file mode 100644
index 0000000..1eae0cf
--- /dev/null
+++ b/typescript/pdf-unicode-text/.gitignore
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/typescript/pdf-unicode-text/README.md b/typescript/pdf-unicode-text/README.md
new file mode 100644
index 0000000..e78d3da
--- /dev/null
+++ b/typescript/pdf-unicode-text/README.md
@@ -0,0 +1,43 @@
+# How to Render Unicode Text in PDF in TypeScript
+
+This project is a complete working application to render unicode text in a PDF document using TypeScript.
+
+## Getting Started
+
+To get started you need to clone the `pdf-unicode-text` repository and navigate to `pdf-unicode-text` location.
+
+```
+git clone https://github.com/SyncfusionExamples/javascript-pdf-examples.git pdf-unicode-text
+cd pdf-unicode-text
+```
+
+## Installing
+
+We can get all the Essential JS 2 components in a single npm package [`ej2`](https://www.npmjs.com/package/@syncfusion/ej2).
+
+We already configure the required packages in the `package.json` file.
+
+You can run the below command to install all dependent packages related to this seed project.
+
+```
+npm install @syncfusion/ej2-pdf
+```
+
+## Running
+
+The application is configured with [webpack-dev-server](https://webpack.js.org/configuration/dev-server/#devserver), so it will serve the web application in your default browser.
+
+We have used [Webpack](https://github.com/webpack/webpack) for module loading.
+
+You can use the below npm script to run the web application.
+
+```
+npm run start
+```
+
+## Resources
+
+You can also refer the below resources to know more details about Javascript PDF Library.
+
+* [JavaScript PDF Library Demos](https://document.syncfusion.com/demos/pdf/javascript/#/tailwind3/pdf/default.html)
+* [JavaScript PDF Library Documentation](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/overview)
\ No newline at end of file
diff --git a/typescript/pdf-unicode-text/e2e/index.spec.js b/typescript/pdf-unicode-text/e2e/index.spec.js
new file mode 100644
index 0000000..e69de29
diff --git a/typescript/pdf-unicode-text/e2e/protractor.conf.js b/typescript/pdf-unicode-text/e2e/protractor.conf.js
new file mode 100644
index 0000000..43eee1b
--- /dev/null
+++ b/typescript/pdf-unicode-text/e2e/protractor.conf.js
@@ -0,0 +1,21 @@
+exports.config = {
+
+ allScriptsTimeout: 11000,
+
+ capabilities: {
+ 'browserName': 'chrome'
+ },
+
+ framework: 'jasmine',
+
+ jasmineNodeOpts: {
+ defaultTimeoutInterval: 10000
+ },
+ directConnect: true,
+
+ onPrepare: function() {
+ browser.waitForAngularEnabled(false);
+ },
+
+ specs: ['./*.spec.js']
+};
\ No newline at end of file
diff --git a/typescript/pdf-unicode-text/gulpfile.js b/typescript/pdf-unicode-text/gulpfile.js
new file mode 100644
index 0000000..6a623f3
--- /dev/null
+++ b/typescript/pdf-unicode-text/gulpfile.js
@@ -0,0 +1,62 @@
+'use strict';
+
+var gulp = require('gulp');
+
+/**
+ * Compile TypeScript to JS
+ */
+gulp.task('compile', function (done) {
+ var webpack = require('webpack');
+ var webpackStream = require('webpack-stream');
+ gulp.src(['./src/app/app.ts']).pipe(webpackStream({
+ config: require('./webpack.config.js')
+ }, webpack))
+ .pipe(gulp.dest('./dist'))
+ .on('end', function () {
+ done();
+ });
+});
+
+/**
+ * Testing spec files
+ */
+var protractor = require('gulp-protractor').protractor;
+var webdriver_standalone = require('gulp-protractor').webdriver_standalone;
+var webdriver_update = require('gulp-protractor').webdriver_update_specific;
+
+gulp.task('e2e-serve', webdriver_standalone);
+
+gulp.task('e2e-webdriver-update', webdriver_update({
+ webdriverManagerArgs: ['--ie', '--edge']
+}));
+
+gulp.task('e2e-test', gulp.series('compile', function (done) {
+ var browserSync = require('browser-sync');
+ var bs = browserSync.create('Essential JS 2');
+ var options = {
+ server: {
+ baseDir: [
+ './dist/',
+ ],
+ directory: true
+ },
+ ui: false,
+ open: false,
+ notify: false
+ };
+ bs.init(options, function () {
+ gulp.src(['./spec/**/*.spec.js'])
+ .pipe(protractor({
+ configFile: 'e2e/protractor.conf.js'
+ }))
+ .on('error', function (e) {
+ console.error('Error: ' + e.message);
+ done();
+ process.exit(1);
+ })
+ .on('end', function () {
+ done();
+ process.exit(0);
+ });
+ });
+}));
\ No newline at end of file
diff --git a/typescript/pdf-unicode-text/license b/typescript/pdf-unicode-text/license
new file mode 100644
index 0000000..111c12a
--- /dev/null
+++ b/typescript/pdf-unicode-text/license
@@ -0,0 +1,10 @@
+Essential JS 2 library is available under the Syncfusion Essential Studio program, and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
+
+To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions.
+
+Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
+
+Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions.
+
+The Syncfusion license that contains the terms and conditions can be found at
+https://www.syncfusion.com/content/downloads/syncfusion_license.pdf
diff --git a/typescript/pdf-unicode-text/package.json b/typescript/pdf-unicode-text/package.json
new file mode 100644
index 0000000..0029608
--- /dev/null
+++ b/typescript/pdf-unicode-text/package.json
@@ -0,0 +1,39 @@
+{
+ "name": "ej2-quickstart",
+ "version": "0.0.1",
+ "description": "Essential JS 2 typescript quick start application",
+ "author": "Syncfusion Inc.",
+ "license": "SEE LICENSE IN license",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/syncfusion/ej2-quickstart.git"
+ },
+ "scripts": {
+ "start": "webpack serve --mode development",
+ "build": "webpack --mode production",
+ "serve": "gulp e2e-serve",
+ "test": "gulp e2e-test",
+ "update-webdriver": "gulp e2e-webdriver-update"
+ },
+ "devDependencies": {
+ "@types/node": "^26.1.1",
+ "ajv": "^8.11.2",
+ "browser-sync": "^2.18.12",
+ "css-loader": "^6.7.2",
+ "gulp": "*",
+ "gulp-protractor": "*",
+ "gulp-typescript": "*",
+ "html-webpack-plugin": "^5.5.0",
+ "jasmine": "^2.6.0",
+ "mini-css-extract-plugin": "^2.7.0",
+ "ts-loader": "^9.5.1",
+ "typescript": "5.4.5",
+ "webpack": "^5.75.0",
+ "webpack-cli": "^5.0.0",
+ "webpack-dev-server": "^5.2.1",
+ "webpack-stream": "^7.0.0"
+ },
+ "dependencies": {
+ "@syncfusion/ej2": "*"
+ }
+}
diff --git a/typescript/pdf-unicode-text/src/app/app.ts b/typescript/pdf-unicode-text/src/app/app.ts
new file mode 100644
index 0000000..5b89788
--- /dev/null
+++ b/typescript/pdf-unicode-text/src/app/app.ts
@@ -0,0 +1,37 @@
+import { Button } from "@syncfusion/ej2-buttons";
+import { PdfBrush, PdfDocument, PdfGraphics, PdfPage, PdfTrueTypeFont } from '@syncfusion/ej2-pdf';
+
+let button: Button = new Button({ cssClass: `e-primary` });
+button.appendTo('#unicodeText');
+// Font URLs
+var inputData = 'https://cdn.syncfusion.com/content/pdf-resources/noto-naskh-arabic-regular.ttf';
+button.element.onclick = async (): Promise => {
+ // Load the TrueType font as a byte array
+ const arabicFontBytes = await fetchAsUint8Array(inputData);
+ // Create a new PDF document and add a page
+ const document: PdfDocument = new PdfDocument();
+ const page: PdfPage = document.addPage();
+ const graphics: PdfGraphics = page.graphics;
+ // Create a Unicode-supported font
+ const font: PdfTrueTypeFont = new PdfTrueTypeFont(arabicFontBytes, 14);
+ // Define the Unicode text to be displayed
+ const text: string = "中文 العربية Ελληνικά 日本語 - Sample Unicode Text";
+ // Draw the Unicode text on the PDF page
+ graphics.drawString(text, font, { x: 200, y: 50, width: 300, height: 100 }, new PdfBrush({ r: 126, g: 70, b: 19 }));
+ // Save the PDF document
+ document.save("UnicodeText.pdf");
+ // Dispose of document resources
+ document.destroy();
+};
+
+// Helper: fetch font as Uint8Array
+function fetchAsUint8Array(url: string): Promise {
+ return fetch(url, { cache: 'no-cache' })
+ .then(function (res) {
+ if (!res.ok) throw new Error("Failed to fetch " + url + ": " + res.status + " " + res.statusText);
+ return res.arrayBuffer();
+ })
+ .then(function (buf) {
+ return new Uint8Array(buf);
+ });
+}
\ No newline at end of file
diff --git a/typescript/pdf-unicode-text/src/index.html b/typescript/pdf-unicode-text/src/index.html
new file mode 100644
index 0000000..d40e9e9
--- /dev/null
+++ b/typescript/pdf-unicode-text/src/index.html
@@ -0,0 +1,12 @@
+
+
+
+ Render Unicode Text
+
+
+
+