Question

我如何以编程方式：

将HTML / CSS元素叠加在以pdf.js和
控制视口中显示的文档部分

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

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

作为一个具体的例子，如果知道短语＆＃39;这是我的文字。＆＃39;位于我的pdf文档的第4页，在native pdf coordinate system页面上定义此文本位置的框是

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

是否可以1）向下滚动到文档的那一行，使其可见，并且2）在此位置叠加一个div？

我发现这基本上就是内置的文本搜索＆＃39;，＆＃39;找到下一个＆＃39;并且＆＃39;找到上一个＆＃39;它正在做的功能，但在解释代码时遇到一些麻烦。

Answer 1

PDF.js定义了所谓的PageViewport，它允许在屏幕上转换PDF坐标和演示文稿。要创建视口，请参阅PDF页面的getViewport。将坐标转换为屏幕显示：var screenRect = viewport.convertToViewportRectangle([0, 0, 14, 5]);规范化画布上的坐标和叠加div。

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

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

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叠加

1 个答案: