Color separation

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

1// eslint-disable-next-line no-undef
2const WebViewerConstructor = isWebComponent() ? WebViewer.WebComponent : WebViewer;
3
4WebViewerConstructor(
5 {
6 path: '../../../lib',
7 fullAPI: true,
8 initialDoc: '../../../samples/files/op-blend-test.pdf',
9 enableFilePicker: true,
10 },
11 document.getElementById('viewer')
12).then(instance => {
13 samplesSetup(instance);
14 const { documentViewer } = instance.Core;
15 const { openElements, closeElements } = instance.UI;
16 const colorsElement = document.getElementById('colors');
17
18 let colorSeparationLoaded = false;
19 documentViewer.addEventListener('documentLoaded', () => {
20 colorsElement.innerHTML = '';
21
22 const doc = documentViewer.getDocument();
23 colorSeparationLoaded = false;
24 // Enable color separation
25 doc.enableColorSeparations({ checkIfBaseColorsUsed: false });
26 // wait till the individual "colors" in the top left corner load first
27 openElements(['loadingModal']);
28
29 // Listen to each color in a PDF document
30 doc.addEventListener('colorSeparationAdded', color => {
31 colorSeparationLoaded = true;
32 const input = document.createElement('input');
33 input.id = color.name;
34 input.type = 'checkbox';
35 input.checked = color.enabled;
36 input.onchange = e => {
37 // show 'loadingModal', hide it in the 'pageComplete' event
38 openElements(['loadingModal']);
39 // Show/hide a color
40 doc.enableSeparation(color.name, e.target.checked);
41 // Redraw the canvas
42 documentViewer.refreshAll();
43 documentViewer.updateView();
44 };
45
46 const label = document.createElement('label');
47 label.id = `${color.name} label`;
48 label.htmlFor = color.name;
49 label.style.color = `rgb(${color.rgb.join(',')})`;
50 label.innerHTML = color.name;
51
52 const lineBreak = document.createElement('br');
53
54 colorsElement.appendChild(input);
55 colorsElement.appendChild(label);
56 colorsElement.appendChild(lineBreak);
57 closeElements(['loadingModal']);
58 });
59 });
60
61 documentViewer.addEventListener('mouseMove', nativeE => {
62 const mouseLocation = documentViewer.getToolMode().getMouseLocation(nativeE);
63 const displayMode = documentViewer.getDisplayModeManager().getDisplayMode();
64
65 const pageNumber = displayMode.getSelectedPages(mouseLocation, mouseLocation).first;
66 if (pageNumber !== null) {
67 const pageCoordinate = displayMode.windowToPage(mouseLocation, pageNumber);
68 if (pageCoordinate) {
69 const pageNumber = pageCoordinate.pageNumber;
70 const x = pageCoordinate.x;
71 const y = pageCoordinate.y;
72 const results = documentViewer.getColorSeparationsAtPoint(pageNumber, x, y);
73 for (let i = 0; i < results.length; ++i) {
74 // Update the text in color panel
75 const colorLabelElement = document.getElementById(`${results[i].name} label`);
76 if (colorLabelElement) {
77 colorLabelElement.innerHTML = `${results[i].name} ${results[i].value}%`;
78 }
79 }
80 }
81 }
82 });
83
84 documentViewer.addEventListener('pageComplete', () => {
85 // wait for the first 'colorSeparationAdded' event before closing the loading modal
86 // we don't want to hide the 'loadingModal' for the first 'pageComplete' event for the initial load
87 if (colorSeparationLoaded) {
88 closeElements(['loadingModal']);
89 }
90 });
91});

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales