Vue3使用html2canvas实现将指定div下载为图片

cnpm i html2canvas

import html2canvas from "html2canvas";

/**
 * 将指定div下载为图片
 * @param targetDiv 目标div的Dom
 * @param fileName 下载的文件名（无需后缀）
 * @param format 图片格式：'png' 或 'jpg'
 * @param quality 图片质量（仅对jpg有效，0-1之间）
 */
async function downloadDivAsImage(
  targetDiv: HTMLDivElement,
  fileName: string = "流程图",
  format: "png" | "jpg" = "png",
  quality: number = 1
) {
  // 1. 检查目标div是否存在
  if (!targetDiv) {
    return;
  }

  try {
    // 2. 使用html2canvas将div转为canvas
    const canvas = await html2canvas(targetDiv, {
      useCORS: true, // 允许跨域图片（如果div内有外部图片）
      logging: false, // 关闭日志
      scale: window.devicePixelRatio, // 按设备像素比缩放，避免模糊
      backgroundColor: null, // 背景透明（如需白色背景可设为'#ffffff'）
    });

    // 3. 将canvas转为图片URL
    const imageUrl = canvas.toDataURL(`image/${format}`, quality);

    // 4. 触发下载
    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);