Question

我正在将实验性AngularJS应用移植到Angular 4。

该应用程序的主要功能之一是用户能够突出显示PDF中的文本并获得与其选择对应的坐标（PDF是595x842像素的矩形，为使事情简单，假设用户只能选择一行文本，我们将返回所选内容的最左下角）

为此，AngularJS应用使用了第一个函数，该函数可以在How do I retrieve text from user selection in 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 selectionRect = selectionRects[0]; //only care about one line, maybe forbid multi line
    var viewport = page.viewport;
    var leftAndBot = viewport.convertToPdfPoint(selectionRect.left - pageRect.x, selectionRect.top - pageRect.y);
    return leftAndBot
}

我一直在尝试使用ng2-pdf-viewer包重现此行为（我无法通过Angular 4获得pdf.js来提供可搜索的文本），这是一些快速获取ng2-pdf-viewer的样板代码工作https://stackblitz.com/edit/ng2-pdf-viewer

我已经在源代码中浏览了两个小时，以寻找可以从中获取坐标的回调，但是到目前为止，我还没有发现任何高级函数可以执行此操作。

有没有人遇到过这一挑战并找到了解决之道？此模块不提供此功能吗？

Answer 1

我最终直接使用在网页PDF上呈现的textLayer，而不是库本身。

我将pdf容器的大小调整为595x842，

<div class="pdf-container">
  <pdf-viewer [src]="src"
              [zoom]="0.75">
  </pdf-viewer>

然后我添加了以下功能

public onClick(){
    const textLayer = document.getElementsByClassName('TextLayer');
    const x = window.getSelection().getRangeAt(0).getClientRects()[0].left - textLayer[0].getBoundingClientRect().left;
    const y = window.getSelection().getRangeAt(0).getClientRects()[0].top - textLayer[0].getBoundingClientRect().top;
}

您可能会从函数名称中猜到，我只需单击一个按钮即可调用此函数，但是当然您可以根据需要随意调用它（只要呈现了PDF）

请注意，由于使用PDF.JS渲染文本层的方式，您选择的坐标可能与所选PDF的实际坐标相差几个像素。使用这种方法我对此无能为力。如果有人提出更好的选择，我将批准一个新的答案。

ng2-pdf-viewer：获取突出显示文本的坐标

1 个答案: