Optional Content Layers

This example loads a PDF that contains several optional content layers. You can turn the display of individual layers on or off in the layers panel on the left.

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(){ //DsPdfViewer.LicenseKey = "***key***"; const viewer = new DsPdfViewer("#viewer", { workerSrc: "/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.worker.js", supportApi: getSupportApiSettings() }); viewer.toolbarLayout.viewer.default = ["open", "zoom", "save", "about"]; viewer.toolbarLayout.viewer.mobile = ["open", "zoom", "save", "about"]; const layersPanelHandle = viewer.addLayersPanel(); viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/house-plan.pdf").then(()=> { viewer.openPanel(layersPanelHandle); }); }
window.onload = function(){ //DsPdfViewer.LicenseKey = "***key***"; const viewer = new DsPdfViewer("#viewer", { workerSrc: "/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.worker.js", supportApi: getSupportApiSettings() }); viewer.toolbarLayout.viewer.default = ["open", "zoom", "save", "about"]; viewer.toolbarLayout.viewer.mobile = ["open", "zoom", "save", "about"]; const layersPanelHandle = viewer.addLayersPanel(); viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/house-plan.pdf").then(()=> { viewer.openPanel(layersPanelHandle); }); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Optional content layers</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%; }