如何实现 vue3.0 + html2canvas 一键截图保存

1. 安装 html2canvas

npm install html2canvas

2. 在 Vue 组件中使用 html2canvas

<template>
  <div>
    <!-- 可截图区域 -->
    <div ref="screenshotArea">
      <!-- ... -->
    </div>
    <button @click="handleScreenshot">截图保存</button>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';

export default {
  methods: {
    handleScreenshot() {
      const screenshotArea = this.$refs.screenshotArea;
      html2canvas(screenshotArea)
        .then(canvas => {
          // 生成图片
          const imgUrl = canvas.toDataURL();
          // 下载图片
          const link = document.createElement('a');
          link.download = 'screenshot.png';
          link.href = imgUrl;
          link.click();
        });
    },
  },
};
</script>

3. 完成一键截图保存功能。