Some test text!

Search
Hamburger Icon

PDF redaction using JavaScript

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. To see an example visit our WebViewer Redaction demo. Learn more about our JavaScript PDF Library.

Get Started Samples Download

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

JavaScript

HTML

// eslint-disable-next-line no-undef
const { WebViewerConstructor, uiOption } = getSampleOptions();

WebViewerConstructor(
  {
    path: '../../../lib',
    initialDoc: 'https://s3.amazonaws.com/pdftron/downloads/pl/legal-contract.pdf',
    fullAPI: true,
    enableRedaction: true,
    ui: uiOption,
  },
  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();
        },
      });
    };
  });
});