WebViewer is a JavaScript-based PDF SDK for building document functionality in web apps.

SDK Features

Industry

card-icon

Redaction

Redact on +30 document types including: PDF, MS Office (doc, docx, xlsx, pptx) and Images (jpg, png). Uploaded files don't transfer across a network - redact occurs directly in the browser without a server.

You can manually highlight text, click & drag, or use the (regex or dropdown) text search below to create redaction annotations.

After you are done creating redaction annotations, apply them to permanently redact content from the document.

Code snippet


        WebViewer(...)
        .then(instance => {
        const {
            documentViewer,
            annotationManager,
            Annotations
        } = instance.Core;
        documentViewer.addEventListener('documentLoaded', () => {
            const redactAnnot1 = new Annotations.RedactionAnnotation({
                PageNumber: 1,
                Rect: new Annotations.Rect(100, 100, 300, 200) // Rect are in the form x1,y1,x2,y2
            });
            const redactAnnot2 = new Annotations.RedactionAnnotation({
                PageNumber: 1,
                StrokeColor: new Annotations.Color(0, 255, 0),
                FillColor: new Annotations.Color(0, 0, 255),
                Quads: [
                    // Quads are in the form x1,y1,x2,y2,x3,y3,x4,y4
                    new Annotations.Quad(100, 290, 300, 210, 300, 210, 100, 290),
                    new Annotations.Quad(100, 390, 300, 310, 300, 310, 100, 390)
                ]
            });
            // can still create redactions without options and set them afterward
            const redactAnnot3 = new Annotations.RedactionAnnotation();
            redactAnnot3.PageNumber = 1;
            // using 'setRect' instead of setting 'X','Y','Width', or 'Height' directly
            redactAnnot3.setRect(new Annotations.Rect(100, 100, 300, 200));
            // set border color
            redactAnnot3.StrokeColor = new Annotations.Color(0, 255, 0);
            // set redacted color
            redactAnnot3.FillColor = new Annotations.Color(0, 0, 255);
            const redactAnnotations = [redactAnnot1, redactAnnot2, redactAnnot3];
            annotationManager.addAnnotations(redactAnnotations);
            // need to draw the annotations otherwise they won't show up until the page is refreshed
            annotationManager.drawAnnotationsFromList(redactAnnotations);
        });
        });