1.项目目录下，打开dos窗口使用cnpm安装html2canvas插件。

cnpm isntall html2canvas

2.在使用html2canvas的页面中，引入插件。

import html2canvas from 'html2canvas'

3.先设置截图按钮，然后设置需要截图的div标签的ref。

<el-button @click="screenShot()">截图</el-button>

<div ref="screen">
  <p>html2canvas截图</p>
  <p>html2canvas截图</p>
  <p>html2canvas截图</p>
  <p>html2canvas截图</p>
  <p>html2canvas截图</p>
</div>

4.截图并下载图片到本地

//截屏
screenShot () {
　html2canvas(this.$refs.screen, {
　　　backgroundColor: '#FFFFFF',
     useCORS: true
　}).then((canvas) => {
    if (navigator.msSaveBlob) { // IE10+ 
      let blob = canvas.msToBlob(); 
      return navigator.msSaveBlob(blob, name); 
    } else {
      let imageurl = canvas.toDataURL('image/png')
      //这里需要自己选择命名规则
      let imagename = ""
      this.fileDownload(imageurl, imagename)
    }
　})
},
//下载截屏图片
fileDownload(downloadUrl, downloadName) {
  let aLink = document.createElement("a");
  aLink.style.display = "none";
  aLink.href = downloadUrl;
  aLink.download = `${downloadName}.jpg`;
  // 触发点击-然后移除
  document.body.appendChild(aLink);
  aLink.click();
  document.body.removeChild(aLink);
}

如果按照上述没有出错的话，在网页上截图就大功告成啦！下面是html2canvas的官方文档，英语大神可以看一下。
html2canvas文档