WebViewer is a JavaScript-based PDF SDK for building document functionality in web apps.

Capabilities

card-icon

Layer (OCG) separation

A demo of the PDF layer separation capabilities (Optional Content Groups) in WebViewer, a JavaScript-based PDF SDK for web apps.

Please note that this demo only supports PDFs

Toggle layers

Code snippet


const wvElement = document.getElementById('viewer');
WebViewer({ ...options }, wvElement)
  .then(instance => {
    instance.UI.loadDocument('path/to/doc.pdf');
    instance.Core.documentViewer.addEventListener('documentLoaded', () => {
      const documentViewer = instance.Core.documentViewer;
      const doc = documentViewer.getDocument();
  
      doc.getLayersArray().then((layersArray) => {
  
        //disable the first layer
        layersArray[0].visible = false;
        doc.setLayersArray(visible);
  
        // update view
        documentViewer.refreshAll();
        documentViewer.updateView();
  
      })
    })
  })