Some test text!

Loading...
Guides

Separate colors in PDFs using JavaScript

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 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. Learn more about our JavaScript PDF Library.

Get Started Samples Download

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

JavaScript

HTML

WebViewer(
  {
    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();
    // 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
          document.getElementById(`${results[i].name} label`).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']);
    }
  });
});