Some test text!

menu
search
chevron_right Web samples

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 IE10) and mobile devices without using plug-ins.

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',
}, document.getElementById('viewer'))
  .then(function(instance) {
    var docViewer = instance.docViewer;
    var colorsElement = document.getElementById('colors');

    docViewer.on('documentLoaded', function() {
      var doc = docViewer.getDocument();

      // Enable color separation
      doc.enableColorSeparations(true);

      // Listen to each color in a PDF document
      doc.on('colorSeparationAdded', function(e, color) {
        var input = document.createElement('input');
        input.id = color.name;
        input.type = 'checkbox';
        input.checked = color.enabled;
        input.onchange = function(e) {
          instance.openElement('loadingModal');
          // Show/hide a color
          doc.enableSeparation(color.name, e.target.checked);
          // Redraw the canvas
          docViewer.refreshAll();
          docViewer.updateView();
        };

        var label = document.createElement('label');
        label.id = color.name + ' label';
        label.htmlFor = color.name;
        label.style.color = 'rgb(' + color.rgb.join(',') + ')';
        label.innerHTML = color.name;

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

        colorsElement.appendChild(input);
        colorsElement.appendChild(label);
        colorsElement.appendChild(lineBreak);
      });
    });

    docViewer.on('mouseMove', function(e, nativeE) {
      var mouseLocation = docViewer.getToolMode().getMouseLocation(nativeE);
      var displayMode = docViewer.getDisplayModeManager().getDisplayMode();

      var pageIndex = displayMode.getSelectedPages(mouseLocation, mouseLocation).first;
      if (pageIndex !== null) {
        var pageCoordinate = displayMode.windowToPage(mouseLocation, pageIndex);
        if (pageCoordinate) {
          var pageNumber = pageCoordinate.pageIndex + 1;
          var x = pageCoordinate.x;
          var y = pageCoordinate.y;
          var results = docViewer.getColorSeparationsAtPoint(pageNumber, x, y);
          for (var 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 + '%';
          }
        }
      }
    });

    docViewer.on('pageComplete', function() {
      instance.closeElement('loadingModal');
    });
  });
close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.

PDFTron Receives USD$71 Million Growth Investment Led By Silversmith Capital Partners

Learn more
close