Redact PDFs in Our JavaScript Viewer
In addition to being able to create redactions programmatically, you can create and customize redactions via the UI Nutrient provides.
Toolbar items
There are two toolbar items available: one for creating redactions by dragging the cursor around text , and another one for drawing a rectangle over an arbitrary area . To use these tools, you’ll need to set the toolbar items array appropriately (using PSPDFKit.Configuration#toolbarItems
or PSPDFKit.Instance#setToolbarItems
):
const toolbarItems = PSPDFKit.defaultToolbarItems.concat([ { type: "redact-text-highlighter" }, // Text redaction tool. { type: "redact-rectangle" } // Area redaction tool. ]); PSPDFKit.load({ // ... toolbarItems });
Text highlighter
When the text redaction tool is active, you can drag a selection across regions of text, and a new redaction annotation will be outlined throughout it. It works in a way similar to how the text highlighter tool does.
Additionally, this interaction can be programmatically enabled by setting the PSPDFKit.ViewState#interactionMode
property to PSPDFKit.InteractionMode.REDACT_TEXT_HIGHLIGHTER
. Refer to our customize existing tools guide to learn more.
Area highlighter
When the area redaction tool is active, you can draw a rectangle around the pages of a document, and a new redaction annotation matching the region drawn will be added. It works in a way similar to how the tool used to create rectangle annotations does.
Additionally, this tool can be programmatically enabled by setting the PSPDFKit.ViewState#interactionMode
property to PSPDFKit.InteractionMode.REDACT_SHAPE_RECTANGLE
. Refer to our customize existing tools guide to learn more.
ℹ️ Note: Both the text highlighter redaction button and the area highlighter redaction button are hidden by default in our UI and are only available when explicitly set via the API:
PSPDFKit.load({ toolbarItems: [ ...PSPDFKit.defaultToolbarItems, { type: "redact-rectangle" }, { type: "redact-text-highlighter" } ] });
Text selection
Another way of creating a text redaction is by first selecting text and then choosing the redaction toolbar from the contextual tooltip that appears.
Previewing redactions
To preview redactions and see how they’d look when applied without removing any document content, set the PSPDFKit.ViewState#previewRedactionMode
flag to true
:
instance.setViewState((v) => v.set("previewRedactionMode", true));
Applying redactions
To actually redact the document after all the redaction annotations are added, call the PSPDFKit.Instance#applyRedactions()
API method. This will overwrite the existing document, removing content irreversibly:
await instance.applyRedactions(); console.log('The document has been redacted.');
The redaction annotations will be removed once the document has been redacted and the affected content has been removed.
Redacting Graphic Objects Shared across Pages
Graphic objects — including images and vector graphics — can be reused across pages in a PDF. If a graphic object is redacted and reused, all instances of that graphic object will also be redacted.
This means that, for example, when you redact part of an image, the same part of the same image on another page will also be redacted. This is compatible with how Adobe Acrobat does it. A common example of this is if you have to redact a logo that is shown on each page.
Even if the images look exactly the same, they could be separate images and not be redacted the same. Always be careful and review the redacted document when you’re done.