安装依赖

npm i html2canvas --save

引入

import html2canvas from "html2canvas"

使用

<div class="body-content" ref='creatImg'>
    这是要生成图片的区域
</div>

<button @click='saveImg'>保存</button>

saveImg(){
    //为避免出现位置偏移的情况，将滚动条置顶
    document.body.scrollTop = document.documentElement.scrollTop = 0
    html2canvas(this.$refs.creatImg,{scrollY:0}).then(canvas => {
　　　　　　let dataURL = canvas.toDataURL("image/png");
          this.uImgUrl = dataURL;  //生成的图片连接地址
          this.file =  dataURLtoFile(dataURL, `test-${new Date().getTime()}.png`)  //将图片转为fie 文件流 
    }）
}

图片base64格式转换成文件流格式

export function dataURLtoFile(base64File, filename){
    var arr = base64File.split(","),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, { type: mime });
}

收集记录，方便查阅。
来源