Some test text!

Loading...
Guides

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

JavaScript

HTML

WebViewer(
  {
    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', () => {
    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();
        },
      });
    };
  });

  instance.UI.setToolbarGroup('toolbarGroup-Edit');
  instance.UI.setToolMode('AnnotationCreateRedaction');
});