VueVite使用 html2canvas 把Html生成canvas转成图片并保存，以及填坑记录

<template>
  <div>
    <div id="capture" ref="captureRef">
      <!-- 需要生成图片的内容 -->
    </div>
    <button @click="capture">生成图片</button>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
import html2canvas from 'html2canvas';
import { saveAs } from 'file-saver';
 
const captureRef = ref(null);
 
async function capture() {
  try {
    const canvas = await html2canvas(captureRef.value);
    const dataURL = canvas.toDataURL('image/png');
    const blob = await fetch(dataURL).then(r => r.blob());
    saveAs(blob, 'capture.png');
  } catch (error) {
    console.error('生成图片失败:', error);
  }
}
</script>

这段代码使用了Vue3的<script setup>语法糖，简化了组件的编写。它定义了一个函数capture，当按钮点击时，会尝试捕获captureRef中的DOM元素并使用html2canvas将其转换为Canvas，然后将Canvas保存为图片文件。在捕获过程中，可能会出现错误，这些错误会被捕获并在控制台中输出。