How to select text from pdf

Wappler General
, ,
1

I have the container for showing the PDF pages. I want to select text from the pdf. I am showing all the pages and scrolling it. I tried it but its not getting the exact text selection. If I go with page-wise like page1, Page2 it works.
here is the code:

<div class="col-8 pdf-render" style="height: 73vh; overflow-y: scroll;">
                <div class=" row">
                    <div class="col card pt-2 pb-2 ps-2 pe-2">
                        <div id="pdf-wrapper">
                        </div>
                    </div>
                </div>
            </div>

and here is the function:

function renderAllPages() {
  const numPages = pdfDocument.numPages;
  container.innerHTML = '';

  for (let pageNumber = 1; pageNumber <= numPages; pageNumber++) {
    pdfDocument.getPage(pageNumber).then(function (pdfPage) {
      const pdfPageView = new pdfjsViewer.PDFPageView({
        container: container,
        id: pageNumber,
        scale,
        defaultViewport: pdfPage.getViewport({ scale }),
        textLayerFactory: new pdfjsViewer.DefaultTextLayerFactory(),
        annotationLayerFactory: new pdfjsViewer.DefaultAnnotationLayerFactory(),
      });

      pdfPageView.setPdfPage(pdfPage);
      return pdfPageView.draw();
    });
  }
}

Also I am doing highlighting the selected text:

function highlightSelectedText() {
  const activeTextSelection = dmx.parse("content.activeTextSelection.value");
  if (activeTextSelection) {
    $(`#${activeTextSelection}`).removeClass("pdf-highlight");
  }

  const highlightID = "fieldID_" + new Date().getTime();
  const selection = window.getSelection();
  const selectedElement = selection.anchorNode.parentElement;

  if (!selectedElement.classList.contains("pdf-highlight")) {
    selectedElement.classList.add("pdf-highlight");
    dmx.parse(`content.activeTextSelection.setValue("${highlightID}")`);
    selectedElement.id = highlightID;
  }
}