Some test text!
To create a new signature field with required flag and a signature widget annotation.
WebViewer(...)
.then(instance => {
const { annotationManager, Annotations } = instance.Core;
const { WidgetFlags } = Annotations;
// myBtn is your own custom button
document.getElementById('myBtn').addEventListener('click', () => {
// set flags for required
const flags = new WidgetFlags();
flags.set('Required', true);
// create a form field
const field = new Annotations.Forms.Field("some signature field name", {
type: 'Sig',
flags,
});
// create a widget annotation
const widgetAnnot = new Annotations.SignatureWidgetAnnotation(field, {
appearance: '_DEFAULT',
appearances: {
_DEFAULT: {
Normal: {
data:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuMWMqnEsAAAANSURBVBhXY/j//z8DAAj8Av6IXwbgAAAAAElFTkSuQmCC',
offset: {
x: 100,
y: 100,
},
},
},
},
});
// set position and size
widgetAnnot.PageNumber = 1;
widgetAnnot.X = 100;
widgetAnnot.Y = 100;
widgetAnnot.Width = 50;
widgetAnnot.Height = 20;
//add the form field and widget annotation
annotationManager.getFieldManager().addField(field);
annotationManager.addAnnotation(widgetAnnot);
annotationManager.drawAnnotationsFromList([widgetAnnot]);
});
});
Create fillable PDF forms
Full sample code demonstrating how to add form fields to a PDF. Fields are first added as annotations and then converted to interactive form fields. Add signatures, text fields, checkboxes.
Available widget flags are:
Get the answers you need: Support
PDFTron SDK
COMPANY