使用html2Canvas将盒子内的整体内容作为图片进行导出

 首先下载包

npm i  html2canvas@1.0.0-alpha.12

也可以选择别的版本，但是自测最新的版本不行，会报错。

使用函数

// name是名称，content是你要导出的html元素，可以通过添加id的方式获取如下

     let shareContent = document.getElementById("content");

takeScreenShot(name,content) {
    // 使用html2canvas插件，将数据源中的数据转换成画id布。
    html2canvas(content).then(canvas => {
      // 修改生成的宽度
      // canvas.style.width = "1000px";
      // console.log(canvas, "生成的画布文件");
      let filename = name + '_' + moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss') + '.png'
      let canvasImg = canvas.toDataURL("image/png");
      let a = document.createElement("a"); 
      let event = new MouseEvent("click"); // 创建一个单击事件
      a.download = filename || "photo";
      a.href = canvasImg;
      a.dispatchEvent(event); // 触发a的单击事件
    });
  }