vue2+html2canvas.js实现点击按钮截图功能代码实例，

在Vue2中利用HTML2Canvas.js实现点击按钮截图功能，首先你需要安装HTML2CANVAS库，可以使用npm或yarn进行安装：

npm install html2canvas --save
# 或者
yarn add html2canvas

然后，在Vue组件中，你可以这样创建一个截图按钮并监听点击事件：

<template>
  <div>
    <button @click="handleScreenshot">点击截图</button>
    <img :src="screenshotUrl" alt="截图" v-if="screenshotUrl" />
  </div>
</template>

<script>
import html2canvas from 'html2canvas';

export default {
  data() {
    return {
      screenshotUrl: null,
    };
  },
  methods: {
    handleScreenshot() {
      html2canvas(document.body)
        .then((canvas) => {
          const base64Data = canvas.toDataURL('image/png');
          this.screenshotUrl = base64Data;
        })
        .catch((err) => {
          console.error('Error capturing screenshot:', err);
        });
    },
  },
};
</script>

在这个例子中，当你点击“点击截图”按钮时，`handleScreenshot`方法会触发，它会获取整个页面的HTML内容并转换成一张图片。`toDataURL`函数将生成一个base64编码的图片URL，这个URL会被绑定到`v-if`检查的`screenshotUrl`数据属性上，显示在页面上。

注意：HTML2Canvas并不是完美的解决方案，对于一些复杂的现代Web元素、CSS动画或动态加载的内容可能无法准确捕捉。此外，由于版权和性能考虑，某些网站可能会禁止其抓取。