如何在嵌入 html 页面的 pdf 查看器顶部覆盖图像？答案

【问题标题】：How to overlay an image on top of a pdfviewer embeded into html page?如何在嵌入 html 页面的 pdf 查看器顶部覆盖图像？
【发布时间】：2012-04-01 21:40:20
【问题描述】：

我正在使用http://pdfobject.com/ jquery 库将外部 pdf 文件加载到 html 页面中。我想要做的是在特定位置覆盖图像，但我正在努力获取嵌入 pdf 中特定文本的确切位置。

我将使用不太有效的解决方案，使用 .mousemove() jquery 函数来跟踪 div 标签内的鼠标位置，但即使在滚动 div 之后位置 (pageX,pageY) 仍然保持不变。

http://jsfiddle.net/2rZw9/

如何做到这一点？

据我所知，如果在 pdfviewer 中放大/缩小，此解决方案不可行，是否有任何其他替代方法可以尽可能准确地将任何对象/元素覆盖在 pdf 查看器上？

【问题讨论】：

标签： jquery pdf jquery-selectors

【解决方案1】：

您可以使用jQuery scrollTop() 获得垂直滚动偏移量：

$('#coord').html(e.pageX + ' ' + ($(this).scrollTop() + e.pageY));

另见updated example。

【讨论】：

太完美了。如果我在.box div 中渲染一个 pdf 文件并在放大/缩小模式下，你知道如何实现吗？

【解决方案2】：

您可以将较高的 z-index 放在要覆盖在 iframe 上的元素上。对于 IE，bgiframe 是一个很棒的 jquery 插件。

【讨论】：