window.onload = function() { //GcPdfViewer.LicenseKey = "***key***"; const options = { workerSrc: "/documents-api-pdfviewer/demos/product-bundles/build/gcpdfviewer.worker.js", }; let viewer, React, customPanelHandle; function createPanelContentElement(userName) { // Define function component: function PanelContentComponent(props) { return React.createElement('div', { style: { margin: '20px' } }, 'Hello ', props.sayHelloToWho); } // Create react element: return React.createElement(PanelContentComponent, { sayHelloToWho: userName }); } function createSvgIconElement() { return React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "24", height: "24", viewBox: "0 0 24 24", fill: "#ffffff" }, /*#__PURE__*/React.createElement("path", { d: "M12 2c-4.971 0-9 4.029-9 9s4.029 9 9 9 9-4.029 9-9-4.029-9-9-9zM12 8c0-0.553 0.447-1 1-1s1 0.447 1 1v3c-0.552 0-1 0.448-1 1s0.448 1 1 1c0.553 0 1-0.448 1-1h1v-2l1 1-1 1c0 3 0 3-2 4 0-1-1-1-3-1v-2l-2-2v-2c-1 0-1 1-1 1l-2.213-2.212c1.167-2.247 3.512-3.788 6.213-3.788 0.688 0 1.353 0.104 1.981 0.29-0.086 0.895-0.579 1.71-1.481 1.71-1 0-1.5 1-1.5 2s0 3 0 3 1 0 1-3zM12 18c-3.859 0-7-3.14-7-7 0-0.776 0.133-1.521 0.367-2.219l4.633 4.633v1.586c0 0.552 0.447 1 1 1 0.779 0 1.651 0 2.006 0.091 0.038 0.301 0.209 0.582 0.468 0.742 0.168 0.104 0.36 0.16 0.552 0.16 0.145 0 0.289-0.032 0.422-0.098 2.348-1.174 2.539-1.644 2.552-4.479l0.708-0.708c0.391-0.391 0.391-1.023 0-1.414l-1-1c-0.192-0.192-0.448-0.294-0.708-0.294-0.129 0-0.259 0.025-0.383 0.076-0.373 0.155-0.617 0.52-0.617 0.924v-2c0-0.689-0.351-1.298-0.883-1.658 0.421-0.411 0.712-0.995 0.826-1.685 2.392 1.115 4.057 3.535 4.057 6.343 0 3.86-3.141 7-7 7z" })); } viewer = new GcPdfViewer("#viewer", options); React = viewer.getType('React'); customPanelHandle = viewer.createPanel(createPanelContentElement(viewer.currentUserName || 'World'), null, 'CustomPanel', { icon: { type: 'svg', content: createSvgIconElement() }, label: 'Custom panel', description: 'Custom panel title', visible: false, enabled: false } ); // Add 'CustomPanel' to panels layout: viewer.layoutPanels(['*', 'CustomPanel']); viewer.onAfterOpen.register(function() { // Enable 'CustomPanel' when needed: viewer.updatePanel(customPanelHandle, { visible: true, enabled: true }); // Open custom panel: viewer.leftSidebar.menu.panels.open(customPanelHandle.id); }); viewer.open("/documents-api-pdfviewer/demos/product-bundles/assets/pdf/viewer-custom-sidebar.pdf"); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Custom sidebar</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./src/styles.css"> <script src="/documents-api-pdfviewer/demos/product-bundles/build/gcpdfviewer.js"></script> <script src="./src/app.js"></script> </head> <body> <div id="viewer"></div> </body> </html>
#viewer { height: 100%; }