前端对当前页面进行绘图，并下载。

前端在项目中经常会遇到生成海报、当前页面截图等场景，html2canvas是一个非常不错的选择。

他可以通过获取DOM节点去模块区域进行绘图，功能非常强大。 官网链接html2canvas.hertzen.com/

1、首先安装并引入依赖

npm install --save html2canvas

import html2canvas from "html2canvas";

2、基本使用

html2canvas(document.getElementById("cavansID")).then(function (canvas) {
        document.getElementById("result").innerHTML=''
        document.getElementById("result").appendChild(canvas);
        that.exportCanvasAsPNG();
      })

通过html2canvas完成绘图后给canvas对象放到页面中，方便获取与下载，可根据自己实际情况来处理。

3、下载

通过a标签的方式来实现下载功能

   exportCanvasAsPNG() {
      var canvasElement = document.getElementsByTagName("canvas")[0];
      console.log(canvasElement);
      var MIME_TYPE = "image/png";
      var imgURL = canvasElement.toDataURL(MIME_TYPE);
      var dlLink = document.createElement("a");
      dlLink.download = this.form.awardName + "-" + this.form.name;
      dlLink.href = imgURL;
      dlLink.dataset.downloadurl = [
        MIME_TYPE,
        dlLink.download,
        dlLink.href,
      ].join(":");
      document.body.appendChild(dlLink);
      dlLink.click();
      document.body.removeChild(dlLink);
    },