Edit PDF in real time Collaboration Mode in DsPdfViewer

In Collaboration Mode, DsPdfViewer supports real time co-authoring that allows you to share live edits of a PDF document with other users on the web. To share the document in read-write or read-only mode, click the Share button in the viewer's top toolbar. By opening the PDF from the Shared Documents panel, multiple users then can view changes made to the PDF in real time, and if allowed, make their own changes that would be seen by other users. You can observe the presence of other users and the changes made by them in the shared document.

function updateToolbarLayout(layout) { layout.splice(layout.indexOf('save'), 1); layout.splice(1, 0, "save"); layout.splice(2, 0, "share"); } function updateToolbar(viewer) { updateToolbarLayout(viewer.toolbarLayout.viewer.default); updateToolbarLayout(viewer.toolbarLayout.viewer.mobile); } window.onload = function(){ const userName = prompt("Please enter your name", "Anonymous") || "Anonymous"; const viewer = new DsPdfViewer("#viewer", { 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: window.top.SUPPORTAPI_WEBSOCKET_URL }, userName }); viewer.addDefaultPanels(); viewer.addAnnotationEditorPanel(); viewer.addFormEditorPanel(); viewer.addSharedDocumentsPanel(); viewer.beforeUnloadConfirmation = true; updateToolbar(viewer); viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/financial-report.pdf"); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Real-time Collaboration</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%; }