Skip to content

Commit 9f2750f

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
991918: Redaction in mobile view and Search Redact.
1 parent 9d2e28e commit 9f2750f

File tree

2 files changed

+260
-45
lines changed

2 files changed

+260
-45
lines changed

‎Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/mobile-view.md‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
---
2+
layout: post
3+
title: Redaction in mobile view in JavaScript ES6 PDF Viewer | Syncfusion
4+
description: Learn how to add, customize, and apply redactions in mobile view using the Syncfusion JavaScript (ES6) PDF Viewer with a complete toolbar setup and redaction workflow.
5+
platform: document-processing
6+
control: PdfViewer
7+
documentation: ug
8+
---
9+
10+
# Redaction in Mobile View in JavaScript (ES6) PdfViewer Component
11+
12+
The Redaction Tool enables users to permanently mark and remove sensitive content from PDF documents in mobile view using the JavaScript (ES6) PdfViewer component. This feature is optimized for touch interactions and provides a streamlined redaction workflow specifically designed for mobile devices.
13+
14+
![Redaction in Mobile View](./redaction-annotations-images/redaction-mobile-view.png)
15+
16+
N> In mobile view, the redaction toolbar appears at the bottom of the viewer for easy thumb access. Mobile layout activates automatically on small screens.
17+
18+
## Adding Redaction in Mobile View
19+
20+
To enable redaction functionality in your JavaScript (ES6) application, configure the PDF Viewer with the following setup:
21+
22+
```ts
23+
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
24+
PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner);
25+
let viewer: PdfViewer = new PdfViewer({
26+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
27+
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
28+
toolbarSettings: {
29+
toolbarItems: [
30+
'OpenOption',
31+
'UndoRedoTool',
32+
'PageNavigationTool',
33+
'MagnificationTool',
34+
'PanTool',
35+
'SelectionTool',
36+
'CommentTool',
37+
'SubmitForm',
38+
'AnnotationEditTool',
39+
'RedactionEditTool', // Enables Redaction toolbar
40+
'FormDesignerEditTool',
41+
'SearchOption',
42+
'PrintOption',
43+
'DownloadOption'
44+
]
45+
}
46+
});
47+
viewer.appendTo('#pdfViewer');
48+
```
49+
50+
## Understanding Mobile Redaction Toolbar Tools
51+
52+
When you enter redaction mode in mobile view, a specialized redaction toolbar appears with multiple tools optimized for touch interaction. Each tool serves a specific purpose in the redaction workflow.
53+
54+
### Redaction Annotation Tool
55+
56+
The Redaction Annotation tool is the primary redaction feature that allows you to draw redaction rectangles on specific content:
57+
58+
Function: Creates visual redaction annotations that mark content for permanent removal
59+
Usage:
60+
Touch and drag to draw rectangular redaction overlays on any content area.
61+
62+
Process:
63+
- Selected content appears with a customizable overlay (default black)
64+
- Annotations remain editable until explicitly applied
65+
- Can be repositioned or deleted before final application
66+
67+
![Redaction Annotation Tool](./redaction-annotations-images/redaction-annotation-annot.png)
68+
69+
### Page Redaction Tool
70+
71+
The Page Redaction tool enables batch redaction of entire pages based on specific patterns.
72+
73+
![Page Redaction Tool](./redaction-annotations-images/page-redaction-annot.png)
74+
75+
Function: Redacts complete pages or page ranges with a single action
76+
Options Available:
77+
- Odd Pages: Redacts only odd-numbered pages (1, 3, 5, etc.)
78+
- Even Pages: Redacts only even-numbered pages (2, 4, 6, etc.)
79+
- Specific Page: Specify single pages, ranges (e.g., 1-5, 10-15), or comma-separated lists (e.g., 1,3,5-7)
80+
- Current Page: Redacts only the currently displayed page
81+
82+
Usage:
83+
Select desired pattern → Review affected pages in the viewer → Confirm redaction scope
84+
85+
![Page Redaction Tool Dialog](./redaction-annotations-images/page-redaction-dialog-annot.png)
86+
87+
### Redaction Properties Tool
88+
89+
The Redaction Properties tool allows customization of redaction appearance before application.
90+
91+
![Redaction Properties Mobile View](./redaction-annotations-images/redaction-properties-annot.png)
92+
93+
Function: Customize the visual appearance of redaction overlays and text replacement
94+
Customizable Properties:
95+
- Fill Color: Change the redaction overlay color (default: black)
96+
- Outline Color: Set outline color for redaction boxes (optional)
97+
- Overlay Text: Add custom text to appear on redacted areas (e.g., "REDACTED", "CONFIDENTIAL")
98+
- Text Color: Change overlay text color for better visibility
99+
- Text Font: Select font family for overlay text
100+
- Text Alignment: Position overlay text within redaction boxes
101+
- Text Size: Adjust overlay text size relative to redaction area
102+
103+
![Redaction Properties Dialog Mobile View](./redaction-annotations-images/redaction-properties-dialog-annot.png)
104+
105+
## Enabling Redaction Mode in Mobile View
106+
107+
Step 1: Tap the Redaction button in the mobile toolbar to activate redaction mode. The redaction toolbar will appear at the bottom of the viewer.
108+
109+
![Redaction toolbar displayed at bottom of mobile PDF viewer with three distinct tools](./redaction-annotations-images/redaction-mobile-view.png)
110+
111+
Step 2: From the redaction toolbar, select your desired redaction tool:
112+
- First Tool (Redaction Annotation): For selective content redaction
113+
- Second Tool (Page Redaction): For page-wide or pattern-based redaction
114+
- Third Tool (Redaction Properties): For appearance customization
115+
116+
Step 3: Configure your redaction parameters using the selected tool interface.
117+
118+
## Applying Different Redaction Types in Mobile View
119+
120+
### Selective Content Redaction
121+
1. Select Redaction Annotation tool (first button)
122+
2. Choose Content: Tap and drag over text or draw rectangular areas
123+
3. Preview: Check redaction overlays for accuracy
124+
4. Apply: Tap "Apply Redactions" button
125+
126+
### Page-Wide Redaction
127+
1. Select Page Redaction tool (second button)
128+
2. Choose Pattern: Select odd pages, even pages, or custom range
129+
3. Review: Verify affected pages in the viewer
130+
4. Apply: Confirm page redaction scope and apply
131+
132+
### Custom Appearance Redaction
133+
1. Select Redaction Properties tool (third button)
134+
2. Customize: Adjust colors, overlay text, and formatting
135+
3. Preview: See changes applied to existing annotations
136+
4. Apply: Use customized appearance for final redaction
137+
138+
## Applying Redactions in Mobile View
139+
140+
N> Applying redactions is permanent. After applying, the underlying content and text are removed from the document and cannot be recovered.
141+
142+
Once you have configured redactions using any combination of tools.
143+
144+
Step 1: Review all redaction marks and configurations.
145+
146+
![Review Redaction Annotation](./redaction-annotations-images/review-redaction-annotation-mv-annot.png)
147+
148+
Step 2: Tap the Apply Redactions button in the redaction toolbar
149+
150+
![Apply Redaction Button](./redaction-annotations-images/apply-redaction-button-mv.png)
151+
152+
Step 3: Confirm the action when prompted - this operation is permanent and cannot be undone
153+
154+
![Apply Redaction Dialog](./redaction-annotations-images/apply-redaction-dialog-mv-annot.png)
155+
156+
The selected content will be permanently removed and replaced according to your redaction properties (solid color blocks or custom overlay text).
157+
158+
![Applied Redaction](./redaction-annotations-images/applied-redaction-annot.png)
159+
160+
## Removing Redaction Annotations
161+
162+
To remove existing redaction annotations before they are applied:
163+
164+
- Step 1: Tap the Redaction Edit button in the mobile toolbar to enter annotation editing mode
165+
- Step 2: Tap on any existing redaction annotation you wish to remove
166+
- Step 3: Select Delete from the context menu that appears
167+
168+
Alternative: Tap redaction annotation → Use delete button in annotation properties panel
169+
170+
![Delete Redaction Annotation](./redaction-annotations-images/delete-redaction-annotation-annot.png)
171+
172+
N> Once redactions have been applied to the document, they become part of the PDF content and cannot be removed or modified.
173+
174+
## See Also
175+
176+
- [Toolbar](../toolbar)
177+
- [UI Interaction](../ui-interaction)
178+
- [Overview](../overview)

‎Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/search-redact.md‎

Lines changed: 82 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,89 @@
1-
## MD Still in process
2-
Sample Code Snippet for Search Text and Redacat
1+
---
2+
layout: post
3+
title: Search text and redact in Typescript PDF Viewer | Syncfusion
4+
description: Learn how to find text and add redaction annotations programmatically in the Syncfusion JavaScript PDF Viewer.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Search text and redact in JavaScript (ES6) PdfViewer
12+
13+
You can search for a keyword in the loaded PDF and automatically add redaction annotations over each match. The example below wires the extractTextCompleted event, triggers text extraction, performs a search, and places redaction annotations for every result.
14+
15+
N> Prerequisites: Add the PdfViewer control to your JavaScript application and ensure a document is loaded. Make sure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content.
16+
17+
## UI
318
```html
4-
<button id="searchTextRedact">Search Text and Redact</button>
19+
<button id="searchTextRedact">Search Text and Redact</button>
520
```
6-
```ts
7-
document.getElementById('searchTextRedact').addEventListener('click', () => {
8-
// Function to handle extractTextCompleted event
9-
viewer.extractTextCompleted=args=>{
10-
var searchText ="syncfusion";
11-
12-
// Perform text search
13-
var searchResults = viewer.textSearchModule.findText(searchText, false);
14-
15-
if (!searchResults || searchResults.length === 0) {
16-
console.warn("No matches found.");
17-
return;
18-
}
1921

20-
// Loop through search results
21-
for (var i = 0; i < searchResults.length; i++) {
22-
var pageResult = searchResults[i];
23-
if (!pageResult.bounds || pageResult.bounds.length === 0) continue;
24-
25-
// Loop through each bounding box of the found text
26-
for (var j = 0; j < pageResult.bounds.length; j++) {
27-
var bound = pageResult.bounds[j];
28-
29-
// Add a redaction annotation at the found text location
30-
viewer.annotation.addAnnotation("Redaction", {
31-
bound: {
32-
x: (bound.x * 96) / 72,
33-
y: (bound.y * 96) / 72,
34-
width: (bound.width * 96) / 72,
35-
height: (bound.height * 96) / 72
36-
},
37-
pageNumber: pageResult.pageIndex + 1,
38-
overlayText: "Confidential",
39-
fillColor: "#00FF40FF",
40-
fontColor: "#333333",
41-
fontSize: 12,
42-
fontFamily: "Arial",
43-
textAlign: "Center",
44-
markerFillColor: "#FF0000",
45-
markerBorderColor: "#000000"
46-
});
47-
}
22+
## Implementation (ES6)
23+
```js
24+
// Assumes `viewer` is an initialized PDF Viewer instance and a document is loaded
25+
const btn = document.getElementById('searchTextRedact');
26+
27+
btn.addEventListener('click', () => {
28+
// Handle text extraction completion
29+
viewer.extractTextCompleted = (args) => {
30+
const searchText = 'syncfusion'; // change to your keyword
31+
32+
// Perform text search for the provided term
33+
const searchResults = viewer.textSearchModule.findText(searchText, false);
34+
35+
if (!searchResults || searchResults.length === 0) {
36+
console.warn('No matches found.');
37+
return;
38+
}
39+
40+
// Iterate through search results and add redaction annotations
41+
for (let i = 0; i < searchResults.length; i++) {
42+
const pageResult = searchResults[i];
43+
if (!pageResult.bounds || pageResult.bounds.length === 0) continue;
44+
45+
for (let j = 0; j < pageResult.bounds.length; j++) {
46+
const bound = pageResult.bounds[j];
47+
48+
// Convert from points (72 DPI) to pixels (96 DPI) and add redaction
49+
viewer.annotation.addAnnotation('Redaction', {
50+
bound: {
51+
x: (bound.x * 96) / 72,
52+
y: (bound.y * 96) / 72,
53+
width: (bound.width * 96) / 72,
54+
height: (bound.height * 96) / 72
55+
},
56+
pageNumber: pageResult.pageIndex + 1,
57+
overlayText: 'Confidential',
58+
fillColor: '#00FF40FF',
59+
fontColor: '#333333',
60+
fontSize: 12,
61+
fontFamily: 'Arial',
62+
textAlign: 'Center',
63+
markerFillColor: '#FF0000',
64+
markerBorderColor: '#000000'
65+
});
4866
}
4967
}
68+
};
69+
70+
// Trigger text extraction to raise the event
71+
// If your app already extracted text earlier, you can call the search directly
72+
if (typeof viewer.extractText === 'function') {
73+
// Extract text for all pages (if supported in your build)
74+
viewer.extractText(true);
75+
}
5076
});
77+
```
78+
79+
## Notes
80+
- Ensure the PDF is fully loaded before triggering extraction and search.
81+
- Bounds from search are in points (72 DPI). Convert to pixels (96 DPI) to align with annotation coordinates.
82+
- Customize overlay text, colors, and typography as needed.
83+
- Adding a redaction annotation covers the content visually. To permanently remove sensitive data, use the viewer's Apply Redaction action or equivalent API if available in your version.
84+
85+
## See also
5186

52-
```
87+
- [Overview](./overview)
88+
- [Programmatic support](./programmatic-support)
89+
- [Events](./events)

0 commit comments

Comments
 (0)