当前位置：首页 > VUE

vue按钮实现截屏

2026-01-07 04:00:54VUE

Vue 按钮实现截屏的方法

在 Vue 项目中实现截屏功能可以通过多种方式完成，以下是几种常见的方法：

使用 html2canvas 库

安装 html2canvas 库：

npm install html2canvas

在 Vue 组件中使用：

<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>

使用第三方截图组件

安装 vue-web-screen-shot：

npm install vue-web-screen-shot

在 Vue 项目中使用：

<template>
  <div>
    <button @click="handleScreenshot">截图</button>
    <vue-web-screen-shot ref="screenShot" @callback="getImg" />
  </div>
</template>

<script>
import VueWebScreenShot from 'vue-web-screen-shot';

export default {
  components: {
    VueWebScreenShot
  },
  methods: {
    handleScreenshot() {
      this.$refs.screenShot.start();
    },
    getImg(data) {
      console.log(data); // 获取截图结果
    }
  }
};
</script>

使用原生 Canvas API

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

<template>
  <div>
    <button @click="takeScreenshot">截图</button>
    <canvas ref="canvas" 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.canvas;
      const ctx = canvas.getContext('2d');

      // 设置 canvas 尺寸与目标元素一致
      const target = document.body; // 或其他目标元素
      canvas.width = target.clientWidth;
      canvas.height = target.clientHeight;

      // 绘制截图
      ctx.drawImage(target, 0, 0, canvas.width, canvas.height);

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