diff --git a/angular/individual-form-field-flatten/.editorconfig b/angular/individual-form-field-flatten/.editorconfig new file mode 100644 index 0000000..f166060 --- /dev/null +++ b/angular/individual-form-field-flatten/.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/individual-form-field-flatten/.gitignore b/angular/individual-form-field-flatten/.gitignore new file mode 100644 index 0000000..854acd5 --- /dev/null +++ b/angular/individual-form-field-flatten/.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/individual-form-field-flatten/.prettierrc b/angular/individual-form-field-flatten/.prettierrc new file mode 100644 index 0000000..d6c16d7 --- /dev/null +++ b/angular/individual-form-field-flatten/.prettierrc @@ -0,0 +1,12 @@ +{ + "printWidth": 100, + "singleQuote": true, + "overrides": [ + { + "files": "*.html", + "options": { + "parser": "angular" + } + } + ] +} diff --git a/angular/individual-form-field-flatten/README.md b/angular/individual-form-field-flatten/README.md new file mode 100644 index 0000000..b21636a --- /dev/null +++ b/angular/individual-form-field-flatten/README.md @@ -0,0 +1,96 @@ +# How to Flatten an Individual Form Field in the JavaScript PDF Library + +This sample demonstrates how to flatten an individual form field using the `Syncfusion JavaScript PDF Library`. + +## Features Demonstrated + +This sample shows how to: + +- Load an existing PDF document from a URL. +- Access the form fields of a loaded PDF document. +- Locate a specific field of the form using its index. +- Fill a text box field with sample text. +- Flatten an individual form field to remove editability. +- Save and download the generated PDF document. +- Release resources after processing the PDF document. + +## Project Structure + +### app.ts + +The `flattenIndividualFormField()` method performs the following operations: + +- Downloads the input PDF document from the specified URL. +- Loads the existing PDF document. +- Accesses the form from the loaded PDF document. +- Retrieves the individual form field to be flattened. +- Fills the text box field with sample text. +- Flattens the individual form field. +- Saves the modified PDF as `Output.pdf`. +- Releases resources by destroying the PDF document instance. + +The `getPdfAsUint8Array()` helper method: + +- Retrieves a PDF document from the specified URL. +- Converts the file into a `Uint8Array`. +- Returns the PDF data for further processing. + +### app.html + +The user interface includes: + +- A **Flatten Individual Form Field** button. +- A simple layout to trigger the flatten operation. + +When the button is clicked, the application flattens an individual form field in the PDF document and downloads the generated output file. + +## 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/ +``` + +Click **Flatten Individual Form Field** to load the form PDF, flatten the selected field, and download the output file. + +## Additional Resources + +### Documentation + +[JavaScript PDF Library Documentation](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/working-with-forms) + +### Online Demos + +[JavaScript PDF Library Demos](https://document.syncfusion.com/demos/pdf/angular/#/tailwind3/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/individual-form-field-flatten/angular.json b/angular/individual-form-field-flatten/angular.json new file mode 100644 index 0000000..7cbb833 --- /dev/null +++ b/angular/individual-form-field-flatten/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": { + "individual-form-field-flatten": { + "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": "individual-form-field-flatten:build:production" + }, + "development": { + "buildTarget": "individual-form-field-flatten:build:development" + } + }, + "defaultConfiguration": "development" + }, + "test": { + "builder": "@angular/build:unit-test" + } + } + } + } +} diff --git a/angular/individual-form-field-flatten/package.json b/angular/individual-form-field-flatten/package.json new file mode 100644 index 0000000..0ca309c --- /dev/null +++ b/angular/individual-form-field-flatten/package.json @@ -0,0 +1,33 @@ +{ + "name": "individual-form-field-flatten", + "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/individual-form-field-flatten/public/favicon.ico b/angular/individual-form-field-flatten/public/favicon.ico new file mode 100644 index 0000000..57614f9 Binary files /dev/null and b/angular/individual-form-field-flatten/public/favicon.ico differ diff --git a/angular/individual-form-field-flatten/src/app/app.config.ts b/angular/individual-form-field-flatten/src/app/app.config.ts new file mode 100644 index 0000000..e60fc79 --- /dev/null +++ b/angular/individual-form-field-flatten/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/individual-form-field-flatten/src/app/app.css b/angular/individual-form-field-flatten/src/app/app.css new file mode 100644 index 0000000..e69de29 diff --git a/angular/individual-form-field-flatten/src/app/app.html b/angular/individual-form-field-flatten/src/app/app.html new file mode 100644 index 0000000..b7dad06 --- /dev/null +++ b/angular/individual-form-field-flatten/src/app/app.html @@ -0,0 +1,44 @@ +
+
+

+ Flatten Individual Form Field +

+
+ + + +
+
+
\ No newline at end of file diff --git a/angular/individual-form-field-flatten/src/app/app.routes.ts b/angular/individual-form-field-flatten/src/app/app.routes.ts new file mode 100644 index 0000000..dc39edb --- /dev/null +++ b/angular/individual-form-field-flatten/src/app/app.routes.ts @@ -0,0 +1,3 @@ +import { Routes } from '@angular/router'; + +export const routes: Routes = []; diff --git a/angular/individual-form-field-flatten/src/app/app.spec.ts b/angular/individual-form-field-flatten/src/app/app.spec.ts new file mode 100644 index 0000000..e66afd9 --- /dev/null +++ b/angular/individual-form-field-flatten/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('h2')?.textContent).toContain('Flatten Individual Form Field'); + }); +}); diff --git a/angular/individual-form-field-flatten/src/app/app.ts b/angular/individual-form-field-flatten/src/app/app.ts new file mode 100644 index 0000000..b534407 --- /dev/null +++ b/angular/individual-form-field-flatten/src/app/app.ts @@ -0,0 +1,63 @@ +import { Component } from '@angular/core'; +import { + PdfDocument, PdfTextBoxField +} from '@syncfusion/ej2-pdf'; + +@Component({ + selector: 'app-root', + standalone: true, + templateUrl: './app.html' +}) + +export class App { + + // URL of the form filling PDF document + private readonly formFillingDocument = + 'https://cdn.syncfusion.com/content/pdf-resources/form-filling-document.pdf'; + + /** + * Flattens an individual form field in a PDF document + */ + async flattenIndividualFormField(): Promise { + + // Retrieve the source PDF document as a byte array + const documentBytes = await this.getPdfAsUint8Array(this.formFillingDocument); + + // Load an existing PDF document + const document = new PdfDocument(documentBytes); + + // Get the form from the loaded PDF document + const form = document.form; + + // Retrieve the individual form field to be flattened + const field = form.fieldAt(0) as PdfTextBoxField; + if (field instanceof PdfTextBoxField) { + + // Fill the text box field with the required text + field.text = '01/01/2000'; + + // Flatten the individual form field + field.flatten = true; + } + + // Save the output PDF document + document.save('Output.pdf'); + + // Destroy the document to free resources + document.destroy(); + } + + /** + * Retrieves a PDF document from the specified URL + * and returns its content as a Uint8Array + */ + private async getPdfAsUint8Array(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()); + } + +} \ No newline at end of file diff --git a/angular/individual-form-field-flatten/src/index.html b/angular/individual-form-field-flatten/src/index.html new file mode 100644 index 0000000..d6d1ef6 --- /dev/null +++ b/angular/individual-form-field-flatten/src/index.html @@ -0,0 +1,13 @@ + + + + + IndividualFormFieldFlatten + + + + + + + + diff --git a/angular/individual-form-field-flatten/src/main.ts b/angular/individual-form-field-flatten/src/main.ts new file mode 100644 index 0000000..2c8e698 --- /dev/null +++ b/angular/individual-form-field-flatten/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/individual-form-field-flatten/src/styles.css b/angular/individual-form-field-flatten/src/styles.css new file mode 100644 index 0000000..90d4ee0 --- /dev/null +++ b/angular/individual-form-field-flatten/src/styles.css @@ -0,0 +1 @@ +/* You can add global styles to this file, and also import other style files */ diff --git a/angular/individual-form-field-flatten/tsconfig.app.json b/angular/individual-form-field-flatten/tsconfig.app.json new file mode 100644 index 0000000..cb151e1 --- /dev/null +++ b/angular/individual-form-field-flatten/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/individual-form-field-flatten/tsconfig.json b/angular/individual-form-field-flatten/tsconfig.json new file mode 100644 index 0000000..d2fbb9c --- /dev/null +++ b/angular/individual-form-field-flatten/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/individual-form-field-flatten/tsconfig.spec.json b/angular/individual-form-field-flatten/tsconfig.spec.json new file mode 100644 index 0000000..9c8efb9 --- /dev/null +++ b/angular/individual-form-field-flatten/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" + ] +}