Text selected in a document can be extracted using the following functions:
DocumentViewer.getSelectedTextDocumentViewer.getSelectedTextQuadsQuad objects for the currently selected text.getSelectedTextQuads will return an array for each line of selected text. The following is an example of it being used
JavaScript (v8.0+) JavaScript (v7.0+) JavaScript (v6.0+)
1 const quads = documentViewer. getSelectedTextQuads (documentViewer. getCurrentPage ());
1 const quads = docViewer. getSelectedTextQuads (docViewer. getCurrentPage ());
1 const quads = docViewer. getSelectedTextQuads (docViewer. getCurrentPage ());
In the above sample, getSelectedTextQuads will return an array of Quad objects. The array will contain three Quad objects, one for each rectangle of selected text.
It's possible for a user to select text across multiple pages so if getSelectedTextQuads is called without any parameters then Quads will be returned for every page with selected text. The result is an object with keys for each page number:
JavaScript 1 {
2 2 : [{ /* quad1 */ }, { /* quad2 */ }, { /* quad3 */ }]
3 }
Where '2' is the page number where the selected text is found.
For the image above there is text selected on pages 2 and 3 so the result of getSelectedTextQuads will look like this:
JavaScript 1 {
2 2 : [{ /* quad1 */ }, { /* quad2 */ }],
3 3 : [{ /* quad3 */ }]
4 };
Getting selected text from events Be notified when text is selected using the textSelected
JavaScript (v8.0+) JavaScript (v7.0+) JavaScript (v6.0+)
1 WebViewer ({ ... }, viewerElement). then ( instance => {
2 const { documentViewer } = instance.Core;
3
4 documentViewer. addEventListener ( ' textSelected ' , ( quads , selectedText , pageNumber ) => {
5 // quads will be an array of 'Quad' objects
6 // text is the selected text as a string
7 if (selectedText.length > 0 ) {
8 console. log (selectedText);
9 }
10 });
11 });
1 WebViewer ({ ... }, viewerElement). then ( instance => {
2 const { docViewer } = instance;
3
4 docViewer. on ( ' textSelected ' , ( quads , selectedText , pageNumber ) => {
5 // quads will be an array of 'Quad' objects
6 // text is the selected text as a string
7 if (selectedText.length > 0 ) {
8 console. log (selectedText);
9 }
10 });
11 });
1 WebViewer ({ ... }, viewerElement). then ( instance => {
2 const { docViewer } = instance;
3
4 docViewer. on ( ' textSelected ' , ( quads , selectedText , pageIndex ) => {
5 // quads will be an array of 'Quad' objects
6 // text is the selected text as a string
7 if (selectedText.length > 0 ) {
8 console. log (selectedText);
9 }
10 });
11 });
The textSelected event get fired whenever another character is selected or deselected. Also the textSelected event fires once for each page with selected text. So if text is selected on page A and B, and the selected text on page A changed, the textSelected event will fire once for each page even though there wasn't any changes for page B.
Getting selected text from browser events Get selected text by listening for a keydown or clipboard copy event.
JavaScript (v8.0+) JavaScript (v7.0+) JavaScript (v6.0+)
1 WebViewer ({ ... }, viewerElement). then ( instance => {
2 const { documentViewer } = instance.Core;
3 const showSelectedText = () => {
4 const page = documentViewer. getCurrentPage ();
5 const text = documentViewer. getSelectedText (page);
6
7 if ( !! text) {
8 console. log (text);
9 }
10 }
11
12 // Optionally use keyDown events
13 documentViewer. addEventListener ( ' keyDown ' , function ( je , e ) {
14 if (e.keyCode == 67 && (e.ctrlKey || e.metaKey)) {
15 showSelectedText ();
16 console. log ( ' Ctrl+C pressed ' );
17 }
18 });
19
20 // Otherwise use the copy event
21 const iframeWindow = instance. UI .iframeWindow;
22 iframeWindow. addEventListener ( ' copy ' , function ( e ) {
23 showSelectedText ();
24 console. log ( ' Ctrl+C (copy) pressed ' );
25 });
26 });
1 WebViewer ({ ... }, viewerElement). then ( instance => {
2 const { docViewer } = instance;
3 const showSelectedText = () => {
4 const page = docViewer. getCurrentPage ();
5 const text = docViewer. getSelectedText (page);
6
7 if ( !! text) {
8 console. log (text);
9 }
10 }
11
12 // Optionally use keyDown events
13 docViewer. on ( ' keyDown ' , function ( je , e ) {
14 if (e.keyCode == 67 && (e.ctrlKey || e.metaKey)) {
15 showSelectedText ();
16 console. log ( ' Ctrl+C pressed ' );
17 }
18 });
19
20 // Otherwise use the copy event
21 var iframeWindow = instance.iframeWindow;
22 iframeWindow. addEventListener ( ' copy ' , function ( e ) {
23 showSelectedText ();
24 console. log ( ' Ctrl+C (copy) pressed ' );
25 });
26 });
1 WebViewer ({ ... }, viewerElement). then ( instance => {
2 const { docViewer } = instance;
3 const showSelectedText = () => {
4 const page = docViewer. getCurrentPage ();
5 const text = docViewer. getSelectedText (page);
6
7 if ( !! text) {
8 console. log (text);
9 }
10 }
11
12 // Optionally use keyDown events
13 docViewer. on ( ' keyDown ' , function ( je , e ) {
14 if (e.keyCode == 67 && (e.ctrlKey || e.metaKey)) {
15 showSelectedText ();
16 console. log ( ' Ctrl+C pressed ' );
17 }
18 });
19
20 // Otherwise use the copy event
21 var iframeWindow = instance.iframeWindow;
22 iframeWindow. addEventListener ( ' copy ' , function ( e ) {
23 showSelectedText ();
24 console. log ( ' Ctrl+C (copy) pressed ' );
25 });
26 });
Use the text selection complete event with the TextSelect tool and listen for selectionComplete.
JavaScript (v8.0+) JavaScript (v7.0+) JavaScript (v6.0+)
1 WebViewer ({ ... }, viewerElement). then ( instance => {
2 const { documentViewer } = instance.Core;
3
4 documentViewer. getTool ( ' TextSelect ' ). addEventListener ( ' selectionComplete ' , ( startQuad , allQuads ) => {
5 // the startQuad and allQuads will have the X and Y values you want
6 });
7 });
1 WebViewer ({ ... }, viewerElement). then ( instance => {
2 const { docViewer } = instance;
3
4 docViewer. getTool ( ' TextSelect ' ). on ( ' selectionComplete ' , ( startQuad , allQuads ) => {
5 // the startQuad and allQuads will have the X and Y values you want
6 });
7 });
1 WebViewer ({ ... }, viewerElement). then ( instance => {
2 const { docViewer } = instance;
3
4 docViewer. getTool ( ' TextSelect ' ). on ( ' selectionComplete ' , ( startQuad , allQuads ) => {
5 // the startQuad and allQuads will have the X and Y values you want
6 });
7 });
