前端html2canvas生成截图

Question

代码就是图片中框框组件中的代码，就是要实现这个组建的画面的截图，截图是成功了，但是截图的画面是上一次查询的结果的画面（上面有查询框，我没截），而不是本次结果的截图，哪位可有办法？

```html
<template>
  <div ref="image" class="ring-card">
    <h2 v-if="title" class="chart-title">{{ title }}</h2>
    <div v-loading="loading" class="ring-card__body">
      <level-chart v-if="category.length" :id="id" height="200px" width="100%" :x-data="category" :y-data="data" :show-legend="false" />
      <div v-else>暂无数据</div>
    </div>
  </div>
</template>

<script>
import LevelChart from '@/views/charts/LevelChart.vue'
import searchAPI from '@/api/commonSearch'
import html2canvas from 'html2canvas'
import { base64ToFile } from '@/utils/forDialog'
import fileAPI from '@/api/common'
export default {
  components: { LevelChart },
  props: {
    title: { type: String, default: '' },
    id: { type: String, required: true }, // 图表名称
    searchKey: { type: Object, default: () => { return { type: 1 } } } // 接口入参
  },
  data() {
    return {
      loading: true,
      colors: ['#F27A5B', '#AE46F5', '#0369FF', '#1CBFB0'],
      category: [], // 目录
      data: []// 数值
    }
  },
  watch: {
    searchKey: {
      handler(val) {
        this.initData()
        this.$nextTick(() => {
          this.clickGeneratePicture()
        })
      },
      deep: true
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      this.loading = true
      try {
        console.log('222')
        const res = await searchAPI.getFailureType(this.searchKey)
        const arr = res.data.map(item => {
          return {
            ...item,
            percentage: item.totalNum ? (item.number * 100 / item.totalNum).approximate(1) : 0
          }
        })
        this.category = arr.map(e => e.name)
        this.data = arr.map(e => e.percentage)
        this.loading = false
      } catch (error) {
        this.loading = false
      }
    },
    clickGeneratePicture() {
      html2canvas(this.$refs.image).then(canvas => {
        const imgUrl = canvas.toDataURL('image/png')
        this.file = base64ToFile(imgUrl)
        this.dataURL = imgUrl
        this.uploadFile()
      })
    },
    async uploadFile() {
      const params = {
        type: 7,
        file: this.file
      }
      try {
        await fileAPI.upload(params)
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

```

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

根据你的描述和代码，你在前端使用html2canvas库来生成截图，但是在搜索后发生的数据更新没有被正确捕捉到。这可能是因为你是在初始化数据后立即调用截图函数，而没有等待数据更新完成。你可以尝试在数据更新完成后，再调用截图函数。同时，由于你在页面上看到的内容可能已经更新，但是截图生成的是上一次的数据，可能是由于截图时页面的DOM元素还没有更新。因此，你需要确保截图函数在DOM更新后进行调用。这里有一个可能的解决方案：

首先，你可以在initData方法后添加一个回调来确保数据更新完成后才调用截图函数。此外，由于你是在搜索之后触发截图函数，你可能需要确保搜索完成并更新页面后再进行截图。这里有一种可能的方式是使用Vue的nextTick函数来确保DOM已更新后再进行截图。以下是一个可能的修改后的代码片段：

watch: {
  searchKey: {
    handler(val) {
      this.initData().then(() => { // 假设initData返回一个Promise对象
        this.$nextTick(() => { // 确保DOM已更新后再进行截图
          this.clickGeneratePicture();
        });
      });
    },
    deep: true
  }
},
methods: {
  async initData() {
    // 你的初始化数据代码...
    return new Promise((resolve) => { // 返回Promise对象以等待数据初始化完成
      // 数据初始化完成后调用resolve()
    });
  },
  clickGeneratePicture() {
    // 你的截图代码...
  }
}

在这个修改后的代码中，我们在initData方法完成后通过Promise回调进行截图。然后在Vue的watch中使用nextTick确保DOM已经更新完成再进行截图。如果以上解决方案仍不能解决你的问题，可能需要更深入地检查你的代码以确定问题的根源。希望这个答案能帮到你！