+
+
+ Redaction in JavaScript PDF Library
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/angular/redaction/src/app/app.routes.ts b/angular/redaction/src/app/app.routes.ts
new file mode 100644
index 0000000..dc39edb
--- /dev/null
+++ b/angular/redaction/src/app/app.routes.ts
@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];
diff --git a/angular/redaction/src/app/app.spec.ts b/angular/redaction/src/app/app.spec.ts
new file mode 100644
index 0000000..ebec8e4
--- /dev/null
+++ b/angular/redaction/src/app/app.spec.ts
@@ -0,0 +1,24 @@
+import { TestBed } from '@angular/core/testing';
+import { App } from './app';
+
+describe('App', () => {
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [App],
+ })
+ .compileComponents();
+ });
+
+ it('should create the app', () => {
+ const fixture = TestBed.createComponent(App);
+ const app = fixture.componentInstance;
+ expect(app).toBeTruthy();
+ });
+
+ it('should render title', async () => {
+ const fixture = TestBed.createComponent(App);
+ await fixture.whenStable();
+ const compiled = fixture.nativeElement as HTMLElement;
+ expect(compiled.querySelector('h1')?.textContent).toContain('Hello, redaction');
+ });
+});
diff --git a/angular/redaction/src/app/app.ts b/angular/redaction/src/app/app.ts
new file mode 100644
index 0000000..9d76a0d
--- /dev/null
+++ b/angular/redaction/src/app/app.ts
@@ -0,0 +1,200 @@
+import { Component, } from '@angular/core';
+import {
+ PdfBrush, PdfDocument, PdfFontFamily, PdfFontStyle
+} from '@syncfusion/ej2-pdf';
+import {
+ PdfRedactor, PdfRedactionRegion, ApplicationPlatform
+} from '@syncfusion/ej2-pdf-data-extract';
+
+@Component({
+ selector: 'app-root',
+ styleUrl: './app.css',
+ templateUrl: './app.html',
+})
+export class App {
+
+ // URL of the input PDF document
+ private readonly documentUrl =
+ 'https://cdn.syncfusion.com/content/pdf-resources/credit_card_statement.pdf';
+
+ // Stores the PDF document as a byte array
+ private documentBytes!: Uint8Array;
+
+ // Load the PDF document when the component initializes
+ async ngOnInit(): Promise
{
+ this.documentBytes = await this.getInputBytes(this.documentUrl);
+ }
+
+ /**
+ * Redact content from a specified region in the PDF document
+ */
+ async redactContent(): Promise {
+
+ // Load the PDF document from the byte array
+ let pdfdocument: PdfDocument = new PdfDocument(this.documentBytes);
+
+ // Create a PDF redactor instance
+ let redactor: PdfRedactor = new PdfRedactor(pdfdocument);
+
+ // Create a collection to hold redaction regions
+ let redactions: PdfRedactionRegion[] = [];
+
+ // Define the area to be redacted on the first page
+ let redaction: PdfRedactionRegion = new PdfRedactionRegion(
+ 0,
+ { x: 70, y: 120, width: 200, height: 80 }
+ );
+
+ // Add the redaction region to the collection
+ redactions.push(redaction);
+
+ // Add all redaction regions to the redactor
+ redactor.add(redactions);
+
+ // Create a canvas callback required for the redaction process
+ const canvasRenderCallback = (): {
+ canvas: any,
+ applicationPlatform: ApplicationPlatform
+ } => {
+
+ // Create an HTML canvas element
+ const canvas = document.createElement('canvas');
+
+ // Return the canvas and platform information
+ return { canvas: canvas, applicationPlatform: ApplicationPlatform.typescript };
+ };
+
+ // Apply the redaction to the PDF document
+ await redactor.redact(canvasRenderCallback);
+
+ // Save the redacted PDF document
+ pdfdocument.save('output.pdf');
+
+ // Release resources used by the PDF document
+ pdfdocument.destroy();
+ }
+
+ /**
+ * Apply a fill color to the redacted area
+ */
+ async applyRedactionFillColor(): Promise {
+
+ // Load the PDF document from the byte array
+ let pdfdocument: PdfDocument = new PdfDocument(this.documentBytes);
+
+ // Create a PdfRedactor instance
+ let redactor: PdfRedactor = new PdfRedactor(pdfdocument);
+
+ // Create a collection for redaction regions
+ let redactions: PdfRedactionRegion[] = [];
+
+ // Define the redaction region
+ let redaction: PdfRedactionRegion = new PdfRedactionRegion(
+ 0,
+ { x: 70, y: 120, width: 200, height: 80 }
+ );
+
+ // Set the fill color of the redacted area
+ redaction.fillColor = { r: 0, g: 0, b: 0 };
+
+ // Add the redaction region to the collection
+ redactions.push(redaction);
+
+ // Add the redaction region to the redactor
+ redactor.add(redactions);
+
+ // Create a canvas callback
+ const canvasRenderCallback = (): {
+ canvas: any,
+ applicationPlatform: ApplicationPlatform
+ } => {
+
+ // Create a canvas element
+ const canvas = document.createElement('canvas');
+
+ // Return the canvas and platform details
+ return { canvas: canvas, applicationPlatform: ApplicationPlatform.typescript };
+ };
+
+ // Apply the redaction with the fill color
+ await redactor.redact(canvasRenderCallback);
+
+ // Save the output PDF document
+ pdfdocument.save('output.pdf');
+
+ // Release resources used by the PDF document
+ pdfdocument.destroy();
+ }
+
+ /**
+ * Customize the text appearance within the redacted area
+ */
+ async customizeTextAppearance(): Promise {
+
+ // Load the PDF document from the byte array
+ let pdfdocument: PdfDocument = new PdfDocument(this.documentBytes);
+
+ // Create a PdfRedactor instance
+ let redactor: PdfRedactor = new PdfRedactor(pdfdocument);
+
+ // Create a collection for redaction regions
+ let redactions: PdfRedactionRegion[] = [];
+
+ // Create a redaction region with appearance customization enabled
+ let redaction: PdfRedactionRegion = new PdfRedactionRegion(
+ 0,
+ { x: 70, y: 120, width: 200, height: 80 },
+ true
+ );
+
+ // Embed a Helvetica font
+ let font = pdfdocument.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+
+ // Draw custom text in the redacted area
+ redaction.appearance.normal.graphics.drawString(
+ 'Redacted Text',
+ font,
+ { x: 30, y: 40, width: 80, height: 20 },
+ new PdfBrush({ r: 0, g: 0, b: 0 })
+ );
+
+ // Add the redaction region to the collection
+ redactions.push(redaction);
+
+ // Add the redaction regions to the redactor
+ redactor.add(redactions);
+
+ // Create a canvas callback
+ const canvasRenderCallback = (): {
+ canvas: any,
+ applicationPlatform: ApplicationPlatform
+ } => {
+ // Create a canvas element
+ const canvas = document.createElement('canvas');
+ // Return the canvas and platform information
+ return { canvas: canvas, applicationPlatform: ApplicationPlatform.typescript };
+ };
+
+ // Apply the customized redaction
+ await redactor.redact(canvasRenderCallback);
+
+ // Save the output PDF document
+ pdfdocument.save('output.pdf');
+
+ // Release resources used by the PDF document
+ pdfdocument.destroy();
+ }
+
+ /**
+ * Retrieves a PDF document from the specified URL
+ * and returns its content as a Uint8Array
+ */
+ private async getInputBytes(url: string): Promise {
+
+ // Send a request to retrieve the PDF document
+ const response = await fetch(url);
+
+ // Convert the response content to a Uint8Array
+ return new Uint8Array(await response.arrayBuffer());
+ }
+}
diff --git a/angular/redaction/src/index.html b/angular/redaction/src/index.html
new file mode 100644
index 0000000..5c4b0ca
--- /dev/null
+++ b/angular/redaction/src/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+ Redaction
+
+
+
+
+
+
+
+
diff --git a/angular/redaction/src/main.ts b/angular/redaction/src/main.ts
new file mode 100644
index 0000000..2c8e698
--- /dev/null
+++ b/angular/redaction/src/main.ts
@@ -0,0 +1,8 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { App } from './app/app';
+import { registerLicense } from '@syncfusion/ej2-base';
+registerLicense('Your-License-Key');
+
+bootstrapApplication(App, appConfig)
+ .catch((err) => console.error(err));
diff --git a/angular/redaction/src/styles.css b/angular/redaction/src/styles.css
new file mode 100644
index 0000000..90d4ee0
--- /dev/null
+++ b/angular/redaction/src/styles.css
@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */
diff --git a/angular/redaction/tsconfig.app.json b/angular/redaction/tsconfig.app.json
new file mode 100644
index 0000000..cb151e1
--- /dev/null
+++ b/angular/redaction/tsconfig.app.json
@@ -0,0 +1,14 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "types": []
+ },
+ "include": [
+ "src/**/*.ts"
+ ],
+ "exclude": [
+ "src/**/*.spec.ts"
+ ]
+}
diff --git a/angular/redaction/tsconfig.json b/angular/redaction/tsconfig.json
new file mode 100644
index 0000000..d2fbb9c
--- /dev/null
+++ b/angular/redaction/tsconfig.json
@@ -0,0 +1,31 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+ "compileOnSave": false,
+ "compilerOptions": {
+ "noImplicitOverride": true,
+ "noPropertyAccessFromIndexSignature": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true,
+ "skipLibCheck": true,
+ "isolatedModules": true,
+ "experimentalDecorators": true,
+ "importHelpers": true,
+ "target": "ES2022",
+ "module": "preserve"
+ },
+ "angularCompilerOptions": {
+ "enableI18nLegacyMessageIdFormat": false,
+ "strictInjectionParameters": true,
+ "strictInputAccessModifiers": true
+ },
+ "files": [],
+ "references": [
+ {
+ "path": "./tsconfig.app.json"
+ },
+ {
+ "path": "./tsconfig.spec.json"
+ }
+ ]
+}
diff --git a/angular/redaction/tsconfig.spec.json b/angular/redaction/tsconfig.spec.json
new file mode 100644
index 0000000..9c8efb9
--- /dev/null
+++ b/angular/redaction/tsconfig.spec.json
@@ -0,0 +1,14 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "types": [
+ "vitest/globals"
+ ]
+ },
+ "include": [
+ "src/**/*.d.ts",
+ "src/**/*.spec.ts"
+ ]
+}
diff --git a/angular/split-pdf/.editorconfig b/angular/split-pdf/.editorconfig
new file mode 100644
index 0000000..f166060
--- /dev/null
+++ b/angular/split-pdf/.editorconfig
@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/angular/split-pdf/.gitignore b/angular/split-pdf/.gitignore
new file mode 100644
index 0000000..854acd5
--- /dev/null
+++ b/angular/split-pdf/.gitignore
@@ -0,0 +1,44 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/mcp.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+__screenshots__/
+
+# System files
+.DS_Store
+Thumbs.db
diff --git a/angular/split-pdf/.prettierrc b/angular/split-pdf/.prettierrc
new file mode 100644
index 0000000..d6c16d7
--- /dev/null
+++ b/angular/split-pdf/.prettierrc
@@ -0,0 +1,12 @@
+{
+ "printWidth": 100,
+ "singleQuote": true,
+ "overrides": [
+ {
+ "files": "*.html",
+ "options": {
+ "parser": "angular"
+ }
+ }
+ ]
+}
diff --git a/angular/split-pdf/README.md b/angular/split-pdf/README.md
new file mode 100644
index 0000000..4aff67e
--- /dev/null
+++ b/angular/split-pdf/README.md
@@ -0,0 +1,117 @@
+# How to Split a PDF Document in the JavaScript PDF Library
+
+This sample demonstrates how to split a PDF document using the `Syncfusion JavaScript PDF Library`.
+
+## Features Demonstrated
+
+This sample shows how to:
+
+- Load an existing PDF document from a URL.
+- Split a PDF document into individual pages.
+- Split a PDF document by specified page ranges.
+- Split a PDF document into smaller documents with a fixed number of pages.
+- Save and download the generated PDF documents.
+- Handle split operations using the document split event.
+- Release resources after processing the PDF document.
+
+## Project Structure
+
+### app.ts
+
+The `splitIntoIndividualPages()` method performs the following operations:
+
+- Loads the input PDF document.
+- Splits the document into individual pages.
+- Generates a separate PDF document for each page.
+- Downloads each generated PDF file.
+- Releases resources by destroying the PDF document instance.
+
+The `splitPageRange()` method performs the following operations:
+
+- Loads the input PDF document.
+- Splits the document based on the specified page ranges.
+- Creates a separate PDF document for each page range.
+- Downloads the generated PDF files.
+- Releases resources after processing.
+
+The `splitFixedNumber()` method performs the following operations:
+
+- Loads the input PDF document.
+- Splits the document into smaller PDF documents containing a fixed number of pages.
+- Downloads each generated PDF file.
+- Releases resources after processing.
+
+The `documentSplitEvent()` event handler:
+
+- Receives the generated PDF document data.
+- Converts the document data to a `Uint8Array`.
+- Creates a Blob object from the PDF data.
+- Downloads the generated PDF document.
+
+The `getInputBytes()` helper method:
+
+- Downloads the PDF document from the specified URL.
+- Converts the document to a `Uint8Array`.
+- Returns the PDF data for further processing.
+
+### app.html
+
+The user interface includes:
+
+- A **Split into Individual Pages** button.
+- A **Split by Page Range** button.
+- A **Split by Fixed Number** button.
+- A simple layout to trigger the split operations.
+
+When a button is clicked, the application performs the selected split operation and downloads the generated PDF files.
+
+## Prerequisites
+
+Ensure the following software is installed:
+
+- Node.js
+- Angular CLI
+
+## Installation
+
+Install the Syncfusion JavaScript PDF Library package:
+
+```bash
+npm install @syncfusion/ej2-pdf
+```
+
+## Running the Application
+
+Install the project dependencies:
+
+```bash
+npm install
+```
+
+Start the Angular development server:
+
+```bash
+ng serve
+```
+
+Then open:
+
+```text
+http://localhost:4200/
+```
+
+Use one of the available buttons to perform the desired split operation. The generated PDF documents will be downloaded automatically.
+
+## Additional Resources
+
+### Documentation
+
+[JavaScript PDF Library Documentation](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/split-documents)
+
+### Online Demos
+
+[JavaScript PDF Library Demos](https://document.syncfusion.com/demos/pdf/angular/#/tailwind3/pdf/split-pdf)
+
+### Product Page
+
+[JavaScript PDF Library Product Page](https://www.syncfusion.com/document-sdk/javascript-pdf-library)
\ No newline at end of file
diff --git a/angular/split-pdf/angular.json b/angular/split-pdf/angular.json
new file mode 100644
index 0000000..6bb8b38
--- /dev/null
+++ b/angular/split-pdf/angular.json
@@ -0,0 +1,74 @@
+{
+ "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+ "version": 1,
+ "cli": {
+ "packageManager": "npm",
+ "analytics": "b11d304c-687a-4245-88b2-1afb5c1c7af5"
+ },
+ "newProjectRoot": "projects",
+ "projects": {
+ "split-pdf": {
+ "projectType": "application",
+ "schematics": {},
+ "root": "",
+ "sourceRoot": "src",
+ "prefix": "app",
+ "architect": {
+ "build": {
+ "builder": "@angular/build:application",
+ "options": {
+ "browser": "src/main.ts",
+ "tsConfig": "tsconfig.app.json",
+ "assets": [
+ {
+ "glob": "**/*",
+ "input": "public"
+ }
+ ],
+ "styles": [
+ "src/styles.css"
+ ]
+ },
+ "configurations": {
+ "production": {
+ "budgets": [
+ {
+ "type": "initial",
+ "maximumWarning": "500kB",
+ "maximumError": "1MB"
+ },
+ {
+ "type": "anyComponentStyle",
+ "maximumWarning": "4kB",
+ "maximumError": "8kB"
+ }
+ ],
+ "outputHashing": "all"
+ },
+ "development": {
+ "optimization": false,
+ "extractLicenses": false,
+ "sourceMap": true
+ }
+ },
+ "defaultConfiguration": "production"
+ },
+ "serve": {
+ "builder": "@angular/build:dev-server",
+ "configurations": {
+ "production": {
+ "buildTarget": "split-pdf:build:production"
+ },
+ "development": {
+ "buildTarget": "split-pdf:build:development"
+ }
+ },
+ "defaultConfiguration": "development"
+ },
+ "test": {
+ "builder": "@angular/build:unit-test"
+ }
+ }
+ }
+ }
+}
diff --git a/angular/split-pdf/package.json b/angular/split-pdf/package.json
new file mode 100644
index 0000000..0f18515
--- /dev/null
+++ b/angular/split-pdf/package.json
@@ -0,0 +1,33 @@
+{
+ "name": "split-pdf",
+ "version": "0.0.0",
+ "scripts": {
+ "ng": "ng",
+ "start": "ng serve",
+ "build": "ng build",
+ "watch": "ng build --watch --configuration development",
+ "test": "ng test"
+ },
+ "private": true,
+ "packageManager": "npm@11.19.0",
+ "dependencies": {
+ "@angular/common": "^22.1.0",
+ "@angular/compiler": "^22.1.0",
+ "@angular/core": "^22.1.0",
+ "@angular/forms": "^22.1.0",
+ "@angular/platform-browser": "^22.1.0",
+ "@angular/router": "^22.1.0",
+ "@syncfusion/ej2-pdf": "*",
+ "rxjs": "~7.8.0",
+ "tslib": "^2.3.0"
+ },
+ "devDependencies": {
+ "@angular/build": "^22.1.6",
+ "@angular/cli": "^22.1.6",
+ "@angular/compiler-cli": "^22.1.0",
+ "jsdom": "^28.0.0",
+ "prettier": "^3.8.1",
+ "typescript": "~6.0.2",
+ "vitest": "^4.0.8"
+ }
+}
diff --git a/angular/split-pdf/public/favicon.ico b/angular/split-pdf/public/favicon.ico
new file mode 100644
index 0000000..57614f9
Binary files /dev/null and b/angular/split-pdf/public/favicon.ico differ
diff --git a/angular/split-pdf/src/app/app.config.ts b/angular/split-pdf/src/app/app.config.ts
new file mode 100644
index 0000000..e60fc79
--- /dev/null
+++ b/angular/split-pdf/src/app/app.config.ts
@@ -0,0 +1,10 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+ providers: [
+ provideBrowserGlobalErrorListeners(),
+ provideRouter(routes)
+ ]
+};
diff --git a/angular/split-pdf/src/app/app.css b/angular/split-pdf/src/app/app.css
new file mode 100644
index 0000000..e69de29
diff --git a/angular/split-pdf/src/app/app.html b/angular/split-pdf/src/app/app.html
new file mode 100644
index 0000000..c861114
--- /dev/null
+++ b/angular/split-pdf/src/app/app.html
@@ -0,0 +1,70 @@
+
+
+
+ Split PDF Documents
+
+
+
+
+
+
+
+
+
+
+
+