Color Separation in PDF - Sample Code

Requirements

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

Web SDKFull APILive demo

Show or hide colors in a PDF document using this JavaScript sample (no servers or other external dependencies required). Read low-level information (like Pantone, CMYK or spot colors) from the PDF and toggle spot colors on and off inside of the webviewer (see Color Separation demo).

Common use cases for color separation include advanced printing solutions where each ink is specified its own separate color channel giving printers the ability to calculate how much ink will be applied to each pixel or color channel. This sample works on all browsers (including IE11) and mobile devices without using plug-ins.

The full API is enabled by passing the fullAPI option into the WebViewer constructor. This is already included in your sample code below.

Learn more about Color Separation and our Web SDK.

Implementation steps

To show or hide PDF colors with WebViewer:

Step 1: Follow get started in your preferred web stack for WebViewer Step 2: Add the JavaScript sample code provided in this guide

JavaScript

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

WebViewerConstructor(
  {
    path: '../../../lib',
    fullAPI: true,
    initialDoc: '../../../samples/files/op-blend-test.pdf',
    enableFilePicker: true,
  },
  document.getElementById('viewer')
).then(instance => {
  samplesSetup(instance);
  const { documentViewer } = instance.Core;
  const { openElements, closeElements } = instance.UI;
  const colorsElement = document.getElementById('colors');

  let colorSeparationLoaded = false;
  documentViewer.addEventListener('documentLoaded', () => {
    colorsElement.innerHTML = '';

    const doc = documentViewer.getDocument();
    colorSeparationLoaded = false;
    // Enable color separation
    doc.enableColorSeparations({ checkIfBaseColorsUsed: false });
    // wait till the individual "colors" in the top left corner load first
    openElements(['loadingModal']);

    // Listen to each color in a PDF document
    doc.addEventListener('colorSeparationAdded', color => {
      colorSeparationLoaded = true;
      const input = document.createElement('input');
      input.id = color.name;
      input.type = 'checkbox';
      input.checked = color.enabled;
      input.onchange = e => {
        // show 'loadingModal', hide it in the 'pageComplete' event
        openElements(['loadingModal']);
        // Show/hide a color
        doc.enableSeparation(color.name, e.target.checked);
        // Redraw the canvas
        documentViewer.refreshAll();
        documentViewer.updateView();
      };

      const label = document.createElement('label');
      label.id = `${color.name} label`;
      label.htmlFor = color.name;
      label.style.color = `rgb(${color.rgb.join(',')})`;
      label.innerHTML = color.name;

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

      colorsElement.appendChild(input);
      colorsElement.appendChild(label);
      colorsElement.appendChild(lineBreak);
      closeElements(['loadingModal']);
    });
  });

  documentViewer.addEventListener('mouseMove', nativeE => {
    const mouseLocation = documentViewer.getToolMode().getMouseLocation(nativeE);
    const displayMode = documentViewer.getDisplayModeManager().getDisplayMode();

    const pageNumber = displayMode.getSelectedPages(mouseLocation, mouseLocation).first;
    if (pageNumber !== null) {
      const pageCoordinate = displayMode.windowToPage(mouseLocation, pageNumber);
      if (pageCoordinate) {
        const pageNumber = pageCoordinate.pageNumber;
        const x = pageCoordinate.x;
        const y = pageCoordinate.y;
        const results = documentViewer.getColorSeparationsAtPoint(pageNumber, x, y);
        for (let i = 0; i < results.length; ++i) {
          // Update the text in color panel
          const colorLabelElement = document.getElementById(`${results[i].name} label`);
          if (colorLabelElement) {
            colorLabelElement.innerHTML = `${results[i].name} ${results[i].value}%`;
          }
        }
      }
    }
  });

  documentViewer.addEventListener('pageComplete', () => {
    // wait for the first 'colorSeparationAdded' event before closing the loading modal
    // we don't want to hide the 'loadingModal' for the first 'pageComplete' event for the initial load
    if (colorSeparationLoaded) {
      closeElements(['loadingModal']);
    }
  });
});