Add signature and hide the signature tool from toolbar

This sample shows how to hide the graphical signature tool from toolbar once the signature has been added.

app.js
index.html
styles.css
window.onload = function(){ //DsPdfViewer.LicenseKey = "***key***"; let viewer; function applyNormalViewerLayout() { viewer.toolbarLayout.viewer = { default: ['save', 'edit-sign-tool', 'doc-title', '$split', 'about'], mobile: ['save', 'edit-sign-tool', 'doc-title', '$split', 'about'], fullscreen: ['$fullscreen', 'save', 'edit-sign-tool', 'doc-title', '$split', 'about'] }; viewer.applyToolbarLayout(); } function applySignedViewerLayout() { viewer.toolbarLayout.viewer = { default: ['save', 'doc-title', '$split', 'about'], mobile: ['save', 'doc-title', '$split', 'about'], fullscreen: ['$fullscreen', 'save', 'doc-title', '$split', 'about'] }; viewer.applyToolbarLayout(); } function onSignatureAdded(resultDetails) { viewer.scrollAnnotationIntoView(resultDetails.pageIndex, resultDetails.annotation); applySignedViewerLayout(); } var options = { workerSrc: "/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.worker.js", supportApi: getSupportApiSettings(), restoreViewStateOnLoad: false }; options.signTool = { selectedTab: 'Draw', saveSignature: false, penColor: '#000000', penWidth: 2, hideSaveSignature: true, canvasSize: { width: 480, height: 168 }, autoResizeCanvas: false, destinationScale: 0.33, afterAdd: function (result) { onSignatureAdded(result); return true; }, location: { x: 87, y: 116 }, title: 'Landlord/Lessor', }; options.restoreViewStateOnLoad = false; viewer = new DsPdfViewer("#viewer", options); viewer.mouseMode = 1; viewer.addDefaultPanels(); viewer.addAnnotationEditorPanel(); viewer.zoom = 70; applyNormalViewerLayout(); viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/viewer-add-signature-from-toolbar.pdf"); }
window.onload = function(){ //DsPdfViewer.LicenseKey = "***key***"; let viewer; function applyNormalViewerLayout() { viewer.toolbarLayout.viewer = { default: ['save', 'edit-sign-tool', 'doc-title', '$split', 'about'], mobile: ['save', 'edit-sign-tool', 'doc-title', '$split', 'about'], fullscreen: ['$fullscreen', 'save', 'edit-sign-tool', 'doc-title', '$split', 'about'] }; viewer.applyToolbarLayout(); } function applySignedViewerLayout() { viewer.toolbarLayout.viewer = { default: ['save', 'doc-title', '$split', 'about'], mobile: ['save', 'doc-title', '$split', 'about'], fullscreen: ['$fullscreen', 'save', 'doc-title', '$split', 'about'] }; viewer.applyToolbarLayout(); } function onSignatureAdded(resultDetails) { viewer.scrollAnnotationIntoView(resultDetails.pageIndex, resultDetails.annotation); applySignedViewerLayout(); } var options = { workerSrc: "/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.worker.js", supportApi: getSupportApiSettings(), restoreViewStateOnLoad: false }; options.signTool = { selectedTab: 'Draw', saveSignature: false, penColor: '#000000', penWidth: 2, hideSaveSignature: true, canvasSize: { width: 480, height: 168 }, autoResizeCanvas: false, destinationScale: 0.33, afterAdd: function (result) { onSignatureAdded(result); return true; }, location: { x: 87, y: 116 }, title: 'Landlord/Lessor', }; options.restoreViewStateOnLoad = false; viewer = new DsPdfViewer("#viewer", options); viewer.mouseMode = 1; viewer.addDefaultPanels(); viewer.addAnnotationEditorPanel(); viewer.zoom = 70; applyNormalViewerLayout(); viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/viewer-add-signature-from-toolbar.pdf"); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Add Signature from Toolbar</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./src/styles.css"> <script src="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.js"></script> <script src="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/wasmSupportApi.js"></script> <script src="/document-solutions/javascript-pdf-viewer/demos/resource/js/init.js"></script> <script src="./src/app.js"></script> </head> <body> <div id="viewer"></div> </body> </html>
#viewer { height: 100%; }