在 pdf.js 查看器中呈现时，在 pdf 文档上按文本位置添加 HTML/CSS 叠加层

Question

我如何以编程方式：

在 pdf.js 中呈现的 PDF 文档上叠加 HTML/CSS 元素，并且
控制在视口中显示的文档部分

使用原生 PDF 坐标系中的位置？

例如，这里的目标是能够突出显示所有出现的短语或添加根据我已经从后端文档中解析出的文本位置定位的交互式设计元素.

举个具体的例子，如果知道短语 'This is my Text.' 位于我的 pdf 文档的第 4 页，并且在 native pdf coordinate system 中定义该文本在页面上的位置的框是

bottom left corner = (0,0)
top right corner = (14, 5)

是否可以 1) 向下滚动到文档的该行以使其可见，以及 2) 在该位置覆盖 div？

我看到这本质上就是内置的 'text search'、'find next' 和 'find prev' 功能，但在解释代码时遇到了一些问题。

Answer 1

PDF.js定义所谓的PageViewport which allows to convert between PDF coordinates and presentation on the screen. To create a viewport see PDF page's getViewport。将坐标转换为屏幕显示：var screenRect = viewport.convertToViewportRectangle([0, 0, 14, 5]); 规范化坐标并在 canvas.

上叠加 div 通用查看器的

API 尚未定义。但是，您可以使用查看器组件获得页面视图：var pageView = PDFViewerApplication.pdfViewer.getPageView(3); // get page 4 view。 pageView 将有 viewport 和 div-容器。（由于 API 尚未定义，名称和参数可能会更改）如果您正在使用查看器容器，请注意它们会在 zooming/scroll 期间定期清理 - 在 pagerendered 之后绘制您的东西事件。

滚动只是在当前视图的 screenRect 区域显示 pageView.div。

var pageNumber = 4;
var pdfRect = [0,0,140,150];

var pageView = PDFViewerApplication.pdfViewer.getPageView(pageNumber - 1);
var screenRect = pageView.viewport.convertToViewportRectangle(pdfRect);

var x = Math.min(screenRect[0], screenRect[2]), width = Math.abs(screenRect[0] - screenRect[2]);
var y = Math.min(screenRect[1], screenRect[3]), height = Math.abs(screenRect[1] - screenRect[3]);

// note: needs to be done in the 'pagerendered' event
var overlayDiv = document.createElement('div');
overlayDiv.setAttribute('style', 'background-color: rgba(255,255,0,0.5);position:absolute;' +
  'left:' + x + 'px;top:' + y + 'px;width:' + width + 'px;height:' + height + 'px;');
pageView.div.appendChild(overlayDiv);

// scroll
scrollIntoView(pageView.div, {top: y});

在 pdf.js 查看器中呈现时，在 pdf 文档上按文本位置添加 HTML/CSS 叠加层

Add HTML/CSS overlays by text location on pdf document when rendering in pdf.js viewer

html

javascript

css

pdf.js