diff --git a/Videos/Form Fields/.gitignore b/Videos/Form Fields/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/Videos/Form Fields/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/Videos/Form Fields/README.md b/Videos/Form Fields/README.md new file mode 100644 index 0000000..917d9b9 --- /dev/null +++ b/Videos/Form Fields/README.md @@ -0,0 +1,22 @@ +# Form Fields in PDF Viewer + +This section demonstrates how to work with form fields in a PDF document using the Syncfusion React PDF Viewer. + +Documentation: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/form-designer/create-programmatically + + +## Running the React Sample +To run the React sample + +Step 1: Open a terminal or command prompt. + +Step 2: Navigate to the root directory of the React sample. + +Step 3: Run the command npm install to install the necessary dependencies specified in the package.json file. +``` +npm install +``` +Step 4 Once the installation is complete, run npm start to start the React development server and open the PDF Viewer component in your default browser. +``` +npm start +``` diff --git a/Videos/Form Fields/eslint.config.js b/Videos/Form Fields/eslint.config.js new file mode 100644 index 0000000..4fa125d --- /dev/null +++ b/Videos/Form Fields/eslint.config.js @@ -0,0 +1,29 @@ +import js from '@eslint/js' +import globals from 'globals' +import reactHooks from 'eslint-plugin-react-hooks' +import reactRefresh from 'eslint-plugin-react-refresh' +import { defineConfig, globalIgnores } from 'eslint/config' + +export default defineConfig([ + globalIgnores(['dist']), + { + files: ['**/*.{js,jsx}'], + extends: [ + js.configs.recommended, + reactHooks.configs.flat.recommended, + reactRefresh.configs.vite, + ], + languageOptions: { + ecmaVersion: 2020, + globals: globals.browser, + parserOptions: { + ecmaVersion: 'latest', + ecmaFeatures: { jsx: true }, + sourceType: 'module', + }, + }, + rules: { + 'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }], + }, + }, +]) diff --git a/Videos/Form Fields/index.html b/Videos/Form Fields/index.html new file mode 100644 index 0000000..15352d8 --- /dev/null +++ b/Videos/Form Fields/index.html @@ -0,0 +1,13 @@ + + + + + + + pdfviewer + + +
+ + + diff --git a/Videos/Form Fields/package.json b/Videos/Form Fields/package.json new file mode 100644 index 0000000..3b5c9e9 --- /dev/null +++ b/Videos/Form Fields/package.json @@ -0,0 +1,28 @@ +{ + "name": "pdfviewer", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "lint": "eslint .", + "preview": "vite preview" + }, + "dependencies": { + "@syncfusion/ej2-react-pdfviewer": "*", + "react": "^19.2.0", + "react-dom": "^19.2.0" + }, + "devDependencies": { + "@eslint/js": "^9.39.1", + "@types/react": "^19.2.5", + "@types/react-dom": "^19.2.3", + "@vitejs/plugin-react": "^5.1.1", + "eslint": "^9.39.1", + "eslint-plugin-react-hooks": "^7.0.1", + "eslint-plugin-react-refresh": "^0.4.24", + "globals": "^16.5.0", + "vite": "^7.2.4" + } +} diff --git a/Videos/Form Fields/public/vite.svg b/Videos/Form Fields/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/Videos/Form Fields/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Videos/Form Fields/src/App.css b/Videos/Form Fields/src/App.css new file mode 100644 index 0000000..b9d355d --- /dev/null +++ b/Videos/Form Fields/src/App.css @@ -0,0 +1,42 @@ +#root { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +.logo { + height: 6em; + padding: 1.5em; + will-change: filter; + transition: filter 300ms; +} +.logo:hover { + filter: drop-shadow(0 0 2em #646cffaa); +} +.logo.react:hover { + filter: drop-shadow(0 0 2em #61dafbaa); +} + +@keyframes logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +@media (prefers-reduced-motion: no-preference) { + a:nth-of-type(2) .logo { + animation: logo-spin infinite 20s linear; + } +} + +.card { + padding: 2em; +} + +.read-the-docs { + color: #888; +} diff --git a/Videos/Form Fields/src/App.jsx b/Videos/Form Fields/src/App.jsx new file mode 100644 index 0000000..997f01a --- /dev/null +++ b/Videos/Form Fields/src/App.jsx @@ -0,0 +1,96 @@ +import * as React from 'react'; +import './index.css'; +import { + PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, + ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, Inject +} from '@syncfusion/ej2-react-pdfviewer'; + +function App() { + + const addField = () => { + var viewer = document.getElementById('container').ej2_instances[0]; + viewer.formDesignerModule.addFormField("Textbox", { name: "First Name", bounds: { X: 146, Y: 229, Width: 150, Height: 24 } }); + viewer.formDesignerModule.addFormField("Textbox", { name: "Middle Name", bounds: { X: 338, Y: 229, Width: 150, Height: 24 } }); + viewer.formDesignerModule.addFormField('Textbox', { name: 'Last Name', bounds: { X: 530, Y: 229, Width: 150, Height: 24 }, }); + viewer.formDesignerModule.addFormField('RadioButton', { bounds: { X: 148, Y: 289, Width: 18, Height: 18 }, name: 'Gender', isSelected: false, }); + viewer.formDesignerModule.addFormField('RadioButton', { bounds: { X: 292, Y: 289, Width: 18, Height: 18 }, name: 'Gender', isSelected: false, }); + viewer.formDesignerModule.addFormField('Textbox', { name: 'DOB Month', bounds: { X: 146, Y: 320, Width: 35, Height: 24 }, }); + viewer.formDesignerModule.addFormField('Textbox', { name: 'DOB Date', bounds: { X: 193, Y: 320, Width: 35, Height: 24 }, }); + viewer.formDesignerModule.addFormField('Textbox', { name: 'DOB Year', bounds: { X: 242, Y: 320, Width: 35, Height: 24 }, }); + viewer.formDesignerModule.addFormField('InitialField', { name: 'Agree', bounds: { X: 148, Y: 408, Width: 200, Height: 43 }, }); + viewer.formDesignerModule.addFormField('InitialField', { name: 'Do Not Agree', bounds: { X: 148, Y: 466, Width: 200, Height: 43 }, }); + viewer.formDesignerModule.addFormField('CheckBox', { name: 'Text Message', bounds: { X: 56, Y: 664, Width: 20, Height: 20 }, isChecked: false, }); + viewer.formDesignerModule.addFormField('CheckBox', { name: 'Email', bounds: { X: 242, Y: 664, Width: 20, Height: 20 }, isChecked: false, }); + viewer.formDesignerModule.addFormField('CheckBox', { name: 'Appointment Reminder', bounds: { X: 56, Y: 740, Width: 20, Height: 20 }, isChecked: false, }); + viewer.formDesignerModule.addFormField('CheckBox', { name: 'Request for Customerservice', bounds: { X: 56, Y: 778, Width: 20, Height: 20 }, isChecked: false, }); + viewer.formDesignerModule.addFormField('CheckBox', { name: 'Information Billing', bounds: { X: 290, Y: 740, Width: 20, Height: 20 }, isChecked: false, }); + viewer.formDesignerModule.addFormField('Textbox', { name: 'My Email', bounds: { X: 146, Y: 850, Width: 200, Height: 24 }, }); + viewer.formDesignerModule.addFormField('Textbox', { name: 'My Phone', bounds: { X: 482, Y: 850, Width: 200, Height: 24 }, }); + viewer.formDesignerModule.addFormField('SignatureField', { name: 'Sign', bounds: { X: 57, Y: 923, Width: 200, Height: 43 }, }); + viewer.formDesignerModule.addFormField('Textbox', { name: 'DOS Month', bounds: { X: 386, Y: 923, Width: 35, Height: 24 }, }); + viewer.formDesignerModule.addFormField('Textbox', { name: 'DOS Date', bounds: { X: 434, Y: 923, Width: 35, Height: 24 }, }); + viewer.formDesignerModule.addFormField('Textbox', { name: 'DOS Year', bounds: { X: 482, Y: 923, Width: 35, Height: 24 }, }); + }; + + const editField = () => { + var viewer = document.getElementById('container').ej2_instances[0]; + const field = viewer.formFieldCollections.find(f => f.name === "First Name"); + if (field) { + viewer.formDesignerModule.updateFormField(field, { + value: 'Peter', + backgroundColor: '#e0f7fa', + borderColor: '#00796b', + fontColor: '#004d40' + }); + } + }; + + const deleteField = () => { + var viewer = document.getElementById('container').ej2_instances[0]; + viewer.formDesignerModule.deleteFormField(viewer.formFieldCollections[2]); + }; + + function downloadClicked() { + var viewer = document.getElementById('container').ej2_instances[0]; + viewer.download(); + } + + return ( +
+ {/* Header Section */} +
+

Syncfusion PDF Viewer

+
+ + + + +
+
+ {/* PDF Viewer Section */} +
+ + + +
+
+ ); +} + +export default App; diff --git a/Videos/Form Fields/src/assets/react.svg b/Videos/Form Fields/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/Videos/Form Fields/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Videos/Form Fields/src/index.css b/Videos/Form Fields/src/index.css new file mode 100644 index 0000000..8476fc2 --- /dev/null +++ b/Videos/Form Fields/src/index.css @@ -0,0 +1,8 @@ + @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; + @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; + @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; + @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; + @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; + @import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; + @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; + @import "../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css"; \ No newline at end of file diff --git a/Videos/Form Fields/src/main.jsx b/Videos/Form Fields/src/main.jsx new file mode 100644 index 0000000..267b04d --- /dev/null +++ b/Videos/Form Fields/src/main.jsx @@ -0,0 +1,14 @@ +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' +import './index.css' +import App from './App.jsx' + +import { registerLicense } from '@syncfusion/ej2-base'; + +registerLicense('Ngo9BigBOggjHTQxAR8/V1JFaF5cXGhIfEx1RHxQdld5ZFRHallYTnNWUj0eQnxTdEBiWX9WcXdXRmJUVEx1WEleYg==') + +createRoot(document.getElementById('root')).render( + + + , +) diff --git a/Videos/Form Fields/vite.config.js b/Videos/Form Fields/vite.config.js new file mode 100644 index 0000000..8b0f57b --- /dev/null +++ b/Videos/Form Fields/vite.config.js @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [react()], +})