当前位置：首页 > VUE

vue按钮实现截屏

2026-01-12 04:05:27VUE

Vue 按钮实现截屏

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

使用 html2canvas 库

安装 html2canvas 库：

npm install html2canvas

在 Vue 组件中使用：

<template>
  <div>
    <button @click="captureScreenshot">截屏</button>
    <div ref="screenshotTarget">
      <!-- 需要截屏的内容 -->
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';

export default {
  methods: {
    async captureScreenshot() {
      const element = this.$refs.screenshotTarget;
      const canvas = await html2canvas(element);
      const image = canvas.toDataURL('image/png');
      this.downloadImage(image, 'screenshot.png');
    },
    downloadImage(dataUrl, filename) {
      const link = document.createElement('a');
      link.href = dataUrl;
      link.download = filename;
      link.click();
    }
  }
};
</script>

使用 dom-to-image 库

安装 dom-to-image 库：

npm install dom-to-image

在 Vue 组件中使用：

<template>
  <div>
    <button @click="captureScreenshot">截屏</button>
    <div ref="screenshotTarget">
      <!-- 需要截屏的内容 -->
    </div>
  </div>
</template>

<script>
import domtoimage from 'dom-to-image';

export default {
  methods: {
    captureScreenshot() {
      const element = this.$refs.screenshotTarget;
      domtoimage.toPng(element)
        .then(dataUrl => {
          this.downloadImage(dataUrl, 'screenshot.png');
        })
        .catch(error => {
          console.error('截屏失败:', error);
        });
    },
    downloadImage(dataUrl, filename) {
      const link = document.createElement('a');
      link.href = dataUrl;
      link.download = filename;
      link.click();
    }
  }
};
</script>

使用原生 Canvas API

如果不需要复杂的截屏功能，可以直接使用 Canvas API：

vue按钮实现截屏

<template>
  <div>
    <button @click="captureScreenshot">截屏</button>
    <div ref="screenshotTarget">
      <!-- 需要截屏的内容 -->
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    captureScreenshot() {
      const element = this.$refs.screenshotTarget;
      const canvas = document.createElement('canvas');
      canvas.width = element.offsetWidth;
      canvas.height = element.offsetHeight;
      const ctx = canvas.getContext('2d');
      const html = document.documentElement;
      ctx.drawWindow(window, 0, 0, canvas.width, canvas.height, 'white');
      const image = canvas.toDataURL('image/png');
      this.downloadImage(image, 'screenshot.png');
    },
    downloadImage(dataUrl, filename) {
      const link = document.createElement('a');
      link.href = dataUrl;
      link.download = filename;
      link.click();
    }
  }
};
</script>