html2canvas踩到的坑,图片下载缺失内容

ref绑定整个需要转成图片的区域

<el-button  @click="exportImg('view')">导出</el-button>
<div ref="view">
</div>

刚开始是这样写的,坑太大 在本地环境毫无问题,但是一发上测试环境,每次下载的图片所显示的都不一样,向左偏就算了,甚至显示不完整,这就不能忍了

 exportImg(DivID) {
      const rect = this.$refs[DivID].getBoundingClientRect();
      html2Canvas(this.$refs[DivID], {
        useCORS: true,
        width: rect.width,
        height: rect.height,
      }).then(canvas => {
        let dataURL = canvas.toDataURL("image/png");
        if (dataURL !== "") {
          var a = document.createElement("a");
          a.download =  "图片名";
          a.href = dataURL;
          a.click();
        }
      });
    }

然后搜索一番,说在配置中添加以下配置项就可以

scrollY: 0, //后面调成20也不行
scrollX: 0

又查阅一番资料后(万能的百度),找到了一种可行的思路,先将需要下载的区域进行克隆,然后设置克隆区域的宽高,在导出克隆区域,宽高可根据需要自行调整

exportImg(DivID) {
      const rect = this.$refs[DivID].getBoundingClientRect();
      const copyDom = this.$refs[DivID].cloneNode(true); //将目标区域Dom克隆
      copyDom.style.width = '1100px'   //设置克隆区域的宽高
      copyDom.style.height = "800px";
      document.body.appendChild(copyDom)
      html2Canvas(copyDom, { //直接导出克隆区域图片
        allowTaint: false,
        useCORS: true, //开启
        width: rect.width,
        height: rect.height,
        scrollX: 80,  //设置偏移量
        scrollY: 0
      }).then(canvas => {
        let dataURL = canvas.toDataURL("image/png");
        if (dataURL !== "") {
          var a = document.createElement("a");
          a.download = "图片名";
          a.href = dataURL;
          a.click();
        }
      });
    }

还找到一种办法,打算最后实在不行了再尝试,更换html2canvas的版本,也不知道有没有用 先记录在这里吧!

说是只要把html2canvas版本切换到1.0.0-rc.4这个版本就自然而然解决了。
"html2canvas": "1.0.0-rc.4",