Product: PDFJS Express Plus
Our requirement is to be able to add signing fields programmatically onto a PDF document with set X, Y coordiantes. This is so that the sign here fields are already populated and the end user can easily click on it to sign. We are able to add annotations just fine programmatically but the document does not specify how to do this with signature fields.
To accomplish this, we started with this code. The code actually creates a SignHereElement. However, we are not sure how best to add this to the pdf document so that when the viewer opens the Sign Here indicates where the end user needs to click and sign.
WebViewer({
path: '/lib', // path to the PDF.js Express'lib' folder on your server
initialDoc: '/sign.pdf',
// initialDoc: '/path/to/my/file.pdf', // You can also use documents on your server
}, document.getElementById('viewer'))
.then(instance => {
const docViewer = instance.Core.documentViewer;
const annotationManager = instance.Core.annotationManager;
const Tools = instance.Core.Tools;
const Annotations = instance.Core.Annotations;
const createSignHereElement = Annotations.SignatureWidgetAnnotation.prototype.createSignHereElement;
Annotations.SignatureWidgetAnnotation.prototype.createSignHereElement = function() {
const signHereElement = createSignHereElement.apply(this, arguments);
signHereElement.style.background = 'red';
return signHereElement;
};
//can we add the signHereElement someplace to the document here??
docViewer.addEventListener('documentLoaded', () => {
// Easily able to add a rectangle
const rectangleAnnot = new Annotations.RectangleAnnotation();
rectangleAnnot.PageNumber = 1;
rectangleAnnot.X = 100;
rectangleAnnot.Y = 150;
rectangleAnnot.Width = 200;
rectangleAnnot.Height = 50;
rectangleAnnot.Author = annotationManager.getCurrentUser();
annotationManager.addAnnotation(rectangleAnnot);
annotationManager.redrawAnnotation(rectangleAnnot);
**//HOW DO WE ADD A SIGNING ELEMENT HERE AT A Preset X and Y**
});
});
Any guidance would be greatly appreciated.