Layer Separation for PDF - Sample code

Requirements

These packages are required to use these features in production. Trial keys have unlimited access to all features

Web SDKLive demo

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 Web SDK.

JavaScript

// eslint-disable-next-line no-undef
const WebViewerConstructor = isWebComponent() ? WebViewer.WebComponent : WebViewer;

WebViewerConstructor(
  {
    path: '../../../lib',
    initialDoc: '../../../samples/files/construction-drawing-final.pdf',
  },
  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']);
  });
});