Add a custom "Save" button

This sample shows how to add a custom "Save" button to the main viewer toolbar that saves the edited PDF on the server using SupportApi.

window.onload = function() { //DsPdfViewer.LicenseKey = "***key***"; let viewer, React; // Prepare viewer options: const options = { workerSrc: "/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.worker.js", supportApi: { apiUrl: window.top.SUPPORTAPI_URL, token: window.top.SUPPORTAPI_TOKEN, webSocketUrl: false } }; // Arbitrary data associated with the viewer. // This data is sent to the server when the document is saved: options.userData = { sampleName: 'SaveChangesSample', docName: new Date().getTime() + '.pdf' }; // Create viewer instance: viewer = new DsPdfViewer("#viewer", options); // Add annotation editor: viewer.addAnnotationEditorPanel(); // Create custom 'Save changes' button React = viewer.getType('React'); viewer.toolbar.addItem({ key: 'custom-save', icon: { type: 'svg', content: React.createElement('svg', { xmlns: 'http://www.w3.org/2000/svg', version: '1.1', width: '24', height: '24', viewBox: '0 0 24 24', fill: '#ff0000' }, React.createElement('path', { d: 'M20.913 9.058c0.057-0.26 0.087-0.531 0.087-0.808 0-2.071-1.679-3.75-3.75-3.75-0.333 0-0.657 0.044-0.964 0.125-0.581-1.813-2.28-3.125-4.286-3.125-2.047 0-3.775 1.367-4.32 3.238-0.533-0.155-1.097-0.238-1.68-0.238-3.314 0-6 2.686-6 6s2.686 6 6 6h3v4.5h6v-4.5h5.25c2.071 0 3.75-1.679 3.75-3.75 0-1.845-1.333-3.379-3.087-3.692zM13.5 15v4.5h-3v-4.5h-3.75l5.25-5.25 5.25 5.25h-3.75z' })) }, title: 'Save document', enabled: false, action: function() { // Save changes on server: viewer.saveChanges().then(function(result) { if(result) { // Load saved document from server var docUrl = window.top.SUPPORTAPI_URL + "/GetPdfFromCloud?docName=" + options.userData.docName + '&clientId=' + viewer.supportApi.clientId; viewer.open(docUrl).then(function() { alert('The document is saved in the cloud. The service life of the document is 10 minutes.'); }); } }); }, onUpdate: function() { return { enabled: viewer.hasDocument, title: 'Save changes' }; } }); viewer.toolbarLayout.viewer.default.splice(0, 0, 'download'); viewer.toolbarLayout.viewer.mobile.splice(0, 0, 'download'); // Insert 'custom-save' item into toolbar layout: viewer.toolbarLayout.viewer.default.splice(0, 0, 'custom-save'); viewer.toolbarLayout.viewer.mobile.splice(0, 0, 'custom-save'); // Change annotationEditor toolbar layout: var annotationEditorButtons = ['custom-save', 'download', 'edit-select', 'edit-sign-tool', '$split', 'edit-text', 'edit-free-text', 'edit-ink', 'edit-square', 'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', 'edit-stamp', 'edit-link', '$split', 'edit-redact', 'edit-redact-apply', 'edit-erase', '$split', 'new-document', '$split', 'new-page', 'delete-page']; viewer.toolbarLayout.annotationEditor = { default: annotationEditorButtons, mobile: annotationEditorButtons, fullscreen: annotationEditorButtons }; viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/viewer-save-changes.pdf"); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Custom save button</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/resource/js/init.js"></script> <script src="./src/app.js"></script> </head> <body> <div id="viewer"></div> </body> </html>
#viewer { height: 100%; }