vue + html2Canvas实现网页截图

好的，下面是一个简单的示例代码，使用Vue和html2Canvas生成网页截图：

<template>
  <div>
    <div ref="screenshot">这里是需要截图的内容</div>
    <button @click="capture">生成截图</button>
    <img :src="screenshotDataUrl" v-if="screenshotDataUrl"/>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';

export default {
  data() {
    return {
      screenshotDataUrl: ''
    }
  },
  methods: {
    capture() {
      const el = this.$refs.screenshot;
      html2canvas(el).then(canvas => {
        this.screenshotDataUrl = canvas.toDataURL();
      });
    }
  }
}
</script>

首先，在模板中，我们定义了一个需要截图的区域，这里用一个`div`标签来表示。

然后，在`button`按钮的点击事件中，我们调用`capture`方法来生成截图。在`capture`方法中，我们首先获取需要截图的元素，即通过`this.$refs`获取到的`screenshot`元素。然后，使用`html2canvas`将该元素渲染成canvas对象。最后，将生成的canvas对象转换成Data URL，赋值给`screenshotDataUrl`，以便在模板中显示截图。

需要注意的是，使用html2Canvas生成截图时，需要确保待截图的元素已经完全渲染完成。如果元素中包含图片等异步加载的资源，需要在这些资源加载完成后再进行截图。