Skip to content

Commit ca6831e

Browse files
KameshRajendranKameshRajendran
authored
Merge pull request #2446 from syncfusion-content/1016259-VideoURL-Hf
1016259: Moved Development changes to Hotfix in React PDF Viewer
2 parents 504c6c4 + 288526a commit ca6831e

13 files changed

Lines changed: 1265 additions & 874 deletions

File tree

‎Document-Processing-toc.html‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1049,7 +1049,7 @@
10491049
<li><a href="/document-processing/pdf/pdf-viewer/react/toolbar-customization/custom-toolbar">Custom Toolbar</a></li>
10501050
</ul>
10511051
</li>
1052-
<li><a href="/document-processing/pdf/pdf-viewer/react/navigation">Interactive PDF Navigation</a>
1052+
<li><a href="/document-processing/pdf/pdf-viewer/react/interactive-pdf-navigation/overview">Interactive PDF Navigation</a>
10531053
<ul>
10541054
<li><a href="/document-processing/pdf/pdf-viewer/react/interactive-pdf-navigation/page">Page Navigation</a></li>
10551055
<li><a href="/document-processing/pdf/pdf-viewer/react/interactive-pdf-navigation/bookmark">Bookmark Navigation</a></li>
@@ -1059,7 +1059,14 @@
10591059
</li>
10601060
<li><a href="/document-processing/pdf/pdf-viewer/react/magnification">Magnification</a></li>
10611061
<li><a href="/document-processing/pdf/pdf-viewer/react/accessibility">Accessibility</a></li>
1062-
<li><a href="/document-processing/pdf/pdf-viewer/react/text-search">Text Search</a></li>
1062+
<li><a href="/document-processing/pdf/pdf-viewer/react/text-search/overview">Text Search and Extraction</a>
1063+
<ul>
1064+
<li><a href="/document-processing/pdf/pdf-viewer/react/text-search/text-search-features">Text Search</a></li>
1065+
<li><a href="/document-processing/pdf/pdf-viewer/react/text-search/text-search-events">Text Search Events</a></li>
1066+
<li><a href="/document-processing/pdf/pdf-viewer/react/text-search/find-text">Find Text Method</a></li>
1067+
<li><a href="/document-processing/pdf/pdf-viewer/react/how-to/extract-text">Extract Text with Options</a></li>
1068+
</ul>
1069+
</li>
10631070
<li>Annotation
10641071
<ul>
10651072
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/overview">Overview</a></li>

‎Document-Processing/PDF/PDF-Viewer/react/Redaction/overview.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ domainurl: ##DomainURL##
1212

1313
Redaction annotations hide confidential or sensitive information in a PDF. The Syncfusion React PDF Viewer (EJ2) enables marking areas or entire pages for redaction, customizing appearance, and applying changes permanently.
1414

15+
Check out the following video to learn how to Redact PDF Content in the React PDF Viewer.
16+
{% youtube "https://www.youtube.com/watch?v=ZW9DswdpA7Q" %}
17+
1518
## Enable the redaction toolbar
1619

1720
To enable the redaction toolbar, configure the [`toolbarSettings.toolbarItems`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarsettings#toolbaritems) property of the PdfViewer instance to include the **RedactionEditTool**. See this [guide](./toolbar#enable-redaction-toolbar) to enable redaction toolbar.

‎Document-Processing/PDF/PDF-Viewer/react/how-to/extract-text.md‎

Lines changed: 46 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -7,86 +7,73 @@ platform: document-processing
77
documentation: ug
88
---
99

10-
## Extract text method in the PDF Viewer
10+
# Extract text method in the PDF Viewer
11+
12+
## Overview
1113

1214
The `extractText` method retrieves text content and, optionally, positional data for elements on one or more pages. It returns a Promise that resolves to an object containing extracted `textData` (detailed items with bounds) and `pageText` (concatenated plain text).
1315

14-
**Parameters overview:**
16+
## Parameters
1517

1618
- `startIndex` — Starting page index (0-based).
17-
- `endIndex` or options — Either the ending page index for a range extraction, or an options object specifying extraction criteria for a single page.
19+
- `endIndex` or `options` — Either the ending page index for a range extraction, or an options object specifying extraction criteria for a single page.
1820
- `options` (optional) — Extraction options such as `TextOnly` or `TextAndBounds` to control whether bounds are included.
1921

20-
**Returned object shape (example):**
22+
## Returned object
2123

2224
- `textData` — Array of objects describing extracted text items, including bounds and page-level text.
2325
- `pageText` — Concatenated plain text for the specified page(s).
2426

25-
### Usage of extractText in Syncfusion PDF Viewer Control
27+
## Complete example
2628

2729
Here is an example that demonstrates how to use the extractText method along with event handling:
2830

29-
```html
30-
<body>
31-
<button onclick="extrctText()">extrctText</button>
32-
<button onclick="extrctsText()">extrctsText</button>
33-
<div id='sample'>
34-
<div id='loader'>Loading....</div>
35-
</div>
36-
</body>
37-
38-
<script>
39-
// Function to extract text from a specific page (page 1)
40-
function extrctText(){
41-
var viewer = document.getElementById('container').ej2_instances[0];
42-
viewer.extractText(1, 'TextOnly').then((val) => {
43-
console.log('Extracted Text from Page 1:');
44-
console.log(val);
45-
});
46-
}
47-
// Function to extract text from a range of pages (pages 0 to 2)
48-
function extrctsText(){
49-
var viewer = document.getElementById('container').ej2_instances[0];
50-
viewer.extractText(0, 2, 'TextOnly').then((val) => {
51-
console.log('Extracted Text from Pages 0 to 2:');
52-
console.log(val);
53-
});
54-
}
55-
</script>
56-
```
57-
5831
{% tabs %}
59-
{% highlight ts tabtitle="Standalone" %}
32+
{% highlight ts tabtitle="App.tsx" %}
6033
{% raw %}
34+
import {
35+
PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
36+
ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner,
37+
PageOrganizer, Inject, ExtractTextOption
38+
} from '@syncfusion/ej2-react-pdfviewer';
39+
import { useRef, RefObject } from 'react';
6140

62-
import * as ReactDOM from 'react-dom';
63-
import * as React from 'react';
64-
import './index.css';
65-
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
66-
export function App() {
67-
return (<div>
68-
<div className='control-section'>
69-
<PdfViewerComponent
70-
id="container"
71-
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
72-
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
73-
style={{ height: '680px' }}
74-
>
75-
<Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
76-
Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
77-
</PdfViewerComponent>
78-
</div>
79-
</div>);
41+
export default function App() {
42+
const viewerRef: RefObject<PdfViewerComponent | null> = useRef<PdfViewerComponent>(null);
43+
const extractText = async () => {
44+
console.log(await viewerRef.current?.extractText(1, ExtractTextOption.TextOnly));
45+
}
46+
const extractsText = async () => {
47+
console.log(await viewerRef.current?.extractText(0, 2, ExtractTextOption.TextOnly));
48+
}
49+
return (
50+
<div style={{ height: '100vh' }}>
51+
<button onClick={extractText}>Single page</button>
52+
<button onClick={extractsText}>Multiple pages</button>
53+
<PdfViewerComponent
54+
id="PdfViewer"
55+
ref={viewerRef}
56+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
57+
resourceUrl="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib"
58+
style={{ height: '100%' }}
59+
>
60+
<Inject
61+
services={[
62+
Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
63+
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
64+
]}
65+
/>
66+
</PdfViewerComponent>
67+
</div>
68+
);
8069
}
81-
const root = ReactDOM.createRoot(document.getElementById('sample'));
82-
root.render(<App />);
83-
8470
{% endraw %}
8571
{% endhighlight %}
8672
{% endtabs %}
8773

88-
#### Explanation
89-
- Single page: Extracts text from page 1 (`startIndex = 1`) using `TextOnly`.
90-
- Multiple pages: Extracts text from pages 0–2 (`startIndex = 0, endIndex = 2`) using `TextOnly`.
74+
**Expected result:**
75+
76+
- Clicking single page, extracts text from page 1 (`startIndex = 1`) using `TextOnly`.
77+
- Clicking multiple pages, extracts text from pages 0–2 (`startIndex = 0, endIndex = 2`) using `TextOnly`.
9178

9279
[View Sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to)

0 commit comments

Comments
 (0)