Some test text!

menu

Separate layers (OCGs) in a PDF

This JavaScript sample lets you identify & separate layers in a PDF document (no servers or other external dependencies required). This sample also gives you the option to show or hide different OCG (Optional Content Group) layers in a PDF document. This functionality is commonly used in the construction & engineering space where users can hide irrelevant graphical content (HVAC, Electrical or Piping elements) from a blueprint. This sample works on all browsers (including IE10) and mobile devices without using plug-ins. For an example of this functionality visit our PDF Layer Separation demo. Learn more about our JavaScript PDF Library.

Get StartedSamplesDownload

To run this sample, get started with a free trial of PDFTron SDK.

JavaScript

HTML

WebViewer({
  path: '../../../lib',
  initialDoc: '../../../samples/files/construction-drawing-final.pdf',
}, document.getElementById('viewer'))
  .then(function(instance) {
    var docViewer = instance.docViewer;
    var layersElement = document.getElementById('layers');

    docViewer.on('documentLoaded', function() {
      var doc = docViewer.getDocument();

      // Get PDF layers array
      doc.getLayersArray().then(function(layers) {
        layers.forEach(function(layer, index) {
          var input = document.createElement('input');
          input.id = layer.name;
          input.type = 'checkbox';
          input.checked = layer.visible;
          input.onchange = function(e) {
            instance.openElement('loadingModal');
            // Show/hide a layer
            layers[index].visible = e.target.checked;
            doc.setLayersArray(layers);
            // Redraw the canvas
            docViewer.refreshAll();
            docViewer.updateView();
          };

          var label = document.createElement('label');
          label.htmlFor = layer.name;
          label.innerHTML = layer.name;

          var lineBreak = document.createElement('br');

          layersElement.appendChild(input);
          layersElement.appendChild(label);
          layersElement.appendChild(lineBreak);
        });
      });
    });

    docViewer.on('pageComplete', function() {
      instance.closeElement('loadingModal');
    });
  });
close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.