DsPdfViewer annotation editor to add only drawing annotations with customization

We enable the annotation editor panel in DsPdfViewer, and specify which annotation tools are shown. Specifically, only drawing annotations are available. In this sample, we change default color and width of drawing annotations. To save your changes, click the 'save' button in the annotation editor or in the main viewer toolbar. This sends the PDF and the list of changes to the server where DsPdf applies the edits and sends back the modified PDF. You can then open it in Acrobat or save locally.

The demo is being dynamically compiled to support real-time code editing... For quicker access to features, switch to the "JavaScript" tab for a smoother experience! :)
app.js
index.html
styles.css
loading...
window.onload = function(){ var options = { workerSrc: "/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.worker.js", supportApi: getSupportApiSettings() }; // Set editor defaults: options.editorDefaults = { inkAnnotation: { borderStyle: { width: 3, style: 1 }, color: '#ff9800' }, squareAnnotation: { borderStyle: { width: 5, style: 2, dashArray: [8, 4] }, color: '#000000', interiorColor: '#f44336' }, circleAnnotation: { borderStyle: { width: 2, style: 1 }, color: '#2196f3', interiorColor: '#fff9c8' }, lineAnnotation: { borderStyle: { width: 2, style: 1 }, color: '#4caf50', interiorColor: '#2196f3', lineStart: 'Circle', lineEnd: 'Circle' }, polyLineAnnotation: { borderStyle: { width: 2, style: 1 }, color: '#000000', interiorColor: '#f44336', lineStart: 'Diamond', lineEnd: 'ClosedArrow' }, polygonAnnotation: { borderStyle: { width: 5, style: 1 }, color: '#ff0000', interiorColor: '#faa19b' }, }; const viewer = new DsPdfViewer("#viewer", options); viewer.addDefaultPanels(); viewer.addAnnotationEditorPanel(); viewer.layoutMode = 1; // Configure toolbar buttons: viewer.toolbarLayout.viewer = { default: ['open', 'save', '$navigation', '$split', 'text-selection', 'pan', '$zoom', '$fullscreen', 'download', 'print', 'rotate', 'view-mode', 'hide-annotations', 'doc-properties', 'about'], mobile: ['open', 'save', '$navigation', '$split', 'text-selection', 'pan', '$zoom', '$fullscreen', 'download', 'print', 'rotate', 'view-mode', 'hide-annotations', 'doc-properties', 'about'], fullscreen: ['$fullscreen', 'open', 'save', '$navigation', '$split', 'text-selection', 'pan', '$zoom', '$fullscreen', 'download', 'print', 'rotate', 'view-mode', 'hide-annotations', 'doc-properties', 'about'] }; viewer.toolbarLayout.annotationEditor = { default: ['save', '$split', 'edit-select', '$split', 'edit-ink', 'edit-square', 'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', '$split', 'edit-erase', '$split', 'edit-undo', 'edit-redo'], mobile: ['save', '$split', 'edit-select', '$split', 'edit-ink', 'edit-square', 'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', '$split', 'edit-erase', '$split', 'edit-undo', 'edit-redo'], fullscreen: ['$fullscreen', 'save', '$split', 'edit-select', '$split', 'edit-ink', 'edit-square', 'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', '$split', 'edit-erase', '$split', 'edit-undo', 'edit-redo'] }; viewer.applyToolbarLayout(); viewer.applyOptions(); viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/viewer-editor-defaults.pdf"); }
window.onload = function(){ var options = { workerSrc: "/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.worker.js", supportApi: getSupportApiSettings() }; // Set editor defaults: options.editorDefaults = { inkAnnotation: { borderStyle: { width: 3, style: 1 }, color: '#ff9800' }, squareAnnotation: { borderStyle: { width: 5, style: 2, dashArray: [8, 4] }, color: '#000000', interiorColor: '#f44336' }, circleAnnotation: { borderStyle: { width: 2, style: 1 }, color: '#2196f3', interiorColor: '#fff9c8' }, lineAnnotation: { borderStyle: { width: 2, style: 1 }, color: '#4caf50', interiorColor: '#2196f3', lineStart: 'Circle', lineEnd: 'Circle' }, polyLineAnnotation: { borderStyle: { width: 2, style: 1 }, color: '#000000', interiorColor: '#f44336', lineStart: 'Diamond', lineEnd: 'ClosedArrow' }, polygonAnnotation: { borderStyle: { width: 5, style: 1 }, color: '#ff0000', interiorColor: '#faa19b' }, }; const viewer = new DsPdfViewer("#viewer", options); viewer.addDefaultPanels(); viewer.addAnnotationEditorPanel(); viewer.layoutMode = 1; // Configure toolbar buttons: viewer.toolbarLayout.viewer = { default: ['open', 'save', '$navigation', '$split', 'text-selection', 'pan', '$zoom', '$fullscreen', 'download', 'print', 'rotate', 'view-mode', 'hide-annotations', 'doc-properties', 'about'], mobile: ['open', 'save', '$navigation', '$split', 'text-selection', 'pan', '$zoom', '$fullscreen', 'download', 'print', 'rotate', 'view-mode', 'hide-annotations', 'doc-properties', 'about'], fullscreen: ['$fullscreen', 'open', 'save', '$navigation', '$split', 'text-selection', 'pan', '$zoom', '$fullscreen', 'download', 'print', 'rotate', 'view-mode', 'hide-annotations', 'doc-properties', 'about'] }; viewer.toolbarLayout.annotationEditor = { default: ['save', '$split', 'edit-select', '$split', 'edit-ink', 'edit-square', 'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', '$split', 'edit-erase', '$split', 'edit-undo', 'edit-redo'], mobile: ['save', '$split', 'edit-select', '$split', 'edit-ink', 'edit-square', 'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', '$split', 'edit-erase', '$split', 'edit-undo', 'edit-redo'], fullscreen: ['$fullscreen', 'save', '$split', 'edit-select', '$split', 'edit-ink', 'edit-square', 'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', '$split', 'edit-erase', '$split', 'edit-undo', 'edit-redo'] }; viewer.applyToolbarLayout(); viewer.applyOptions(); viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/viewer-editor-defaults.pdf"); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Editor Defaults</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%; }