cnpm i html2canvas

import html2canvas from "html2canvas";

/**
 * 將指定div下載為圖片
 * @param targetDiv 目標(biāo)div的Dom
 * @param fileName 下載的文件名（無需后綴）
 * @param format 圖片格式：'png' 或 'jpg'
 * @param quality 圖片質(zhì)量（僅對jpg有效，0-1之間）
 */
async function downloadDivAsImage(
  targetDiv: HTMLDivElement,
  fileName: string = "流程圖",
  format: "png" | "jpg" = "png",
  quality: number = 1
) {
  // 1. 檢查目標(biāo)div是否存在
  if (!targetDiv) {
    return;
  }

  try {
    // 2. 使用html2canvas將div轉(zhuǎn)為canvas
    const canvas = await html2canvas(targetDiv, {
      useCORS: true, // 允許跨域圖片（如果div內(nèi)有外部圖片）
      logging: false, // 關(guān)閉日志
      scale: window.devicePixelRatio, // 按設(shè)備像素比縮放，避免模糊
      backgroundColor: null, // 背景透明（如需白色背景可設(shè)為'#ffffff'）
    });

    // 3. 將canvas轉(zhuǎn)為圖片URL
    const imageUrl = canvas.toDataURL(`image/${format}`, quality);

    // 4. 觸發(fā)下載
    const link = document.createElement("a");
    link.href = imageUrl;
    link.download = `${fileName}.${format}`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(imageUrl); // 釋放資源
  } catch (error) {
    console.error("下載失?。?, error);
  }
}

          <Icon
            icon="tabler:download"
            @click="downloadDivAsImage(svgBoxRef!)"
            title="下載"
          />

      <!-- 用于渲染流程圖的容器 -->
      <div ref="svgBoxRef" v-show="svg" class="svgBox" v-html="svg"></div>

const svgBoxRef = ref<HTMLDivElement | null>(null);