Hi @Andrey , thanks for the reply.
I have tried to test your code and it has not worked for me even I have added in the function that generates the signature field but it does not work.
` WebViewer(
{
path: ‘lib/’,
fullAPI: true,
initialDoc: ‘documento.pdf’,
},
document.getElementById(‘viewer’)
).then(instance => {
const { annotManager, Annotations,PDFNet , docViewer,CoreControls} = instance;
const { WidgetFlags } = Annotations;
instance.disableElements([ ‘viewControlsOverlay’, ‘printButton’,‘toolbarGroup-Shapes’,‘toolbarGroup-Annotate’,‘fullscreenButton’,‘themeChangeButton’,‘searchButton’,‘toggleNotesButton’,‘panToolButton’,‘selectToolButton’,‘viewControlsButton’,‘menuButton’,‘rubberStampToolGroupButton’,‘stampToolGroupButton’,‘calloutToolGroupButton’,‘fileAttachmentToolGroupButton’,‘leftPanelButton’,‘zoomOverlayButton’,‘toolbarGroup-View’,‘toolbarGroup-Edit’,‘imageSignaturePanelButton’,‘undoButton’,‘redoButton’,‘eraserToolButton’ ]);
function generate_sign_area(){
// 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 = 200;
widgetAnnot.Y = 680;
widgetAnnot.Width = 200;
widgetAnnot.Height = 60;
//add the form field and widget annotation
annotManager.addAnnotation(widgetAnnot);
annotManager.drawAnnotationsFromList([widgetAnnot]);
annotManager.getFieldManager().addField(field);
annotManager.setCurrentUser('Andrey');
}
// Create a function to draw text annots on the document
const drawTextAnnot = (color, text, x, y) => {
const stampAnnot = new Annotations.StampAnnotation();
stampAnnot.PageNumber = 1;
stampAnnot.X = x;
stampAnnot.Y = y;
stampAnnot.Width = 200;
stampAnnot.Height = 30;
// create a canvas in memory to draw your text to
const canvas = document.createElement(‘canvas’);
canvas.width = 200;
canvas.height = 30;
const context = canvas.getContext(‘2d’);
context.fillStyle = color;
context.fillRect(0, 0, canvas.width, canvas.height);
context.textBaseline = ‘middle’;
context.font = “12px Arial”;
context.fillStyle = “black”;
context.textAlign = “center”;
context.fillText(text,canvas.width/2,canvas.height/2);
// convert your canvas to a data URL
const dataURL = canvas.toDataURL();
// put your data URL here
stampAnnot.ImageData = dataURL;
annotManager.addAnnotation(stampAnnot);
annotManager.redrawAnnotation(stampAnnot);
}
window.addEventListener(‘documentLoaded’, () => {
var today = new Date();
var dd = String(today.getDate()).padStart(2, ‘0’);
var mm = String(today.getMonth() + 1).padStart(2, ‘0’); //January is 0!
var yyyy = today.getFullYear();
var current_date = dd+’/’+mm+’/’+yyyy;
generate_sign_area();
drawTextAnnot('#FFFFFF', 'Firmado por:', 200, 655);
drawTextAnnot('#FFFFFF', current_date, 200, 740);
});
// Add header button that will get file data on click
instance.setHeaderItems(header => {
header.push({
type: 'actionButton',
img : '/wp-content/themes/woffice/download-btn.png',
onClick: async () => {
const xfdfString = await annotManager.exportAnnotations();
const saveOptions = CoreControls.SaveOptions;
const options = {
filename: 'myDocument.pdf',
xfdfString,
flags: saveOptions.LINEARIZED,
downloadType: 'pdf'
};
instance.downloadPdf(options);
}
});
});
});`
This is my code. Will I be missing something?
Regards