window.onload = function() {
//DsPdfViewer.LicenseKey = "***key***";
const options = {
workerSrc: "/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.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 DsPdfViewer("#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("/document-solutions/javascript-pdf-viewer/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="/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%;
}
