Layer separation

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.

1// eslint-disable-next-line no-undef
2const WebViewerConstructor = isWebComponent() ? WebViewer.WebComponent : WebViewer;
3
4WebViewerConstructor(
5  {
6    path: '../../../lib',
7    initialDoc: '../../../samples/files/construction-drawing-final.pdf',
8  },
9  document.getElementById('viewer')
10).then(instance => {
11  samplesSetup(instance);
12  const { documentViewer } = instance.Core;
13  instance.UI.openElements(['leftPanel']);
14  instance.UI.setActiveLeftPanel('layersPanel');
15  documentViewer.addEventListener('pageComplete', () => {
16    instance.UI.closeElements(['loadingModal']);
17  });
18});

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales

Product:

Layer separation