Customize dynamic stamps

Dynamic stamps vs standard stamps

Type	Requirements	Files to prepare	Supported content
Dynamic stamp	uix-addons/customer-dynamic-stamp add-on (included in AllInOne.js by default)	Image	Background image, text, font, color, and position
Standard stamp	None	PDF and SVG	Image

RECOMMENDATION

If you do not use AllInOne.js, ensure the customer-dynamic-stamp add-on is loaded when initializing Foxit PDF SDK for Web.

Creating custom dynamic stamps

Foxit PDF SDK for Web provides a default dynamic stamp workflow in Complete WebViewer (UI). Open Comment -> Create -> Create Dynamic Stamp to try it.

Workflow

1. The UI supplies preprocessed background images on the client
2. The user enters category, name, text, and other dynamic stamp settings
3. The UI sends this data to the PDF data layer
4. The PDF data layer:
   • Draws the preprocessed image
   • Creates text form fields
   • Updates field data in real time
   • Exports an image
   • Passes it to the UI as the stamp list icon
5. The user selects the created dynamic stamp icon from the stamp list
6. Clicking on the page creates the stamp and syncs with the PDF data layer

Create custom dynamic stamps

Create via UI

Users can open Comment -> Create -> Create Dynamic Stamp in the UI. Background images for dynamic stamps can be supplied through APIs and managed by your application.

// Get the custom dynamic stamp template dropdown component
const templates = await pdfui.getComponentByName("stamp-templates");

// Append a dropdown button and callback via append
templates.append("<dropdown-button name='test' url='xxx.png'>test</dropdown-button>", [{
    target: 'test',
    config: {
        // Set callback
        callback: async function () {
            // Get the custom dynamic stamp dialog component
            const dialog = await pdfui.getComponentByName("fv--custom-dynamic-stamp-dialog")
            // Set template information
            dialog.controller.selectTemplate({name: 'test', url: "xxx.png"})
        }
    }
}])

Create via API

Add custom dynamic stamps

var param = [{
    category: 'stamp',
    name: 'MyStamp',
    fileData: 'http://stamp.png',
    field: {
        textType: PDFViewCtrl.PDF.constant.STAMP_TEXT_TYPE.CUSTOM_TEXT,
        value: 'custom text', // Custom text
        font: { // Optional
            name: 'Helvetica', // Font
            color: 0, // Text color
        },
        rect: {  // PDF coordinates
            left: 0,
            right: 30,
            top: 30,
            bottom: 0,
        }
    },
}]
// Add custom dynamic stamp
pdfui.callAddonAPI('CustomDynamicStamp', 'setDynamicStamp', [param])

Remove custom dynamic stamps

var param = [{
    category: 'stamp', // Dynamic stamp category
    names: [
        'MyStamp', // Dynamic stamp name
    ]
}]
// Remove custom dynamic stamp
pdfui.callAddonAPI('CustomDynamicStamp', 'removeDynamicStamp', [param])

Get all custom dynamic stamps

// Get dynamic stamp list
pdfui.callAddonAPI('CustomDynamicStamp', 'getDynamicStamp')