时间戳

首页 > 解决方案 > ng2-pdf-viewer：获取高亮文本的坐标

angular - ng2-pdf-viewer：获取高亮文本的坐标

问题描述

我正在将一个实验性的 AngularJS 应用程序移植到 Angular 4。

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

为了做到这一点，AngularJS 应用程序使用了第一个函数，可以在此处的响应中找到如何从 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 包重现这种行为（我无法让 pdf.js 使用 Angular 4 提供可搜索的文本），这里有一些样板代码可以快速让 ng2-pdf-viewer 工作https： //stackblitz.com/edit/ng2-pdf-viewer

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

有没有人遇到过这个挑战并找到了解决它的方法？这个模块不提供这个功能吗？

标签： angularpdf

解决方案

我最终直接使用在网页上的 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 上的实际坐标相差几个像素。用这种方法我无能为力。如果有人提出更好的选择，我将批准一个新的答案。

推荐阅读