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 IE11) 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.

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

// eslint-disable-next-line no-undef
const { WebViewerConstructor, uiOption } = getSampleOptions();

WebViewerConstructor(
  {
    path: '../../../lib',
    initialDoc: '../../../samples/files/construction-drawing-final.pdf',
    ui: uiOption,
  },
  document.getElementById('viewer')
).then(instance => {
  samplesSetup(instance);
  const { documentViewer } = instance.Core;
  instance.UI.openElements(['leftPanel']);
  instance.UI.setActiveLeftPanel('layersPanel');
  documentViewer.addEventListener('pageComplete', () => {
    instance.UI.closeElements(['loadingModal']);
  });
});