How to select particular text from pdf

Technical Support
, , , ,
1

Product: WebViewer

Product Version:8.0.1

Please give a brief summary of your issue:
(Think of this as an email subject)
I want to give user’s an ability to select a particular text from pdf page

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)
I want to give user to select any text from a pdf page and I want to use that selected text to save in my database also I I want to extract the co-ordinates of selected text.
How can I achieve this in react.
For example In this image I have highlighted a number and I have to select that number and add that in my databse

image
image1827×1003 220 KB

Please provide a link to a minimal sample where the issue is reproducible:

2

Hi There,
You can use our getSelectedText and getSelectedTextQuads methods.
Assuming you are on the text selection tool, you can get the selected text on mouse up event like this:

const { documentViewer } = instance.Core
documentViewer.addEventListener('mouseLeftUp', async (e) => {
  if (documentViewer.getToolMode().name === "TextSelect") {
    const textArray = documentViewer.getSelectedText().split('\n');
    const quads = documentViewer.getSelectedTextQuads()
    const collection = [];
    const pagesWithSelectedText = Object.keys(quads);
    pagesWithSelectedText.forEach(pageNumber => {
      quads[pageNumber].forEach(quad => {
        collection.push({ pageNumber, quad })
      })
    })
    collection.forEach((item, index) => {
      item['text'] = textArray[index]
    })
    console.log(collection)
  }
})

Here is a video that demonstrates the effect of the code

3

Hi @ychen these (x1,y1), (x2,y2), (x3,y3), (x4,y4) which corners these quads represents and in what order?

4

Hi,
The coordinates of a quad represent the corners in this order:

(x4,y4)———(x3,y3)
    |        |
(x1,y1)———(x2,y2)

It is also explained in our documentation here.

5

Hi @ychen ,
I have one doubt that what is the reference point of these x & y co-ordinates at a particular point

co-ordinates
co-ordinates1192×1012 202 KB

6

The x and y refers to the viewer page coordinates system in WebViewer.
There are detailed explanations of how the coordinate systems work in WebViewer in the above link, but as a quick example, if you want to convert the xy coordinates from your mouse event to the viewer page coordinates, the easiest way is to use getViewerCoordinatesFromMouseEvent API:

const { documentViewer } = instance.Core
documentViewer.addEventListener('mouseLeftDown',(e)=>{
    const viewerCoord = documentViewer.getViewerCoordinatesFromMouseEvent(e)
    console.log(viewerCoord)
})