I want to change the value of field ‘text-signature-input’ with javascript.
const iframeDoc = instance.iframeWindow.document;
const textSignaturePanel = iframeDoc.querySelector(’[data-element=“textSignaturePanel”]’);
$(textSignaturePanel).val(“Here text”);
Please if anyone has any idea how to change the text I will be grateful
Regards
Hello! The name is coming from annotation manager user name, you can set it like this:
Webviewer({
initialDoc: hashFile,
path: '/lib',
}, document.getElementById('viewer')).then(instance => {
const { docViewer, annotManager } = instance;
docViewer.on('documentLoaded', () => {
annotManager.setCurrentUser('Andrey');
});
});
Let me know if that works for you!
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
it should be
docViewer.on('documentLoaded;, () => {
and then it should work.
Thanks again for answering but this has not worked for me.
I’m not sure if to use that option it is necessary to establish a connection to the server.
This is my complete code and i am running it locally on a localhost with xamp
There is no server connection needed. I can debug further and help you get started. You can schedule a call with me here: Calendly - Andrey Safonov.
Thanks for the information, I still have the problem that I cannot change the temptation in the field mentioned in the initial comment.
This is all my code and I tried everything but nothing has worked for me.
Webviewer(
{
initialDoc: hashFile,
path: '/lib',
},
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);
};
docViewer.on('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);
},
});
});
});
Let me know if you have any questions!
Thanks for the answer, i’m suspecting that it may be the version i’m using.
I currently have it in Version: 7.3.1
What version have you run it in?
Regards
Just tested it with 7.3.1. And previously used 8.0 nightly.
I think something else might be at play. I am free for a call to help you debug: Calendly - Andrey Safonov.
Thank you very much for the help, it finally worked for me. I downloaded the latest version again and it showed me an error in /lib/core/CoreControls.js. I have solved it using the same file from another version.
Regards
I am glad it worked!!! Thanks!
Hi Andrey,
A question, is there a way to not allow editing the pdf after signing, even in the downloaded document.
Thank you
Regards
You could either flatten the PDF, so the annotations become part of the PDF or make them locked or read-only.
The above are two guides that might be helpful.
