当前位置：首页 > VUE

vue实现页面截屏

2026-02-09 15:21:34VUE

使用html2canvas库实现截屏

html2canvas是一个流行的JavaScript库，可以将HTML元素渲染为canvas，进而转换为图片。在Vue项目中可以这样使用：

安装依赖

npm install html2canvas

组件中使用

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

<script>
import html2canvas from 'html2canvas';

export default {
  methods: {
    async capture() {
      const element = this.$refs.screenshotTarget;
      const canvas = await html2canvas(element);

      // 转换为图片并下载
      const image = canvas.toDataURL('image/png');
      const link = document.createElement('a');
      link.download = 'screenshot.png';
      link.href = image;
      link.click();
    }
  }
}
</script>

使用dom-to-image库实现截屏

dom-to-image是另一个轻量级的截屏方案，特别适合现代浏览器：

安装依赖

npm install dom-to-image

组件实现

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

export default {
  methods: {
    capture() {
      const node = this.$refs.screenshotTarget;

      domtoimage.toPng(node)
        .then(dataUrl => {
          const link = document.createElement('a');
          link.download = 'screenshot.png';
          link.href = dataUrl;
          link.click();
        });
    }
  }
}
</script>

使用第三方截图组件

对于更复杂的需求，可以考虑专门的Vue截图组件：

安装vue-web-screen-shot

npm install vue-web-screen-shot

组件集成

<template>
  <screen-shot @getImgData="getImgData" />
</template>

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

export default {
  components: { ScreenShot },
  methods: {
    getImgData(data) {
      // data.base64 包含截图数据
      const link = document.createElement('a');
      link.download = 'screenshot.png';
      link.href = data.base64;
      link.click();
    }
  }
}
</script>

处理截图中的跨域资源

当页面包含跨域图片时，需要配置CORS：

html2canvas(element, {
  useCORS: true,  // 启用跨域支持
  allowTaint: true  // 允许污染画布
});

优化截图质量

提高截图分辨率和质量：

html2canvas(element, {
  scale: 2,  // 缩放倍数
  quality: 1,  // 质量(0-1)
  logging: false,  // 关闭日志
  backgroundColor: null  // 透明背景
});

截图特定区域而非整个页面

通过指定裁剪区域实现局部截图：

const rect = element.getBoundingClientRect();
html2canvas(element, {
  x: rect.left,
  y: rect.top,
  width: rect.width,
  height: rect.height,
  windowWidth: document.documentElement.offsetWidth,
  windowHeight: document.documentElement.offsetHeight
});

处理截图中的滚动内容

对于长页面或滚动区域，可以这样处理：

vue实现页面截屏

html2canvas(element, {
  scrollX: -window.scrollX,
  scrollY: -window.scrollY,
  windowWidth: document.documentElement.scrollWidth,
  windowHeight: document.documentElement.scrollHeight
});