vue页面导出图片

需求：将数据统计导出为图片，并且每天定时给企业微信推送。

导出图片，使用html2canvas 插件

代码：

dataURLToBlob(dataurl) { // ie 图片转格式

      var arr = dataurl.split(',')

      var mime = arr[0].match(/:(.*?);/)[1]

      var bstr = atob(arr[1])

      var n = bstr.length

      var u8arr = new Uint8Array(n)

      while (n--) {

        u8arr[n] = bstr.charCodeAt(n)

      }

      return new Blob([u8arr], { type: mime })

    },

    downloadResult() {

      const canvasID = document.getElementById('content')

      const a = document.createElement('a')

      canvasID.style.backgroundImage = 'linear-gradient(to top, orange 20%, #27273c 80%)' //修改导出图片的颜色，，理由：这个网页背景使用了动态效果

      const eldate = document.getElementsByClassName('el-input__inner')

      eldate[0].style.paddingTop = '6px'

      html2canvas(canvasID).then(canvas => {

        const dom = document.body.appendChild(canvas)

        dom.style.display = 'none'

        a.style.display = 'none'

        document.body.removeChild(dom)

        const blob = dom.toDataURL('image/png')

        const formData = new FormData()

        formData.append('imgBase64', blob) //使用base64进行保存

        sendStaticImg(formData).then(res => {

          console.log('2324', res)

          if (res.status === 200) {

            this.$message.success('保存图片成功')

          }

        })

      })

      canvasID.style.backgroundImage = '' //因为修改后，原本不需要修改，恢复

      eldate[0].style.paddingTop = ''

    },

    printOut() {

      // const name = 'ES数据统计'

      // 个人观察只是截取可见范围以及以下的区域，所以先将滚动条置顶

      // $(window).scrollTop(0); // jQuery 的方法

      // window.pageYOffset = 0

      document.body.scrollTop = 0 // IE的

      document.documentElement.scrollTop = 0 // 其他

      this.downloadResult()

    },

每天定时保存，是通过在nodejs开启定时器，然后固定每天打开网页，然后执行该网页的代码

const open = require('open');open('')

最后实现效果。