Section:

Redact Documents

Requirements
View Demo
Web SDK
Package: Redaction

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

1// eslint-disable-next-line no-undef
2const WebViewerConstructor = isWebComponent() ? WebViewer.WebComponent : WebViewer;
3
4WebViewerConstructor(
5  {
6    path: '../../../lib',
7    initialDoc: 'https://s3.amazonaws.com/pdftron/downloads/pl/legal-contract.pdf',
8    fullAPI: true,
9    enableRedaction: true,
10  },
11  document.getElementById('viewer')
12).then(instance => {
13  samplesSetup(instance);
14  const { documentViewer } = instance.Core;
15
16  document.getElementById('select').onchange = e => {
17    instance.UI.loadDocument(e.target.value);
18  };
19
20  document.getElementById('file-picker').onchange = e => {
21    const file = e.target.files[0];
22    if (file) {
23      instance.UI.loadDocument(file);
24    }
25  };
26
27  document.getElementById('url-form').onsubmit = e => {
28    e.preventDefault();
29    instance.UI.loadDocument(document.getElementById('url').value);
30  };
31
32  documentViewer.addEventListener('documentLoaded', () => {
33    instance.UI.setToolbarGroup('toolbarGroup-Redact');
34    instance.UI.setToolMode('AnnotationCreateRedaction');
35
36    document.getElementById('apply-redactions').onclick = () => {
37      instance.UI.showWarningMessage({
38        title: 'Apply redaction?',
39        message: 'This action will permanently remove all items selected for ' + 'redaction. It cannot be undone.',
40        onConfirm: () => {
41          documentViewer.getAnnotationManager().applyRedactions();
42          return Promise.resolve();
43        },
44      });
45    };
46  });
47});

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales