1+ ( function ( ) {
2+ // Initialize the PDF Viewer
3+ var pdfviewer = new ej . pdfviewer . PdfViewer ( {
4+ documentPath : 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf' ,
5+ resourceUrl : 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'
6+ } ) ;
7+
8+ ej . pdfviewer . PdfViewer . Inject (
9+ ej . pdfviewer . Toolbar , ej . pdfviewer . Magnification , ej . pdfviewer . Navigation , ej . pdfviewer . Annotation ,
10+ ej . pdfviewer . LinkAnnotation , ej . pdfviewer . ThumbnailView , ej . pdfviewer . BookmarkView ,
11+ ej . pdfviewer . TextSelection , ej . pdfviewer . TextSearch , ej . pdfviewer . FormFields , ej . pdfviewer . FormDesigner
12+ ) ;
13+
14+ pdfviewer . appendTo ( '#PdfViewer' ) ;
15+
16+ // Optional: add an initial example after document load (can be removed)
17+ pdfviewer . documentLoad = function ( ) {
18+ // Example: place a default textbox when loaded
19+ try {
20+ pdfviewer . formDesignerModule . addFormField ( 'Textbox' , {
21+ name : 'First Name' ,
22+ bounds : { X : 146 , Y : 229 , Width : 150 , Height : 24 }
23+ } ) ;
24+ } catch ( e ) { console . warn ( e ) ; }
25+ } ;
26+
27+ // Button handlers
28+ function addTextbox ( ) {
29+ pdfviewer . formDesignerModule . addFormField ( 'Textbox' , {
30+ name : 'First Name' ,
31+ bounds : { X : 146 , Y : 229 , Width : 150 , Height : 24 }
32+ } ) ;
33+ }
34+
35+ function addPassword ( ) {
36+ pdfviewer . formDesignerModule . addFormField ( 'Password' , {
37+ name : 'Account Password' ,
38+ bounds : { X : 148 , Y : 270 , Width : 180 , Height : 24 }
39+ } ) ;
40+ }
41+
42+ function addCheckbox ( ) {
43+ pdfviewer . formDesignerModule . addFormField ( 'CheckBox' , {
44+ name : 'Subscribe' ,
45+ isChecked : false ,
46+ bounds : { X : 56 , Y : 664 , Width : 20 , Height : 20 }
47+ } ) ;
48+ }
49+
50+ function addRadioGroup ( ) {
51+ // Group by same name: 'Gender'
52+ pdfviewer . formDesignerModule . addFormField ( 'RadioButton' , {
53+ name : 'Gender' ,
54+ isSelected : false ,
55+ bounds : { X : 148 , Y : 289 , Width : 18 , Height : 18 }
56+ } ) ;
57+ pdfviewer . formDesignerModule . addFormField ( 'RadioButton' , {
58+ name : 'Gender' ,
59+ isSelected : false ,
60+ bounds : { X : 292 , Y : 289 , Width : 18 , Height : 18 }
61+ } ) ;
62+ }
63+
64+ function addListBox ( ) {
65+ var options = [
66+ { itemName : 'Item 1' , itemValue : 'item1' } ,
67+ { itemName : 'Item 2' , itemValue : 'item2' } ,
68+ { itemName : 'Item 3' , itemValue : 'item3' }
69+ ] ;
70+ pdfviewer . formDesignerModule . addFormField ( 'ListBox' , {
71+ name : 'States' ,
72+ options : options ,
73+ bounds : { X : 380 , Y : 320 , Width : 150 , Height : 60 }
74+ } ) ;
75+ }
76+
77+ function addDropDown ( ) {
78+ var options = [
79+ { itemName : 'Item 1' , itemValue : 'item1' } ,
80+ { itemName : 'Item 2' , itemValue : 'item2' } ,
81+ { itemName : 'Item 3' , itemValue : 'item3' }
82+ ] ;
83+ pdfviewer . formDesignerModule . addFormField ( 'DropDown' , {
84+ name : 'Country' ,
85+ options : options ,
86+ bounds : { X : 560 , Y : 320 , Width : 150 , Height : 24 }
87+ } ) ;
88+ }
89+
90+ function addSignature ( ) {
91+ pdfviewer . formDesignerModule . addFormField ( 'SignatureField' , {
92+ name : 'Sign' ,
93+ bounds : { X : 57 , Y : 923 , Width : 200 , Height : 43 }
94+ } ) ;
95+ }
96+
97+ function addInitial ( ) {
98+ pdfviewer . formDesignerModule . addFormField ( 'InitialField' , {
99+ name : 'Initial' ,
100+ bounds : { X : 148 , Y : 466 , Width : 200 , Height : 43 }
101+ } ) ;
102+ }
103+
104+ function drawNextAsPassword ( ) {
105+ // Switch to interactive draw mode; click on the PDF to place the field
106+ pdfviewer . formDesignerModule . setFormFieldMode ( 'Password' ) ;
107+ }
108+
109+ // Wire up buttons
110+ document . getElementById ( 'btnAddTextbox' ) . addEventListener ( 'click' , addTextbox ) ;
111+ document . getElementById ( 'btnAddPassword' ) . addEventListener ( 'click' , addPassword ) ;
112+ document . getElementById ( 'btnAddCheckbox' ) . addEventListener ( 'click' , addCheckbox ) ;
113+ document . getElementById ( 'btnAddRadioGroup' ) . addEventListener ( 'click' , addRadioGroup ) ;
114+ document . getElementById ( 'btnAddListBox' ) . addEventListener ( 'click' , addListBox ) ;
115+ document . getElementById ( 'btnAddDropDown' ) . addEventListener ( 'click' , addDropDown ) ;
116+ document . getElementById ( 'btnAddSignature' ) . addEventListener ( 'click' , addSignature ) ;
117+ document . getElementById ( 'btnAddInitial' ) . addEventListener ( 'click' , addInitial ) ;
118+ document . getElementById ( 'btnDrawPassword' ) . addEventListener ( 'click' , drawNextAsPassword ) ;
119+ } ) ( ) ;
0 commit comments