当前位置：首页 > VUE

vue实现页面截屏

2026-02-25 20:32:58VUE

实现页面截屏的方法

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

使用html2canvas库

html2canvas是一个流行的JavaScript库，可以将网页内容转换为Canvas图像，进而保存为图片。

安装html2canvas：

npm install html2canvas

在Vue组件中使用：

import html2canvas from 'html2canvas';

export default {
  methods: {
    captureScreenshot() {
      html2canvas(document.body).then(canvas => {
        const link = document.createElement('a');
        link.download = 'screenshot.png';
        link.href = canvas.toDataURL('image/png');
        link.click();
      });
    }
  }
}

使用dom-to-image库

dom-to-image是另一个轻量级的库，专门用于将DOM节点转换为图像。

安装dom-to-image：

npm install dom-to-image

在Vue组件中使用：

import domtoimage from 'dom-to-image';

export default {
  methods: {
    captureScreenshot() {
      const node = document.getElementById('target-element');
      domtoimage.toPng(node)
        .then(dataUrl => {
          const link = document.createElement('a');
          link.download = 'screenshot.png';
          link.href = dataUrl;
          link.click();
        });
    }
  }
}

使用浏览器原生API

现代浏览器支持原生截屏API，但需要用户授权。

export default {
  methods: {
    async captureScreenshot() {
      try {
        const stream = await navigator.mediaDevices.getDisplayMedia();
        const video = document.createElement('video');
        video.srcObject = stream;
        video.onloadedmetadata = () => {
          const canvas = document.createElement('canvas');
          canvas.width = video.videoWidth;
          canvas.height = video.videoHeight;
          const ctx = canvas.getContext('2d');
          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
          stream.getTracks().forEach(track => track.stop());
          const link = document.createElement('a');
          link.download = 'screenshot.png';
          link.href = canvas.toDataURL('image/png');
          link.click();
        };
      } catch (err) {
        console.error('Error capturing screenshot:', err);
      }
    }
  }
}