Displaying Custom Items in Custom Stamp Dropdown

11 Dec 20241 minute to read

Overview

This guide explains how to add and display custom items in the custom stamp dropdown menu of Syncfusion’s PDF Viewer using JavaScript. This feature allows users to easily access and apply custom stamps to their PDF documents.

Steps to Show Custom Items in Custom Stamp Dropdown

Step 1: Follow the steps provided in the link to create a simple PDF Viewer sample.

Step 2: Configure Custom Stamp Settings

Within the PDF Viewer setup, utilize customStampSettings to specify the custom stamps that should appear in the dropdown menu.

// Initialize the PDF Viewer component
var pdfviewer = new ej.pdfviewer.PdfViewer({
  documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
  resourceUrl: 'https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2-pdfviewer-lib',
  // Configure custom stamp settings
  customStampSettings: {
    isAddToMenu: true,
    customStamps: [
      {
        customStampName: 'Image1',
        customStampImageSource: 'data:image/png;base64,...' // Provide a valid base64 or URL for the image
         },
      {
        customStampName: 'Image2',
        customStampImageSource: 'data:image/png;base64,...' // Provide a valid base64 or URL for the image
        }
    ],
    enableCustomStamp: true,
    opacity: 1
  }
});

By following these instructions, you can successfully configure to display custom items in the custom stamp dropdown, allowing users to easily apply personalized stamps to their documents.

View sample in GitHub