Vue3中使用html2canvas详解及常见问题解决方案

在 Vue3 中使用 html2canvas 实现 HTML 转 Canvas 功能详解及常见问题解决方案如下：

---

一、安装与引入

1. 安装

   npm install html2canvas  # 或 yarn add html2canvas
   

2. 组件内引入

   import html2canvas from 'html2canvas';
   

---

二、基础用法

1. 获取 DOM 元素

使用 ref 获取需要截图的元素：

<template>
  <div class="container" ref="captureRef">
    <!-- 需要截图的内容 -->
  </div>
  <button @click="capture">截图</button>
</template>

<script setup>
import {
      ref } from 'vue';
const captureRef = ref(null);

const capture = async () => {
     
  if (!captureRef.value) return;
  const canvas =