Showing & hiding PDF layers using JavaScript

Use the getLayersArray function to retrieve the OCG layers associated with the document. You can then selectively hide layers.

In the example below, the getLayersArray function returns an array with layers. To hide a layer, the visible property can be set to false. You must then call setLayersArray with the modified layers array. Finally, call refreshAll and updateView to clear the page cache and redraw.

JavaScript (SDK v8.0+)

WebViewer({
  ...
}, document.getElementById('viewer'))
  .then(instance => {
    const { documentViewer } = instance.Core;

    documentViewer.addEventListener('documentLoaded', () => {
      const doc = documentViewer.getDocument();

      doc.getLayersArray().then(layers => {
        // Set all layers to not visible
        layers.forEach((layer, index) => {
          layers[index].visible = false;
        });
        doc.setLayersArray(layers);
        // clears page cache
        documentViewer.refreshAll();
        // redraws
        documentViewer.updateView();
      });
    })
  });

WebViewerInstance DocumentViewer.getDocument DocumentViewer.refreshAll DocumentViewer.updateView Document.getLayersArray Document.setLayersArray

JavaScript (SDK v6.0+)

WebViewer({
  ...
}, document.getElementById('viewer'))
  .then(instance => {
    const { docViewer } = instance;

    docViewer.on('documentLoaded', () => {
      const doc = docViewer.getDocument();

      doc.getLayersArray().then(layers => {
        // Set all layers to not visible
        layers.forEach((layer, index) => {
          layers[index].visible = false;
        });
        doc.setLayersArray(layers);
        // clears page cache
        docViewer.refreshAll();
        // redraws
        docViewer.updateView();
      });
    })
  });

WebViewerInstance DocumentViewer.getDocument DocumentViewer.refreshAll DocumentViewer.updateView Document.getLayersArray Document.setLayersArray