Redaction in JavaScript PDF Library

23 Jul 202612 minutes to read

Redacting a PDF is the process of permanently removing sensitive or confidential information from a PDF document. The JavaScript PDF Library supports permanent redaction of PDF documents, including text, images, and metadata, by defining redaction regions and applying an irreversible overlay on top of the original content.

NOTE

For redaction features, you need to install the @syncfusion/ej2-pdf-data-extract package as an add-on.

Remove sensitive content from the PDF document

The PdfRedactor and PdfRedactionRegion classes let you mark specific areas on a page and then apply irreversible redaction to the document.

The following example loads an existing PDF, adds a single redaction region, applies the redaction, and saves the result.

import { PdfDocument } from '@syncfusion/ej2-pdf';
import { PdfRedactor, PdfRedactionRegion, ApplicationPlatform } from '@syncfusion/ej2-pdf-data-extract';

// Load the source PDF
let document: PdfDocument = new PdfDocument(data);
// Create the redactor
let redactor: PdfRedactor = new PdfRedactor(document);
// Define the redaction region
let redactions: PdfRedactionRegion[] = [];
redactions.push(new PdfRedactionRegion(0, { x: 10, y: 10, width: 100, height: 50 }));
// Add the regions to the redactor
redactor.add(redactions);
// Provide a canvas that the redactor can use while rasterizing page content
const canvasRenderCallback = (): { canvas: any, applicationPlatform: ApplicationPlatform } => {
    const canvas = document.createElement('canvas');
    return { canvas: canvas, applicationPlatform: ApplicationPlatform.typescript };
};
// Apply the redactions
await redactor.redact(canvasRenderCallback);
// Save and dispose
document.save('output.pdf');
document.destroy();
// Load the source PDF
var document = new ej.pdf.PdfDocument(data);
// Create the redactor
var redactor = new ej.pdfdataextract.PdfRedactor(document);
// Define the redaction region
var redactions = [];
redactions.push(new ej.pdfdataextract.PdfRedactionRegion(0, { x: 10, y: 10, width: 100, height: 50 }));
// Add the regions to the redactor
redactor.add(redactions);
// Provide a canvas that the redactor can use while rasterizing page content
var canvasRenderCallback = function () {
    var canvas = document.createElement('canvas');
    return { canvas: canvas, applicationPlatform: ej.pdfdataextract.ApplicationPlatform.typescript };
};
// Apply the redactions
await redactor.redact(canvasRenderCallback);
// Save and dispose
document.save('output.pdf');
document.destroy();

NOTE

Use PdfRedactor.redact(callback) when you need to redact images along with other PDF content. In contrast, PdfRedactor.redactSync() is faster because it runs synchronously, but it cannot redact images—only text and other non‑image elements.

The following example uses redactSync():

import { PdfDocument } from '@syncfusion/ej2-pdf';
import { PdfRedactor, PdfRedactionRegion } from '@syncfusion/ej2-pdf-data-extract';

// Load the source PDF
let document: PdfDocument = new PdfDocument(data);
// Create the redactor
let redactor: PdfRedactor = new PdfRedactor(document);
// Define the redaction region
let redactions: PdfRedactionRegion[] = [];
redactions.push(new PdfRedactionRegion(0, { x: 10, y: 10, width: 100, height: 50 }));
// Add the regions to the redactor
redactor.add(redactions);
// Apply the redactions synchronously (text only)
redactor.redactSync();
// Save and dispose
document.save('output.pdf');
document.destroy();
// Load the source PDF
var document = new ej.pdf.PdfDocument(data);
// Create the redactor
var redactor = new ej.pdfdataextract.PdfRedactor(document);
// Define the redaction region
var redactions = [];
redactions.push(new ej.pdfdataextract.PdfRedactionRegion(0, { x: 10, y: 10, width: 100, height: 50 }));
// Add the regions to the redactor
redactor.add(redactions);
// Apply the redactions synchronously (text only)
redactor.redactSync();
// Save and dispose
document.save('output.pdf');
document.destroy();

Set a fill color for the redacted region

You can apply a solid fill color to cover the redacted content. This is the most common approach for redaction.

import { PdfDocument } from '@syncfusion/ej2-pdf';
import { PdfRedactor, PdfRedactionRegion, ApplicationPlatform } from '@syncfusion/ej2-pdf-data-extract';

// Load an existing PDF document
let document: PdfDocument = new PdfDocument(data);
// Add redactions to the collection
let redactions: PdfRedactionRegion[] = [];
// Initialize a new instance of the `PdfRedactor` class
let redactor: PdfRedactor = new PdfRedactor(document);
// Initialize a new instance of the `PdfRedactionRegion` class.
let redaction: PdfRedactionRegion = new PdfRedactionRegion(0, {x: 40, y: 41, width: 80, height: 90});
// Sets the fill color used to fill the redacted area.
redaction.fillColor = {r: 255, g: 0, b: 0};
redactions.push(redaction);
// Add redactions with specified options.
redactor.add(redactions);
// Define a canvas render callback that returns a canvas element and the application platform.
const canvasRenderCallback = (): {canvas: any, applicationPlatform: ApplicationPlatform} => {
    const canvas = document.createElement('canvas');
    return { canvas: canvas, applicationPlatform: ApplicationPlatform.typescript };
};
// Apply redactions on the PDF document
await redactor.redact(callBack: canvasRenderCallback);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
// Load an existing PDF document
var document = new ej.pdf.PdfDocument(data);
// Add redactions to the collection
var redactions = [];
// Initialize a new instance of the `PdfRedactor` class
var redactor = new ej.pdfdataextract.PdfRedactor(document);
// Initialize a new instance of the `PdfRedactionRegion` class.
var redaction = new ej.pdfdataextract.PdfRedactionRegion(0, {x: 40, y: 41, width: 80, height: 90});
// Sets the fill color used to fill the redacted area.
redaction.fillColor = {r: 255, g: 0, b: 0};
redactions.push(redaction);
// Add redactions with specified options.
redactor.add(redactions);
// Define a canvas render callback that returns a canvas element and the application platform.
const canvasRenderCallback = (): {canvas, applicationPlatform} => {
    const canvas = document.createElement('canvas');
    return { canvas: canvas, applicationPlatform: ej.pdf.ApplicationPlatform.typescript };
};
// Apply redactions on the PDF document
await redactor.redact(canvasRenderCallback);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();

Text appearance on the redacted region

Draw text or graphics over the redacted region to customize its appearance. Use the third constructor argument of PdfRedactionRegion to enable the appearance overlay, then draw on redaction.appearance.normal.graphics.

The example adds two regions on page 0. The first region uses a custom appearance that displays the label “Redacted Text”. The second region is added without a custom appearance so the default fill is used. Combining both demonstrates that styled and default regions can coexist in a single redactor pass.

import { PdfDocument } from '@syncfusion/ej2-pdf';
import { PdfRedactor, PdfRedactionRegion, ApplicationPlatform } from '@syncfusion/ej2-pdf-data-extract';

// Load an existing PDF document
let document = new PdfDocument(data);
// Add redactions to the collection
let redactions = [];
// Initialize a new redaction region with custom appearance
let redaction = new PdfRedactionRegion(0, { x: 0, y: 0, width: 80, height: 20 }, true);
let font = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
redaction.appearance.normal.graphics.drawString(
  'Redacted Text',
  font,
  { x: 0, y: 0, width: 80, height: 20 },
  new PdfBrush({ r: 255, g: 0, b: 0 })
);
redactions.push(redaction);
// Add another redaction region (example region coordinates)
redaction = new PdfRedactionRegion(0, { x: 40, y: 43, width: 80, height: 20 }, true);
redactions.push(redaction);
// Initialize a new instance of the PdfRedactor class
let redactor = new PdfRedactor(document);
// Add redactions with specified options
redactor.add(redactions);
// Define a canvas render callback that returns a canvas element and the application platform.
const canvasRenderCallback = (): {canvas: any, applicationPlatform: ApplicationPlatform} => {
    const canvas = document.createElement('canvas');
    return { canvas: canvas, applicationPlatform: ApplicationPlatform.typescript };
};
// Apply redactions on the PDF document
await redactor.redact(callBack: canvasRenderCallback);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
// Load an existing PDF document 
var document = new ej.pdf.PdfDocument(data);
// Prepare redactions collection
var redactions = [];
// Create a redaction region with a custom appearance (draw "Redacted Text" in red)
var redaction = new ej.pdf.PdfRedactionRegion(0, { x: 0, y: 0, width: 80, height: 20 }, true);
var font = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
// Draw custom appearance on the redaction overlay
redaction.appearance.normal.graphics.drawString(
  'Redacted Text',
  font,
  { x: 0, y: 0, width: 80, height: 20 },
  new ej.pdf.PdfBrush({ r: 255, g: 0, b: 0 })
);
redactions.push(redaction);
// Add another redaction region using the specified coordinates on page 0
redaction = new ej.pdf.PdfRedactionRegion(0, {  x: 40, y: 43, width: 80, height: 20 }, true);
redactions.push(redaction);
// Initialize redactor
var redactor = new ej.pdf.PdfRedactor(document);
// Add redactions with specified options
redactor.add(redactions);
// Define a canvas render callback that returns a canvas element and the application platform.
const canvasRenderCallback = (): {canvas, applicationPlatform} => {
    const canvas = document.createElement('canvas');
    return { canvas: canvas, applicationPlatform: ej.pdf.ApplicationPlatform.typescript };
};
// Apply redactions on the PDF document
await redactor.redact(canvasRenderCallback);
// Save and dispose
document.save('output.pdf');
document.destroy();

Additional Resources