WebViewer is a JavaScript-based PDF SDK for building document functionality in web apps.

Capabilities

card-icon

Parsing and extraction

card-icon

Text extraction

card-icon

Color separation

A demo of the color separation capabilities in WebViewer, a JavaScript-based PDF SDK for web apps.

Please note that this demo only accepts PDF, JPG, PNGs and Office Documents.

Toggle colors:

Code snippet


const wvElement = document.getElementById('viewer');
WebViewer({
  initialDoc: 'path/to/doc.pdf',
}, document.getElementById('viewer'))
  .then(instance => {
    const docViewer = instance.Core.documentViewer;

    // wait until the document has been loaded
    docViewer.addEventListener('documentLoaded', () => {
      const doc = docViewer.getDocument();
      // enable color separation
      doc.enableColorSeparations(true);

      // This callback will be fired once for each color in the document 
      doc.addEventListener('colorSeparationAdded', (colorData) => {

        /*** colorData = { color: [number, number, number, number], 
         * // CMYK value of the color enabled: boolean, 
         * // is the color enabled or not name: string, 
         * // name of the color rgb: [number, number, number] 
         * // RGB value of the color } 
         * ***/
        // To toggle the colors, use the 'enableSeparation' API 
        doc.enableSeparation(colorData.name, false); // disable this color
        doc.enableSeparation(colorData.name, true); // enable this color

        // Update the view after you're finished toggling
        docViewer.refreshAll();
        docViewer.updateView();
      });
    });
  });