vue使用html2canvas开发截图功能和解决截图和顶部留白问题的坑

环境：vue2.0+ ； webpack3.0+

项目：开发年终报告，类似支付宝年终账单的功能，需要使用swiper，上下滑动并且用到html2canvas截图功能；

需要安装的包：

npm i html2canvas -S

template中的html代码：

<template>
    //添加一个class为page的div，里面包含所修改截图的html内容
    <div class="page"  @click="saveImg('page01')">...</div>
</template>

methods方法：

    saveImg(id) {
      this.htmToBase64(id).then(canvas => {
        //这就得到的截图的base64的格式了
        var base64 = canvas.toDataURL("image/png");
        if (!base64) {
          alert("获取图片失败");
          return;
        }
        var bs64 = base64.split("base64,")[1];
        //cordova是和app通信的框架，能吊起app保存图片到手机相册的权限，需要app配置和支持cordova才能执行下面的代码。
        window.cordova.exec(
          function(result) {
            alert("图片已保存到本地相册，请将图片分享给好友吧~");
          },
          function(error) {
            alert("调用失败");
          },
          "WorkPlus_Image",
          "actionForLongPressImage",
          [{ imageData: bs64 }]
        );
      });
    },
   async  htmToBase64(id) {
      var shareContent =document.querySelector(".page");
      var width = shareContent.offsetWidth;
      var height = shareContent.offsetHeight;
      var scale = 2;
      var opts = {
        scale: scale,
        useCORS: true,
        logging: true,
        width: width,
        height: height
      };
      return await html2canvas(document.querySelector(".page"), opts);
    }

遇到的坑：截图的顶部一块白色的空白

解决办法：父级的div page 添加下面的css可以解决问题

  .page{
    position:fixed;
    top:0;
    left:0;
    z-index:9999;
    width: 100%;
    height: 100vh;
    overflow: hidden;  
}