Angular 6中如何同步Adobe插件PDF与矩形框的缩放比例

既然没法直接捕获Adobe PDF插件的缩放事件，也不能换用其他PDF库，那我们可以通过间接监听iframe的尺寸变化来计算缩放比例，进而同步调整矩形的宽高。下面是基于你提供的Angular代码结构的具体实现：

步骤1：修改HTML模板，添加元素引用 #

给iframe和矩形容器添加#标记，方便在组件中获取DOM元素：

<div id="document">
  <iframe #idocument [src]='byPassedFilePath' type="application/pdf" width="100%" [height]='pdfHeight'></iframe>
</div>
<div #rectangle id="rectangle">
  <iframe id="irectangle"></iframe>
</div>

步骤2：组件中实现缩放同步逻辑 #

利用MutationObserver监听iframe的尺寸/样式变化，结合窗口resize事件，实时计算缩放比例并调整矩形大小：

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-your-component', // 替换成你的组件选择器
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements AfterViewInit {
  @ViewChild('idocument') pdfIframe!: ElementRef<HTMLIFrameElement>;
  @ViewChild('rectangle') rectangleEl!: ElementRef<HTMLDivElement>;
  byPassedFilePath = 'your-pdf-file-path';
  pdfHeight = '100vh';
  
  // 配置基础参数：根据你的实际PDF页面尺寸调整
  // 示例：A4纸在96DPI下的宽度约为794px（210mm * 96/25.4）
  originalPdfWidth = 794; 
  // 矩形的原始基准尺寸（你当前CSS里的100px/50px）
  rectBaseWidth = 100;
  rectBaseHeight = 50;

  ngAfterViewInit(): void {
    const pdfIframe = this.pdfIframe.nativeElement;
    const rectangle = this.rectangleEl.nativeElement;

    // 监听iframe的属性变化（Adobe缩放时会修改iframe的尺寸/样式）
    const observer = new MutationObserver(() => {
      this.syncRectangleSize(pdfIframe, rectangle);
    });

    observer.observe(pdfIframe, {
      attributes: true,
      attributeFilter: ['width', 'height', 'style']
    });

    // 同时监听窗口resize，防止容器尺寸变化导致的比例偏差
    window.addEventListener('resize', () => {
      this.syncRectangleSize(pdfIframe, rectangle);
    });

    // 页面加载完成后初始化一次矩形尺寸
    this.syncRectangleSize(pdfIframe, rectangle);
  }

  private syncRectangleSize(pdfIframe: HTMLIFrameElement, rectangle: HTMLDivElement): void {
    const currentPdfWidth = pdfIframe.offsetWidth;
    if (currentPdfWidth === 0) return;

    // 计算当前PDF的缩放比例
    const scaleRatio = currentPdfWidth / this.originalPdfWidth;

    // 同步调整矩形的宽高
    rectangle.style.width = `${this.rectBaseWidth * scaleRatio}px`;
    rectangle.style.height = `${this.rectBaseHeight * scaleRatio}px`;

    // 如果矩形需要定位在PDF的特定位置，还需同步调整top/left：
    // rectangle.style.left = `${yourBaseLeft * scaleRatio}px`;
    // rectangle.style.top = `${yourBaseTop * scaleRatio}px`;
  }
}

关键说明 #

1. 原始PDF尺寸：如果你的PDF不是A4，需要替换originalPdfWidth的值。如果能通过后端接口获取PDF的实际页面宽度（比如解析PDF元数据），会更准确；如果没法获取，也可以在页面加载完成后，将iframe的初始宽度作为originalPdfWidth（因为初始是100%缩放状态）。
2. 定位同步：如果矩形需要固定在PDF的某个位置（比如某段文字上方），记得把定位的top/left值也乘以缩放比例，这样位置也会同步。
3. 兼容性：MutationObserver是现代浏览器都支持的API，不需要额外依赖，能有效捕获Adobe插件对iframe的修改。

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