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

最新推荐文章于 2025-09-21 16:32:09 发布

原创

最新推荐文章于 2025-09-21 16:32:09 发布 · 1.6k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #前端框架

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

一、安装与引入

安装

npm install html2canvas  # 或 yarn add html2canvas

组件内引入
```
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