当前位置：首页 > VUE

vue实现滚动截屏

2026-03-27 00:09:53VUE

Vue 实现滚动截屏的方法

使用 html2canvas 库

安装 html2canvas 库：

npm install html2canvas

在 Vue 组件中引入并使用：

import html2canvas from 'html2canvas';

export default {
  methods: {
    async captureFullPage() {
      const element = document.documentElement;
      const canvas = await html2canvas(element, {
        scrollY: -window.scrollY,
        scrollX: -window.scrollX,
        windowWidth: document.documentElement.scrollWidth,
        windowHeight: document.documentElement.scrollHeight
      });
      const image = canvas.toDataURL('image/png');
      this.downloadImage(image, 'full-page-screenshot.png');
    },
    downloadImage(url, filename) {
      const link = document.createElement('a');
      link.href = url;
      link.download = filename;
      link.click();
    }
  }
}

使用 dom-to-image 库

安装 dom-to-image 库：

npm install dom-to-image

实现代码：

import domtoimage from 'dom-to-image';

export default {
  methods: {
    captureScrollableElement() {
      const node = document.getElementById('scrollable-element');
      domtoimage.toPng(node)
        .then(dataUrl => {
          const img = new Image();
          img.src = dataUrl;
          document.body.appendChild(img);
        })
        .catch(error => {
          console.error('截图出错:', error);
        });
    }
  }
}

分块截图后拼接

对于超长页面，可分块截图后拼接：

vue实现滚动截屏

async function captureLongPage() {
  const totalHeight = document.body.scrollHeight;
  const viewportHeight = window.innerHeight;
  let canvasList = [];

  for (let y = 0; y < totalHeight; y += viewportHeight) {
    window.scrollTo(0, y);
    const canvas = await html2canvas(document.body, {
      windowHeight: viewportHeight,
      y: y
    });
    canvasList.push(canvas);
  }

  // 合并所有canvas
  const finalCanvas = document.createElement('canvas');
  finalCanvas.width = canvasList[0].width;
  finalCanvas.height = totalHeight;
  const ctx = finalCanvas.getContext('2d');

  let yOffset = 0;
  canvasList.forEach(canvas => {
    ctx.drawImage(canvas, 0, yOffset);
    yOffset += canvas.height;
  });

  return finalCanvas.toDataURL('image/png');
}