能否在<embed>加载的PDF签名位添加可点击触发矩形？

当然可以实现，下面给你两种靠谱的方案：

方案一：用PDF.js替代embed（推荐） #

放弃<embed>改用PDF.js直接渲染PDF是最稳妥的方式，因为它把PDF转换成浏览器可控的DOM/Canvas元素，能精准定位叠加层：

• 步骤1：用PDF.js加载后端返回的PDF文件（可通过fetch获取Blob后传入）
• 步骤2：提前确定签名区域在PDF中的坐标（比如用PDF工具测量签名区的x、y坐标和宽高，或从PDF表单域元数据读取）
• 步骤3：在PDF渲染后的页面容器内，添加绝对定位的可点击<div>，坐标对应签名区位置
• 步骤4：给这个div绑定点击事件，触发你的第三方签名组件

示例代码如下：

<div id="pdf-container" style="position: relative;"></div>

<script>
// 初始化PDF.js
async function loadPDF() {
  const pdfUrl = '你的后端PDF接口地址';
  const pdf = await pdfjsLib.getDocument(pdfUrl).promise;
  const page = await pdf.getPage(1); // 假设签名在第一页
  const viewport = page.getViewport({ scale: 1 });
  
  // 创建canvas渲染PDF页面
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  canvas.width = viewport.width;
  canvas.height = viewport.height;
  document.getElementById('pdf-container').appendChild(canvas);
  
  await page.render({ canvasContext: context, viewport }).promise;
  
  // 假设签名区坐标是x=200, y=600, 宽150, 高50（根据实际调整）
  const signatureOverlay = document.createElement('div');
  signatureOverlay.style.position = 'absolute';
  signatureOverlay.style.left = `${200}px`;
  signatureOverlay.style.top = `${600}px`;
  signatureOverlay.style.width = `${150}px`;
  signatureOverlay.style.height = `${50}px`;
  signatureOverlay.style.border = '1px dashed #000'; // 可视化定位
  signatureOverlay.style.cursor = 'pointer';
  signatureOverlay.addEventListener('click', () => {
    // 调用你的第三方签名组件
    showSignatureComponent();
  });
  
  document.getElementById('pdf-container').appendChild(signatureOverlay);
}

loadPDF();
</script>

方案二：基于embed/iframe的滚动同步方案（兼容旧场景） #

如果一定要保留<embed>，可以通过监听容器的滚动事件，实时调整叠加层的位置：

• 把包裹embed的容器设为position: relative; overflow: auto;
• 叠加的矩形设为position: absolute;，初始top值设为签名区在PDF中的固定位置
• 监听容器的scroll事件，将矩形的top值设置为「初始top - 容器的scrollTop」

示例代码如下：

<div id="embed-container" style="position: relative; width: 100%; height: 800px; overflow: auto;">
  <embed src="你的后端PDF地址" type="application/pdf" width="100%" height="100%">
  <div id="signature-overlay" style="position: absolute; left: 200px; top: 600px; width: 150px; height: 50px; border: 1px dashed #000; cursor: pointer;"></div>
</div>

<script>
const container = document.getElementById('embed-container');
const overlay = document.getElementById('signature-overlay');
const initialTop = 600; // 签名区在PDF中的初始top位置

container.addEventListener('scroll', () => {
  overlay.style.top = `${initialTop - container.scrollTop}px`;
});

overlay.addEventListener('click', () => {
  // 调用签名组件
  showSignatureComponent();
});
</script>

注意：这个方案的局限性在于不同浏览器的PDF插件渲染尺寸可能有差异，需要你提前在目标浏览器中准确测量签名区的位置。

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