Optional
afterThe afterAdd event handler will be called when the result annotation is added and signature dialog is closed.
var viewer = new DsPdfViewer("#root");
viewer.options.signTool = {
afterAdd: function() {
// Put your code here.
return true;
},
};
// Update the title of the result annotation and convert the annotation to content:
var viewer = new DsPdfViewer(selector, {
supportApi: {
apiUrl: 'http://127.0.0.1:5001/support-api/gc-pdf-viewer',
webSocketUrl: false
},
signTool: {
afterAdd: function(result) {
var annotation = result.annotation;
annotation.title = 'New Title';
annotation.convertToContent = true;
viewer.updateAnnotation(result.pageIndex, annotation);
return true;
}
}
});
Optional
afterThe afterShow event handler will be called after the dialog is shown.
var viewer = new DsPdfViewer("#root");
viewer.options.signTool = {
afterShow: function() {
alert('The dialog is shown.');
},
};
Optional
autoAutomatically adjust the canvas size so that it shrinks to fit the window when the window size is small.
true;
Optional
beforeThe beforeAdd event handler will be called when the Add button is clicked. Return false if you want to cancel default add action.
var viewer = new DsPdfViewer("#root");
viewer.options.signTool = {
beforeAdd: function() {
// Put your code here.
return true;
},
};
Optional
beforeThe beforeHide event handler will be called before the dialog is closed. Return false if you want to to prevent the dialog from closing.
viewer.options.signTool = {
subject: "subject1",
beforeHide: function (dialog) {
// You can execute any custom code when the dialog is about to hide:
console.log("dialog subject is " + dialog.subject);
}
};
var viewer = new DsPdfViewer("#root");
viewer.options.signTool = {
beforeHide: function() {
// Return false to prevent the dialog from closing:
return false;
},
};
Optional
beforeThe beforeShow event handler will be called before the dialog is shown. Return false if you want to prevent the dialog from showing.
var viewer = new DsPdfViewer("#root");
viewer.options.signTool = {
beforeShow: function() {
// Return false to cancel showing the dialog:
return false;
},
};
Optional
bold?: booleanBold text style for the "Type" tab.
false
Optional
canvasThe size of the canvas in pixels.
Optional
convertConvert the result stamp to content.
false
var viewer = new DsPdfViewer("#root", signTool: { convertToContent: true });
Optional
destinationThe target value for the canvas scale. The result annotation bounds will be scaled using this value. For example, if destinationScale is 0.5 and canvasSize is 400/200, the size of the result annotation will be 200/100.
0.5
Optional
dialogDialog location within window rectangle. Origin is top/left.
'Center'
Optional
fontThe default font name that will be used for the "Type" tab.
'Brush Script MT'
Optional
fontArray of the available font names.
['Arial', 'Verdana', 'Helvetica', 'Tahoma', 'Trebuchet MS', 'Times New Roman', 'Georgia', 'Garamond', 'Courier New', 'Brush Script MT']
Optional
fontThe default font size that will be used for the "Type" tab.
48
Optional
hasIf true, the signature tool will try to load an image from local storage for the Image tab.
false
// Create the viewer:
var viewer = new DsPdfViewer({ userName: 'John', signTool: { hasImage: true, saveSignature: true, selectedTab: 'Image', tabs: ['Image'] } });
// save image for use with Image tab:
viewer.signToolStorage.saveImage('Image', document.querySelector('img'));
Optional
hideSpecifies whether to hide dialog footer.
false
Optional
hideSpecifies whether to hide dialog title.
false
Optional
hideSpecifies whether to hide the "Save signature" button.
false
Optional
hideSpecifies whether to hide tab buttons.
false
Optional
hideSpecifies whether to hide the toolbar which can be used to customize typing and drawing styles.
false
Optional
italic?: booleanItalic text style for the "Type" tab.
true
Optional
location?: "Center" | "Top" | "Right" | "Bottom" | "Left" | "TopLeft" | "TopRight" | "BottomRight" | "BottomLeft" | { x: number; y: number }The result location of the annotation on the page. Note, when you specify the exact location (using {x, y} values), the origin is at the bottom left corner.
'BottomRight'
Optional
pageDestination page index.
The default is the visible page index.
Optional
penPen color.
#000000
options.signTool = {
penColor: '#00ff00'
};
Optional
penPen width.
2
Optional
ruler?: { Draw: RulerLine[] | false; Image: RulerLine[] | false; Type: RulerLine[] | false } | falseCanvas ruler lines customization.
// Hide all ruler lines:
viewer.options.signTool = { ruler: false };
// Hide the ruler for the Draw tab:
viewer.options.signTool = { ruler: { Draw: false } };
// Define a custom ruler lines for the Draw tab:
viewer.options.signTool = {
ruler: {
Draw: [{ color: "#ff0000", size: 5, type: "dashed", position: 50 },
{ color: "#ff00ff", size: 2, type: "solid", position: 80 }]
}
};
Optional
saveIndicates whether the signature data must be saved into browser's local storage for later use. The saved data is owned by the active user, which can be set using the currentUserName property.
false
Optional
selectedInitially selected tab.
Default is 'Draw'
var viewer = new DsPdfViewer("#host", {
signTool: { selectedTab: 'Type' }
});
Optional
subject?: stringResult annotation subject.
empty string
Optional
tabs?: ("Type" | "Draw" | "Image")[]Array of the available tabs. The order of the tabs is preserved. Possible values are: 'Type', 'Draw', 'Image'.
['Type', 'Draw', 'Image']
Optional
text?: stringThe default text that will be used for the "Type" tab.
Optional
textText color.
#000000
options.signTool = {
textColor: '#00ff00'
};
Optional
title?: stringDialog title.
'Add Signature'
options.signTool = {
title: 'Signature'
};
Appearance settings for the Signature Tool dialog.