vue3 使用 html2canvas插件循环生成多张海报

Vue3中使用`html2canvas`插件可以将DOM内容转换成图片，常用于生成静态页面截图。如果你想在循环中生成多张海报，首先需要安装`html2canvas`库，可以通过npm或yarn进行安装：

npm install html2canvas
# 或者
yarn add html2canvas

然后在你的Vue组件中，创建一个数据数组来存储每张海报的数据，并使用`async/await`处理异步操作：

<template>
  <div v-for="(item, index) in posterData" :key="index">
    <div :id="'poster-' + index">{{ item.content }}</div>
  </div>
</template>

<script setup>
import html2canvas from 'html2canvas';

const posterData = [
  // 这里定义你的海报数据
];

const generatePosters = async () => {
  for (let i = 0; i < posterData.length; i++) {
    const element = document.getElementById(`poster-${i}`);
    try {
      const canvas = await html2canvas(element);
      // 可能需要设置canvas大小和样式
      const imgUrl = canvas.toDataURL('image/png');
      console.log(`Generated poster ${i+1}:`, imgUrl);
      // 根据需求，你可以在这里保存图片、上传到服务器或显示给用户
    } catch (error) {
      console.error(`Failed to generate poster ${i+1}`, error);
    }
  }
};
</script>

当你需要生成海报时，只需调用`generatePosters()`函数。