Add signature fields to PDFs

Technical Support
1

PDF.js Express Version

Hello,

I’m trying to implement “Add signature fields to PDFs” from PDF JS Express documentation ( PDF.js Express Signature Field | Documentation ). And “sign here” annotation is not showing on my pdf file. Can you please help me how I can add signature fields to my pdf file???

Thank you,
Stefan

2

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

3

Hi there!

Our documentation for this feature is not the greatest and this is something I will improve in the near future.

For now, here is some code to get you started:

  const { annotManager, Annotations } = instance;
  const { WidgetFlags } = Annotations;

  document.getElementById('b1').onclick = async () => {
    // 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
    annotManager.addAnnotation(widgetAnnot);
    annotManager.drawAnnotationsFromList([widgetAnnot]);
    annotManager.getFieldManager().addField(field);

Note that this signature field will not be merged into the document when saving, to do so, you need to use our Merge REST API.

Let me know if you need anything else!

Thanks,
Logan

1 Like
5

can we make this signhere field movable/dragable?