Documents for PDF .NET Edition
GrapeCity Documents PDF Viewer / Edit PDF / Graphical Signature Tool
In This Topic
    Graphical Signature Tool
    In This Topic

    GcDocs PDF Viewer allows you to add graphical signatures in PDF documents by using Signature tool in Annotation Editor.

    The 'Signature Tool' button opens the 'Add Signature' dialog which lets you type, draw or add the image of a signature in a PDF document. You can also format the signatures by using formatting options while typing or drawing signatures.

    The below GIF demonstrates how to draw, format and add signatures in a PDF document. As can be observed, the signature is added as a Stamp Annotation in the Annotation Editor's property panel. These properties can be used to remove or download signatures, make them printable, change their position, height or width etc.

     The below image displays typed signatures with various formatting options available in the 'Add Signature' dialog like font, color, size etc.

     The below image displays an uploaded image of signature which can be added into a PDF docment.

     

    Note:  SupportApi should be configured in order to use Signature Tool, as the editing operation is performed in a PDF document.

    Add Signature Tool Button in Viewer Toolbar

    The Annotation Editor toolbar contains 'Signature tool' button by default. However, you can also add the button to viewer's toolbar layout by using below code:

    Index.cshtml
    Copy Code
    viewer.toolbarLayout.viewer.default.splice(1, 0, 'edit-sign-tool');
    viewer.applyToolbarLayout();
    


    Save Signature

    You can save signatures by checking the 'Save Signature' checkbox which saves the signature data into browser's local storage for later use.

    Note: The saved signature data is owned by the active user and can be set by using the currentUserName property or userName option. Therefore, if these properties are changed, saved signature data will also change.

    Customize Signature Tool Dialog

    The appearance and behavior of 'Add Signature' dialog can be customized by using the signTool option as shown in the below code:

    Index.cshtml
    Copy Code
    viewer.options.signTool = {
        title: 'Please, sign.',
        selectedTab: 'Draw',
        hideTabs: true, hideToolbar: true, hideSaveSignature: true,
        saveSignature: false,
        penColor: 'black', penWidth: 2,
        location: 'Center',
        destinationScale: 1.2
    };
    

     

    Note: The showSignTool method takes precedence over the signTool option if the settings object is passed as its argument.