vue 截图并保存到本地html2canvas_在vue框架中使用html2canvas插件下载图片到手机

安装插件

cnpm install html2canvas filesaver --save

页面引入

import html2canvas from "html2canvas"

html使用

    <span  class="icon iconfont xk-icon-jietu" @click="handlePrint"></span>

methods方法

    handlePrint () {
      let htmlDom = document.getElementById(this.$store.state.videoMonitorSystem.videDomId) // （）填容器需要截图的id
      this.$showLoading()
      html2canvas(htmlDom).then(res => {
        this.$hideLoading()
        var dataUrl = res.toDataURL('image/jpeg', 1.0)// 图片转为下载路径
        var a = document.createElement('a')// 创建a标签
        a.href = dataUrl
        a.download = this.common.parseTime(new Date(), '{y}{m}{d}{h}{m}{s}' + '.png')// 设置图片名称
        a.click()
      }).catch(() => this.$hideLoading())
    },