This question is specific to pdf.js, a javascript based pdf renderer. I’m building a custom version where I need to extract the text that I select inside the pdf.
There are other posts where you can fetch the text from one page or the whole pdf document such as the one here , but I’m looking to grab a specific text that the user selects and perhaps alert it or print it in the console.
Advertisement
Answer
What you are looking for is window.getSelection() method. This method returns a specific Selection object with the range of the selected text on the web page.
Here is how you can use getSelection()
together with pdf.js:
function getHightlightCoords() { var pageIndex = PDFViewerApplication.pdfViewer.currentPageNumber - 1; var page = PDFViewerApplication.pdfViewer.getPageView(pageIndex); var pageRect = page.canvas.getClientRects()[0]; var selectionRects = window.getSelection().getRangeAt(0).getClientRects(); var viewport = page.viewport; var selected = selectionRects.map(function (r) { return viewport.convertToPdfPoint(r.left - pageRect.x, r.top - pageRect.y).concat( viewport.convertToPdfPoint(r.right - pageRect.x, r.bottom - pageRect.y)); }); return {page: pageIndex, coords: selected}; } function showHighlight(selected) { var pageIndex = selected.page; var page = PDFViewerApplication.pdfViewer.getPageView(pageIndex); var pageElement = page.canvas.parentElement; var viewport = page.viewport; selected.coords.forEach(function (rect) { var bounds = viewport.convertToViewportRectangle(rect); var el = document.createElement('div'); el.setAttribute('style', 'position: absolute; background-color: pink;' + 'left:' + Math.min(bounds[0], bounds[2]) + 'px; top:' + Math.min(bounds[1], bounds[3]) + 'px;' + 'width:' + Math.abs(bounds[0] - bounds[2]) + 'px; height:' + Math.abs(bounds[1] - bounds[3]) + 'px;'); pageElement.appendChild(el); }); }