当前位置：首页 > VUE

vue按钮实现截屏

2026-03-06 16:53:34VUE

实现截屏功能的Vue按钮

在Vue中实现截屏功能可以通过多种方式完成，以下介绍两种常见方法：使用html2canvas库和原生Canvas API。

使用html2canvas库

安装html2canvas库：

npm install html2canvas

创建截屏组件：

<template>
  <div>
    <button @click="captureScreen">截屏</button>
    <div ref="screenshotTarget">
      <!-- 需要截屏的内容 -->
    </div>
    <img v-if="screenshotData" :src="screenshotData" alt="截屏结果">
  </div>
</template>

<script>
import html2canvas from 'html2canvas';

export default {
  data() {
    return {
      screenshotData: null
    };
  },
  methods: {
    async captureScreen() {
      const element = this.$refs.screenshotTarget;
      try {
        const canvas = await html2canvas(element);
        this.screenshotData = canvas.toDataURL('image/png');
      } catch (error) {
        console.error('截屏失败:', error);
      }
    }
  }
};
</script>

使用原生Canvas API

对于简单的截屏需求，可以直接使用Canvas API：

<template>
  <div>
    <button @click="takeScreenshot">截屏</button>
    <canvas ref="screenshotCanvas" style="display:none;"></canvas>
    <img v-if="screenshotUrl" :src="screenshotUrl" alt="截屏结果">
  </div>
</template>

<script>
export default {
  data() {
    return {
      screenshotUrl: null
    };
  },
  methods: {
    takeScreenshot() {
      const canvas = this.$refs.screenshotCanvas;
      const ctx = canvas.getContext('2d');

      // 设置canvas尺寸匹配窗口
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      // 绘制当前页面到canvas
      ctx.drawImage(document.documentElement, 0, 0);

      // 转换为数据URL
      this.screenshotUrl = canvas.toDataURL('image/png');
    }
  }
};
</script>

全屏截屏实现

如果需要截取整个页面而不仅仅是可见区域：

async function captureFullPage() {
  const body = document.body;
  const originalHeight = body.style.height;

  // 临时设置body高度为整个文档高度
  body.style.height = document.documentElement.scrollHeight + 'px';

  try {
    const canvas = await html2canvas(body);
    const imageData = canvas.toDataURL('image/png');
    // 恢复原始高度
    body.style.height = originalHeight;
    return imageData;
  } catch (error) {
    body.style.height = originalHeight;
    throw error;
  }
}

保存截屏到本地

添加保存功能：

vue按钮实现截屏

methods: {
  saveScreenshot() {
    if (!this.screenshotData) return;

    const link = document.createElement('a');
    link.download = 'screenshot.png';
    link.href = this.screenshotData;
    link.click();
  }
}