1.实现效果

2.安装引用Canvas

cnpm install html2canvas --save

在需要使用vue的组件使用映入canvas模块

import html2canvas from "html2canvas"

3.生成图片

在需要生成图片的html区域标签内添加ref标记来获取标签对应的dom组件

<div class="container" ref="imageDom"></div>

转换的函数

    generateImg(){
      html2canvas(this.$refs.imageDom).then(canvas => {
          //将对应dom组件转成图片并生成图片地址
        let imgUrl = canvas.toDataURL()
        // 动态生成下载图片链接
        let a = document.createElement("a")
        a.href = imgUrl
        // 利用浏览器下载器下载图片
        a.setAttribute("download","需要生成图片.png")
        a.click();
      })