本文介绍一种屏幕截图的方法，这个业务场景一般可用于系统反馈相当于截屏，也可以用于分享当前页面，具体还是看自己的需求了。

下载安装

npm install --save html2canvas

1.简单测试

<!--
 * @Author: 择偶时分
 * @Date: 2020-09-14 17:30:53
 * @LastEditTime: 2020-09-14 17:46:40
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
-->
<template>
  <div>
    <div ref="capture"
         class="wrapper">
      <h4>Hello world!</h4>
    </div>
    <el-dialog :visible.sync="dialogVisible"
               width="60%"
               :append-to-body="true" >
      <img :src="imgurl"
           style="width:100%;">
    </el-dialog>
    <el-button class="btn"
               type="success"
               @click="toImage">反馈</el-button>
  </div>
</template>

<script>
import html2canvas from "html2canvas"
export default {
  data() {
    return {
      imgurl: ''
    }
  },
  methods: {
    toImage() {
      const ref = this.$refs.capture
      html2canvas(ref).then(canvas => {
        let dataURL = canvas.toDataURL("image/png")
        this.imgurl = dataURL
        this.dialogVisible = true
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  color: #fff;
  background-color: #ff3cac;
  background-image: linear-gradient(
    225deg,
    #ff3cac 0%,
    #784ba0 50%,
    #2b86c5 100%
  );
  background-image: -webkit-linear-gradient(
    225deg,
    #ff3cac 0%,
    #784ba0 50%,
    #2b86c5 100%
  );
  background-image: -moz-linear-gradient(
    225deg,
    #ff3cac 0%,
    #784ba0 50%,
    #2b86c5 100%
  );
  background-image: -o-linear-gradient(
    225deg,
    #ff3cac 0%,
    #784ba0 50%,
    #2b86c5 100%
  );
}
.btn {
  position: fixed;
  right: 2vw;
  bottom: 2vh;
}
</style>

2.效果预览

组件封装

组件调用

 <div ref="capture" class="wrapper">
     ......
 </div>
 <tao-screenshot vref="capture" />

参数说明

vref 一定需要：表示需要截屏的模块的ref

效果预览

总结：

本文主要借助html2canvas这个库获得canvas截图然后转为base64图片弹框展示,本文封装只考虑了一种就是指定区域截屏，如果想整个body截图也是可以的具体自己可以拓展。

往期文章

Vue前端开发——组件篇
Vue 前端开发——导入Excel/Csv
Vue前端开发-表单封装
Vue前端开发——制作二维码
Vue 前端开发——打印功能实现
Vue前端开发——数据交互axios
Vue前端开发——使用高德地图WebApi
uni-app 项目开发基础搭建