在pdf.js查看器中呈现时，根据pdf文档上的文本位置添加HTML/CSS覆盖
如何以编程方式：
- 在pdf.js中呈现的PDF文档上覆盖HTML/CSS元素，以及
- 控制视图中显示的文档中的部分。
使用本机PDF坐标系中的位置？
这里的目标是，例如，能够突出显示所有出现的短语或添加交互式设计元素，这些元素是根据我已经从后端的文档中解析出来的文本位置来定位的。
作为一个具体的例子，如果知道短语‘这是我的文本。’位于我的pdf文档的第4页，定义此文本在原生pdf坐标系页面中的位置的框为
bottom left corner = (0,0)
top right corner = (14, 5)是否可以向下滚动到文档的那一行，以便它是可见的，以及2)在这个位置上覆盖一个div？
我看到，这本质上就是内置的“文本搜索”、“查找下一步”和“查找prev”功能所做的工作，但在解释代码时遇到了一些困难。
回答 1
Stack Overflow用户
发布于 2015-01-08 14:37:49
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-container。(由于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});https://stackoverflow.com/questions/27830725
复制相似问题
腾讯云开发者
