vue中使用html2Canvas截图下载图片，背景色截取不全

Question

尝试使用setTimeout()  

window.pageYoffset = 0

document.documentElement.scrollTop = 0

document.body.scrollTop = 0等方法都没解决，有哪位大神指点一下

第一张是原图，第二张是下载之后的

html部分
<div>
      <div class="export-btn">
        <span class="export-btn-text" @click="download('satisfaction')">
          {{ $t("btn.export") }}
        </span>
      </div>
      <el-card
        class="lft-card chart-card colls-wrap margintop20"
        v-if="!subAccount"
        ref="satisfaction"
      >
        <div slot="header" class="lft-card-header clearfix">
          <span class="charts-header">
            {{ $t("visitorSatisfactionTitle") }}
          </span>
          <date-set @changetype="setDateBySatisfaction($event)"></date-set>
        </div>
        <satisfaction-chart
          :piedata="satisfactionList"
          id="satisfactionChart"
        ></satisfaction-chart>
      </el-card>
    </div>
  </div>

js部分

download(refs) {
      const ref = this.$refs[refs].$el
      setTimeout(() => {
        //解决下载图片不全的问题
        window.pageYoffset = 0
        document.documentElement.scrollTop = 0
        document.body.scrollTop = 0
        html2canvas(ref, {
          scale: window.devicePixelRatio, //图片不清晰
          dpi: 350,
          backgroundColor: "#F8F9F8",
          timeout: 500 // 加载延时
        }).then(canvas => {
          console.log(canvas)
          debugger
          let dataURL = canvas.toDataURL("image/png")
          this.imgurl = dataURL
          var a = document.createElement("a") //添加一个下载标签
          a.download = name || "pic"
          // 设置图片地址
          a.href = this.imgurl
          a.click()
        })
      }, 1000)
    },

Answer 1

设个固定宽高，宽度100%，高度你按F12看一下现在是多少，直接设置成一样的值就行了