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

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条回答

      报告相同问题?

      相关推荐 更多相似问题

      问题事件

      • 已结题 10月21日

      悬赏问题

      • ¥15 类的继承,综合输出学生信息并析构
      • ¥15 js 使用contenteditable属性模拟富文本框的时候如何定位光标到指定位置
      • ¥15 怎么激活组态王的Touchvew菜单和Touchmak 菜单
      • ¥15 Meta分析中,如何在只有样本量的情况下用cma处理效应量r值。
      • ¥15 关于#OpenCV#的问题,如何解决?(语言-qt|开发工具-visual studio)
      • ¥15 centos环境中引入jsoncpp后,编译工程报错,找不到基本库。
      • ¥15 vue3为什么请求在这边获取不到数据呢(关键词-select)
      • ¥20 Multisim仿真设计三路智力抢答装置
      • ¥15 用UML制作简单的语音计算机
      • ¥15 综合的类,这个类里面里面又有构造方法,重载方法,有继承,有重写,有接口