Stamp Function in Foxit PDF SDK for Web Extension Foxit PDF SDK for Web Extension provides a Stamp function, as shown in the figure below:
As you can see, the stamps are placed in a drop-down list, and it takes several clicks to select the desired stamp and add it to the page. This article will show you how to directly implement the Stamp function in the toolbar to facilitate user operations. The following are the steps:
1.Confirm where to add the Stamp function. You can use the browser's element inspection tool to get the component name. For example, if you want to add it after "Comment→Eraser," the component name is "comment-tab-group-pencil."
2.Use fragments to add a new component under "comment-tab-group-pencil." Add the following code to fragments:
fragments: [{ target: 'comment-tab-group-pencil',
action: UIExtension.UIConsts.FRAGMENT_ACTION.AFTER,
template: `
<group name="comment-tab-group-stamp-custom" >
</group>
`,
config: [{
……
}]
}]3.Get the relevant information of each stamp, create a group, and add it to the toolbar.
4.In the config section, use switchTo to switch to the Stamp tool handler when the image is clicked, and finally add it to the page.
5.Finally, hide the original Stamp tool by adding the following code to the fragments section:
target: "comment-tab-group-stamp",
action: UIExtension.UIConsts.FRAGMENT_ACTION.REMOVE,The modified effect is as shown below:
Below is the core code:
var pdfui = new PDFUI({
……
fragments: [{
target: 'comment-tab-group-pencil',
action: UIExtension.UIConsts.FRAGMENT_ACTION.AFTER,
template: `
<group name="comment-tab-group-stamp-custom" >
<img id="Approved" class="stamp-preview" src= "/lib/stamps/en-US/DynamicStamps/Approved.svg" alt="Approved, Dynamic Stamps">
<img id="Accepted" class="stamp-preview" src= "/lib/stamps/en-US/SignHere/Accepted.svg" alt="Accepted, SignHere" >
<img id="StandardStampsAccepted" class="stamp-preview" src= "/lib/stamps/en-US/StandardStamps/Approved.svg" alt="Approved, StandardStamps" >
<img id="test" class="stamp-preview" src= "http://10.103.4.217:9898/unitTest/image/imagePNG_a.png" alt="test, testtest,custom" width="80" height="30" >
<img id="test1" class="stamp-preview" src= "http://10.103.4.217:9898/unitTest/image/DynamicStamp-bottom.svg" alt="test1, testtest,custom" width="80" height="30" >
</group>
`,
config: [{
target: 'comment-tab-group-stamp-custom',
callback: async function() {
var pdfviewer = await pdfui.getPDFViewer();
var showUrl = this.component.element.src;
var index= showUrl.lastIndexOf(".");
var ext = showUrl.substr(index+1);
var altArray= this.component.element.alt.split(",");
var inconType = altArray[2];
var category = altArray[1];
var name = altArray[0];
var handlerManager = await pdfviewer.getStateHandlerManager();
var url;
var fileType;
//When adding svg format, showUrl needs to be set to svg and url set to pdf.
if(ext === 'svg'){
url = showUrl.replace(/.[^/.]+$/, '.pdf');
fileType = "pdf";
}else{
url = showUrl;
fileType = ext;
}
//When customizing, you also need to set fileType, otherwise it will be invalid.
if(inconType === "custom"){
handlerManager.switchTo(
PDFViewCtrl.STATE_HANDLER_NAMES.STATE_HANDLER_CREATE_STAMP,
{
category: category,
name: name,
url: url,
showUrl: showUrl,
fileType:fileType,
//If the width and height are not set, there will be default values; if you need to customize the width and height, you need to set it.
// width:80,
// height:30,
}
)
}else{
await handlerManager.switchTo(
PDFViewCtrl.STATE_HANDLER_NAMES.STATE_HANDLER_CREATE_STAMP ,
{
category:category,
name:name,
url:url,
showUrl:showUrl
});
}
}
}]
},{
//The original stamp component is hidden
target: "comment-tab-group-stamp",
action: UIExtension.UIConsts.FRAGMENT_ACTION.REMOVE,
//If you are using an old version, removing or replacing it directly may cause problems. The effect can also be achieved by hiding)
//config:{
// cls: 'fv__ui-force-hide'
//}
}],
……
});
