How can I help you?
Redaction in JavaScript PDF library
6 Mar 202610 minutes to read
Redacting a PDF is the process of permanently removing sensitive or confidential information from PDF documents. Syncfusion® PDF library provides an easy way to redact PDF documents.
NOTE
For redaction features, you need to install the
@syncfusion/ej2-pdf-data-extractpackage as an add-on.
Removing sensitive content from the PDF document
Redaction permanently removes confidential or sensitive information from a PDF. The PdfRedactor and PdfRedactionRegion classes allow you to mark specific areas and apply irreversible redaction to the document.
import { PdfDocument } from '@syncfusion/ej2-pdf';
import { PdfRedactor, PdfRedactionRegion, ApplicationPlatform } from '@syncfusion/ej2-pdf-data-extract';
// Load the document
let document: PdfDocument = new PdfDocument(data);
// Create a new text extractor
let redactor: PdfRedactor = new PdfRedactor(document);
// Add redactions to the collection
let redactions: PdfRedactionRegion[] = [];
redactions.push(new PdfRedactionRegion(0, {x: 10, y: 10, width: 100, height: 50}));
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 the document
var document = new ej.pdf.PdfDocument(data);
// Create a new text extractor
var redactor = new ej.pdfdataextract.PdfRedactor(document);
// Add redactions to the collection
var redactions = [];
redactions.push(new PdfRedactionRegion(0, {x: 10, y: 10, width: 100, height: 50}));
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();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.
Fill color on the redacted area
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 area
Customize the redacted region by drawing text or graphics over it, using PdfRedactionRegion and PdfRedactor to define the area and apply a custom visual appearance to the redaction.
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();