vue延时发送，div图片保存到后端

最新推荐文章于 2024-01-19 11:40:40 发布

Mr.ninglixin

最新推荐文章于 2024-01-19 11:40:40 发布

阅读量234

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_46572329/article/details/125499413

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

开始没有用这个方法时
let toDataURL = canvas.toDataURL(image/png)
canvas.toDataURL(image/png) 没返回时就走下一步，toDataURL 为undefined 后来用了
this.$nextTick(() => {}方法走完上一步在调用成功完成，把div图片保存到后端

  this.$nextTick(() => {
          this.sendRecommendation()
})

handleOperate() {
      let state = this.comparedate(new Date(this.model.startDate), new Date(this.model.endDate))
      if (!state) {
        this.$message.warning('开始日期不能大于结束日期,请重新选择!!!')
        return
      }
      let DivID = 'recommendationLetter'
       html2canvas(this.$refs[DivID]).then(async canvas => {
        let toDataURL =  canvas.toDataURL(`image/png`)
        this.toDataState = false
        console.log(toDataURL)
        if (toDataURL !== null && toDataURL !== undefined) {
          this.toDataState = true
        }
        if (this.toDataState) {
          this.model.recommendationLetterUrl = toDataURL
        }
        console.log(this.model.recommendationLetterUrl)
      })
        this.$nextTick(() => {
          this.sendRecommendation()
        })
    },
    sendRecommendation(){
      const model = this.model;
      console.log("model",model)
      httpAction(this.url.edit, model, 'put').then((res) => {
        if (res.success) {
          console.log(res)
          this.$message.success(res.message)
          this.loading = false
          this.visible = false
        }
      })
    },