Protecting confidential data using the redact annotation.
This example demonstrates how to use the Redact annotation feature to remove sensitive information from a PDF document. It contains confidential details, such as a name, address, phone number, and financial data, with a specific region marked for redaction. Users can apply the Redact annotation to this region and finalize the redaction using the "Apply All Redacts" button in the PDF viewer toolbar.
app.js
index.html
styles.css
loading...window.onload = function(){
const viewer = new DsPdfViewer("#viewer", {
workerSrc: "/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.worker.js",
supportApi: getSupportApiSettings()
});
viewer.addDefaultPanels();
viewer.addAnnotationEditorPanel();
// Configure toolbar buttons:
viewer.toolbarLayout.viewer = {
default: ["save", "edit-redact", "edit-redact-apply", "$navigation", "$split", "text-selection", "pan", "$zoom", "$fullscreen", "doc-properties", "about"],
mobile: ["save", "edit-redact", "edit-redact-apply", "$navigation", "$split", "text-selection", "pan", "$zoom", "$fullscreen", "doc-properties", "about"],
fullscreen: ["$fullscreen", "save", "edit-redact", "edit-redact-apply", "$navigation", "$split", "text-selection", "pan", "$zoom", "doc-properties", "about"]
};
viewer.toolbarLayout.annotationEditor = {
default: ["edit-select","$split","edit-redact", "edit-redact-apply","$split", "edit-undo","edit-redo","save"],
mobile: ["edit-select","$split","edit-redact", "edit-redact-apply","$split", "edit-undo","edit-redo","save"],
fullscreen: ["$fullscreen", "edit-select","$split","edit-redact", "edit-redact-apply","$split", "edit-undo","edit-redo","save"]
};
viewer.applyToolbarLayout();
viewer.layoutMode = 1;
viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/confidential_redact_demo.pdf");
}