Redaction

Redact Documents

Requirements

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

This JavaScript sample lets you permanently redact elements on a PDF document in a web browser with no servers or other external dependencies required. Users can highlight text or drag over a region in a document and permanently scrub the information by clicking the redaction button. In the case of MS Office files (DOCX, XLSX, PPTX), documents are converted to PDF format before the redactions are applied. This sample works on all browsers (including IE11) and mobile devices without using plug-ins.

Learn more about our Web SDK.

Implementation steps

To redact files with WebViewer:

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

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

WebViewerConstructor(
  {
    path: '../../../lib',
    initialDoc: 'https://s3.amazonaws.com/pdftron/downloads/pl/legal-contract.pdf',
    fullAPI: true,
    enableRedaction: true,
  },
  document.getElementById('viewer')
).then(instance => {
  samplesSetup(instance);
  const { documentViewer } = instance.Core;

  document.getElementById('select').onchange = e => {
    instance.UI.loadDocument(e.target.value);
  };

  document.getElementById('file-picker').onchange = e => {
    const file = e.target.files[0];
    if (file) {
      instance.UI.loadDocument(file);
    }
  };

  document.getElementById('url-form').onsubmit = e => {
    e.preventDefault();
    instance.UI.loadDocument(document.getElementById('url').value);
  };

  documentViewer.addEventListener('documentLoaded', () => {
    instance.UI.setToolbarGroup('toolbarGroup-Redact');
    instance.UI.setToolMode('AnnotationCreateRedaction');

    document.getElementById('apply-redactions').onclick = () => {
      instance.UI.showWarningMessage({
        title: 'Apply redaction?',
        message: 'This action will permanently remove all items selected for ' + 'redaction. It cannot be undone.',
        onConfirm: () => {
          documentViewer.getAnnotationManager().applyRedactions();
          return Promise.resolve();
        },
      });
    };
  });
});