Create Custom PDF Stamps using JavaScript

By default WebViewer includes several standard stamps that are part of the PDF specification, but it also supports the creation of custom stamps with custom text and colors. You can control the standard and custom stamps that show up by default in the UI by using the APIs described below. Launch demo for stamps or demo custom annotations.

To get a list of the standard stamps you can call getDefaultStamps and to update the list you can call setStandardStamps. Stamps in this list will show up in the UI under the standard tab.

Default standard stamps:

• Approved
• AsIs
• Completed
• Confidential
• Departmental
• Draft
• Experimental
• Expired
• Final
• ForComment
• ForPublicRelease
• InformationOnly
• NotApproved
• NotForPublicRelease
• PreliminaryResults
• Sold
• TopSecret
• Void
• SHSignHere
• SHWitness
• SHInitialHere
• SHAccepted
• SBRejected

For example you can add an image URL to the list so that it shows up in the standard list:

1Webviewer({...}, wvElement).then(instance => {
2  const { documentViewer } = instance.Core;
3
4  // This relative path will most likely be different (replace image). Don't expect this to work for you.
5  const pathToLogo = '/envs/image.png';
6  const tool = documentViewer.getTool('AnnotationCreateRubberStamp');
7
8  tool.setStandardStamps([
9    'Approved',
10    'AsIs',
11    pathToLogo,
12  ]);
13})

1Webviewer({...}, wvElement).then(instance => {
2  const { docViewer } = instance;
3
4  // This relative path will most likely be different (replace image). Don't expect this to work for you.
5  const pathToLogo = '/envs/image.png';  
6  const tool = docViewer.getTool('AnnotationCreateRubberStamp');
7
8  tool.setStandardStamps([
9    'Approved',
10    'AsIs',
11    pathToLogo,
12  ]);
13})

WebViewer also supports adding custom stamps with a custom label, timestamp text and color. To create custom stamps, pass an array of stamp objects to the setCustomStamps method of AnnotationCreateRubberStamp tool.

1Webviewer({...}, wvElement).then(instance => {
2  const { documentViewer, Annotations } = instance.Core;
3
4  const tool = documentViewer.getTool('AnnotationCreateRubberStamp');
5
6  const customStamps = [
7    { title: "Approved", subtitle: "[By $currentUser at] h:mm:ss a, MMMM D, YYYY" },
8    { title: "Reviewed", subtitle: "[By $currentUser at] h:mm:ss a, MMMM D, YYYY", color: new Annotations.Color('#D65656') },
9  ]
10  tool.setCustomStamps(customStamps)
11})

1Webviewer({...}, wvElement).then(instance => {
2  const { docViewer, Annotations } = instance;
3
4  const tool = docViewer.getTool('AnnotationCreateRubberStamp');
5
6  const customStamps = [
7    { title: "Approved", subtitle: "[By $currentUser at] h:mm:ss a, MMMM D, YYYY" },
8    { title: "Reviewed", subtitle: "[By $currentUser at] h:mm:ss a, MMMM D, YYYY", color: new Annotations.Color('#D65656') },
9  ]
10  tool.setCustomStamps(customStamps)
11})

These custom stamps will show up by default in the UI under the custom tab:

Custom stamps can also manually be created by users from this UI tab.