如何用Python或JavaScript实现PDF文本鼠标悬停显示图片功能？

一、JavaScript方案（网页端交互优先） #

如果是在网页环境中展示PDF，用JavaScript实现是最灵活的——核心思路是把PDF转为可交互的网页内容，再给目标文本绑定悬停事件。

1. 基于PDF.js的动态渲染方案 #

用PDF.js将PDF渲染到网页画布后，解析文本坐标并叠加交互元素：

// 初始化PDF.js实例
const loadingTask = pdfjsLib.getDocument('your-document.pdf');
loadingTask.promise.then(pdf => pdf.getPage(1)) // 处理第一页，可循环扩展多页
.then(page => {
  const viewport = page.getViewport({ scale: 1.5 });
  const canvas = document.getElementById('pdf-canvas');
  const ctx = canvas.getContext('2d');
  canvas.height = viewport.height;
  canvas.width = viewport.width;

  // 渲染PDF页面到画布
  page.render({ canvasContext: ctx, viewport });

  // 获取页面所有文本及位置信息
  return page.getTextContent();
}).then(textContent => {
  // 创建全局悬浮图片元素
  const hoverImg = document.createElement('img');
  hoverImg.src = 'your-image.png';
  hoverImg.style.position = 'fixed';
  hoverImg.style.display = 'none';
  hoverImg.style.width = '200px';
  document.body.appendChild(hoverImg);

  // 遍历文本，定位目标内容并绑定事件
  textContent.items.forEach(item => {
    if (item.str.includes('特定文本')) {
      // 创建覆盖目标文本的透明触发元素
      const trigger = document.createElement('div');
      trigger.style.position = 'absolute';
      trigger.style.left = `${item.transform[4]}px`;
      trigger.style.top = `${item.transform[5] - item.height}px`;
      trigger.style.width = `${item.width}px`;
      trigger.style.height = `${item.height}px`;
      trigger.style.backgroundColor = 'rgba(0,0,255,0.1)'; // 可选：可视化触发范围

      // 悬停显示图片
      trigger.addEventListener('mouseover', e => {
        hoverImg.style.left = `${e.pageX + 10}px`;
        hoverImg.style.top = `${e.pageY + 10}px`;
        hoverImg.style.display = 'block';
      });
      // 移开隐藏图片
      trigger.addEventListener('mouseout', () => {
        hoverImg.style.display = 'none';
      });

      document.getElementById('pdf-container').appendChild(trigger);
    }
  });
});

2. 先转PDF为HTML再处理 #

用pdf2htmlEX这类工具把PDF转成HTML，直接在HTML中给目标文本加交互：

<!-- 转换后找到目标文本，修改为带标记的元素 -->
<span class="hover-trigger" data-img="your-image.png">特定文本</span>

<script>
  const hoverTrigger = document.querySelectorAll('.hover-trigger');
  const hoverImg = document.createElement('img');
  hoverImg.style.position = 'fixed';
  hoverImg.style.display = 'none';
  document.body.appendChild(hoverImg);

  hoverTrigger.forEach(el => {
    el.addEventListener('mouseover', e => {
      hoverImg.src = el.dataset.img;
      hoverImg.style.left = `${e.pageX + 10}px`;
      hoverImg.style.top = `${e.pageY + 10}px`;
      hoverImg.style.display = 'block';
    });
    el.addEventListener('mouseout', () => {
      hoverImg.style.display = 'none';
    });
  });
</script>

二、Python方案（生成带交互的原生PDF） #

原生PDF支持有限的JavaScript交互，可通过Python库给PDF添加鼠标触发的JS动作，仅在Adobe Acrobat Reader等支持PDF JS的阅读器中生效。

基于PyMuPDF（fitz）的实现 #

import fitz  # 导入PyMuPDF库

# 打开目标PDF
doc = fitz.open('input.pdf')
page = doc[0]  # 选择目标页面

# 搜索目标文本的所有出现位置
target_text = "特定文本"
text_positions = page.search_for(target_text)

# 嵌入图片到PDF（避免外部路径依赖）
img_data = open('your-image.png', 'rb').read()
img_ref = doc.insert_image(fitz.Rect(0,0,0,0), stream=img_data)
# 注意：需通过doc.get_page_images(page.number)确认嵌入图片的名称，替换下方JS中的"/img1"

# 给每个文本位置添加交互注释
for rect in text_positions:
    # 创建透明覆盖注释（触发交互用）
    annot = page.add_freetext_annot(
        rect,
        "",
        fill=(1,1,1,0),  # 完全透明
        border=fitz.Rect(0,0,0,0)  # 无边界
    )

    # 鼠标进入时的JS：显示嵌入的图片
    js_enter = """
        var imgAnnot = this.addAnnot({
            page: this.pageNum,
            type: "Stamp",
            rect: [100, 100, 300, 300],  // 图片显示的位置和尺寸
            name: "hover_img",
            icon: "Custom",
            AP: {N: "/img1"}  // 替换为实际嵌入的图片名称
        });
    """
    annot.set_js_action("Enter", js_enter)

    # 鼠标离开时的JS：删除图片注释
    js_exit = """
        var annots = this.getAnnots({page: this.pageNum});
        for (var i = 0; i < annots.length; i++) {
            if (annots[i].name === "hover_img") {
                this.deleteAnnot(annots[i]);
                break;
            }
        }
    """
    annot.set_js_action("Exit", js_exit)

# 保存修改后的PDF
doc.save('output_with_hover.pdf')
doc.close()

内容的提问来源于stack exchange，提问作者dev740