vue-如何将组件内容作为图片生成-html2canvas

怪兽也会哭哭2025-03-26 16:14

1.引入必要的库

这里呢我们使用 html2canvas 库来将 HTML 元素转换为画布（canvas），然后再将其导出为图片。首先，确保在项目中安装了 html2canvas：

复制代码

npm install html2canvas

2. 组件结构

然后在我们的vue文件里面，我们需要有一个容器来包含想要作为图片内容生成的部分。这里自行在文件里面添加.

javascript 复制代码

   <div class="detail-container" ref="xxxContent">


   </div>

3. 创建下载功能

在 <script setup> 部分，去定义一个 download 函数，该函数负责生成图片并下载。

javascript 复制代码

const download = async () => {
  try {
    isDownloading.value = true; // 设置下载状态为正在下载
    await nextTick(); // 等待 DOM 更新

    const html2canvasModule = await import('html2canvas');
    const html2canvas = html2canvasModule.default;

    const canvas = await html2canvas(xxxContent.value, {
      useCORS: true, // 允许跨域
      scale: 2, // 提高图片质量
      backgroundColor: '#ffffff', // 设置背景色
      logging: false // 关闭日志
    });

    canvas.toBlob((blob) => {
      if (blob) {
        saveAs(blob, `[命名]${[数据相关的部分，可以是id、name什么的] || '详情'}.png`); // 下载图片
        ElMessage.success('内容已保存为图片'); // 提示用户
      } else {
        throw new Error('生成图片失败');
      }
    }, 'image/png');

  } catch (error) {
    console.error('生成图片失败:', error);
    ElMessage.error('生成图片失败，请重试'); // 错误处理
  } finally {
    isDownloading.value = false; // 重置下载状态
  }
};

4. 触发下载功能

在模板中，添加一个按钮来触发 download 函数：

html 复制代码

<el-button type="danger" @click="download" :loading="isDownloading" class="action-button">
  {{ isDownloading ? '正在生成...' : '详情图片导出' }}
</el-button>

这样就可以，实现点击按钮，图片生成啦：