程序媛呀 2021-06-21 15:20 采纳率: 40%
浏览 427
已结题

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

尝试使用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)
    },
  • 写回答

1条回答 默认 最新

  • 风雪一更 2021-06-21 15:45
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 10月21日

悬赏问题

  • ¥20 找驱动QTR2774-SU-IBM版本驱动
  • ¥15 NeRF的代码复现以及人工智能入门
  • ¥15 centos如何做一个可以让ikuai连接的openvpn
  • ¥15 Protege 中的Entities下面的界面删除了如何复原
  • ¥15 scrapy爬虫求帮
  • ¥15 imageEnView绘图问题
  • ¥15 关于#python#的问题:您好可以加您一下联系方式吗,在复现的时候确实有点问题难以解决
  • ¥15 联想电脑重装系统时无法发现硬盘
  • ¥15 MATLAB与UR10e实体机械臂建立通讯
  • ¥15 c++题需要快一点不用opencv