Angular中如何创建Minimap展示指定div的全部内容？

针对你遇到的目标div（高度约20000px）无法完整捕获生成Minimap的问题，提供以下三种可行方案：

方案一：优化html2canvas配置捕获完整内容 #

之前的html2canvas尝试未生效，核心是未正确配置捕获参数并临时调整容器样式让内容完全展开：

public createMinimap(): void {
  const container = document.getElementById(this.innerDivId);
  const minimapContent = document.getElementById('minimap');
  if (!container || !minimapContent) return;

  // 保存容器原始样式
  const originalOverflow = container.style.overflow;
  const originalHeight = container.style.height;
  const originalWidth = container.style.width;

  // 临时修改容器，确保内容完全可见
  container.style.overflow = 'visible';
  container.style.height = 'auto';
  container.style.width = `${container.scrollWidth}px`;

  // 配置html2canvas捕获完整区域
  html2canvas(container, {
    scrollX: 0,
    scrollY: 0,
    windowWidth: container.scrollWidth,
    windowHeight: container.scrollHeight,
    useCORS: true, // 若包含跨域图片需开启
    allowTaint: false
  }).then(canvas => {
    // 缩放canvas适配minimap尺寸
    const minimapWidth = minimapContent.offsetWidth;
    const scaleRatio = minimapWidth / container.scrollWidth;
    const scaledCanvas = document.createElement('canvas');
    scaledCanvas.width = minimapWidth;
    scaledCanvas.height = container.scrollHeight * scaleRatio;
    
    const ctx = scaledCanvas.getContext('2d');
    if (ctx) {
      ctx.scale(scaleRatio, scaleRatio);
      ctx.drawImage(canvas, 0, 0);
    }

    // 更新Minimap内容
    minimapContent.innerHTML = '';
    minimapContent.appendChild(scaledCanvas);

    // 恢复容器原始样式
    container.style.overflow = originalOverflow;
    container.style.height = originalHeight;
    container.style.width = originalWidth;
  });
}

关键要点：临时将容器overflow设为visible、height设为auto，让所有内容展开；通过windowWidth/windowHeight指定捕获的完整区域，最后缩放canvas适配Minimap大小。

方案二：自定义SVG映射（无需第三方库） #

如果不需要精确的视觉还原，可通过遍历目标div的子元素，生成对应的SVG元素，轻量且能完整展示所有内容：

public createMinimap(): void {
  const container = document.getElementById(this.innerDivId);
  const minimapContent = document.getElementById('minimap');
  if (!container || !minimapContent) return;

  minimapContent.innerHTML = '';

  // 计算缩放比例
  const containerWidth = container.scrollWidth;
  const containerHeight = container.scrollHeight;
  const minimapWidth = minimapContent.offsetWidth;
  const minimapHeight = minimapContent.offsetHeight;
  const scale = Math.min(minimapWidth / containerWidth, minimapHeight / containerHeight);

  // 创建SVG容器
  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.setAttribute('width', minimapWidth.toString());
  svg.setAttribute('height', minimapHeight.toString());
  svg.setAttribute('viewBox', `0 0 ${containerWidth} ${containerHeight}`);
  svg.style.transform = `scale(${scale})`;
  svg.style.transformOrigin = 'top left';

  // 遍历子元素生成SVG矩形
  const children = Array.from(container.children) as HTMLElement[];
  children.forEach(child => {
    const rect = child.getBoundingClientRect();
    const containerRect = container.getBoundingClientRect();
    const x = rect.left - containerRect.left;
    const y = rect.top - containerRect.top;

    const svgRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    svgRect.setAttribute('x', x.toString());
    svgRect.setAttribute('y', y.toString());
    svgRect.setAttribute('width', rect.width.toString());
    svgRect.setAttribute('height', rect.height.toString());
    svgRect.setAttribute('fill', getComputedStyle(child).backgroundColor || '#eee');
    svgRect.setAttribute('stroke', '#999');
    svgRect.setAttribute('stroke-width', '1');

    svg.appendChild(svgRect);
  });

  minimapContent.appendChild(svg);
}

关键要点：通过getBoundingClientRect获取元素相对容器的位置，生成对应SVG矩形；利用SVG的viewBox和CSS缩放实现自适应Minimap尺寸，性能优于截图方案。

方案三：CSS缩放容器副本实现实时同步 #

若需要Minimap与原内容实时同步，可克隆目标容器并通过CSS缩放后放入Minimap：

public createMinimap(): void {
  const container = document.getElementById(this.innerDivId);
  const minimapContent = document.getElementById('minimap');
  if (!container || !minimapContent) return;

  minimapContent.innerHTML = '';

  // 克隆目标容器并隐藏
  const containerClone = container.cloneNode(true) as HTMLElement;
  containerClone.id = 'minimap-clone';
  containerClone.style.position = 'absolute';
  containerClone.style.top = '-9999px';
  containerClone.style.left = '-9999px';
  containerClone.style.width = `${container.scrollWidth}px`;
  containerClone.style.height = `${container.scrollHeight}px`;
  containerClone.style.overflow = 'visible';

  document.body.appendChild(containerClone);

  // 计算缩放比例
  const minimapWidth = minimapContent.offsetWidth;
  const minimapHeight = minimapContent.offsetHeight;
  const scale = Math.min(minimapWidth / container.scrollWidth, minimapHeight / container.scrollHeight);

  // 创建缩放容器并添加副本
  const scaledContainer = document.createElement('div');
  scaledContainer.style.transform = `scale(${scale})`;
  scaledContainer.style.transformOrigin = 'top left';
  scaledContainer.style.width = `${container.scrollWidth}px`;
  scaledContainer.style.height = `${container.scrollHeight}px`;
  scaledContainer.appendChild(containerClone);

  minimapContent.appendChild(scaledContainer);

  // 可选：监听原容器变化自动更新Minimap
  // const observer = new MutationObserver(() => this.createMinimap());
  // observer.observe(container, { childList: true, attributes: true, subtree: true });
}

关键要点：克隆容器并移到视口外隐藏，通过CSS缩放后放入Minimap；可配合MutationObserver监听原容器内容变化，实现实时同步。

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