<template>
  <div class="QdmScreenshot">
    <el-button @click="clickGeneratePicture">截图</el-button>
  </div>
</template>
<script>
import html2canvas from 'html2canvas'
export default {
  name: 'QdmScreenshot',
  props: {
    fileName: {
      type: String,
      default: '截屏文件'
    },
    id: {
      type: String,
      default: ''
    }
  },
  methods: {
    clickGeneratePicture() {
      let ref = document.getElementById(this.id)
      html2canvas(ref, {
        useCORS: true
      })
        .then(canvas => {
          let dataURL = canvas.toDataURL('image/png')
          this.dataURL = dataURL
          let creatDom = document.createElement('a')
          document.body.appendChild(creatDom)
          creatDom.href = dataURL
          creatDom.download = this.fileName
          creatDom.click()
        })
        .catch(err => {
          this.$message({
            message: '图片生成失败',
            type: 'error'
          })
        })
    }
  }
}
</script>
