如何从 pdf.js 中的用户选择中检索文本？

Question

此问题特定于 pdf.js，一个基于 javascript 的 pdf 渲染器。我正在构建一个自定义版本，我需要在其中提取 pdf 中 select 的文本。

在其他帖子中，您可以从一页或整个 pdf 文档中获取文本，例如 here，但我希望获取用户 selects 并可能提醒它或在控制台中打印它。

Answer 1

您要找的是window.getSelection()方法。此方法 returns 具有网页上选定文本范围的特定 Selection 对象。

以下是 getSelection() 与 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);
});
}

Answer 2

pdf.js 在目录 web.

中有一个文件 viewer.html

您必须在 viwer.html

中执行以下两个步骤

添加事件侦听器 onselectionchange。
定义事件处理函数onselectionchange()。

<script>

  // addEventListener version
  document.addEventListener('selectionchange', () => {
    console.log(document.getSelection());
  });

  // onselectionchange version
  document.onselectionchange = () => {
    var text = getSelectedText();

    if(text)
    {
      alert(text); 

    }
  };

  function getSelectedText() {
     if (window.getSelection) {
        return window.getSelection().toString();
     } 
     else if (document.selection) {
         return document.selection.createRange().text;
     }
     return '';
  }
</script>

Answer 3

回复 chitgoks 消息（在 pdf.js 2.12 中不起作用）

我对 semanser 代码做了一个小改动，并在 Chrome 97 和 PDF.js 中对其进行了测试：2.13.99

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 r = selectionRects[0];
var selected = 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};
}



// addEventListener version
  document.addEventListener('selectionchange', () => {
    console.log(getHightlightCoords());
  });

对我有用！

如何从 pdf.js 中的用户选择中检索文本？

How do I retrieve text from user selection in pdf.js?

javascript

pdf

pdf.js