在vue中把div截图，下载图片

在vue中把div截图，下载图片

1.安装 

npm install --save html2canvas

2.页面引入

import html2canvas from 'html2canvas'

3.方法实现
<div id="chartDom" style="width:500px;height:400px"></div>
// 下载分布图  点击事件
downlodadDrawPic() {
  // chartDom div的id
  html2canvas(document.querySelector('#chartDom')).then((canvas) => {
    // 转成图片，生成图片地址
    var imgDraw = canvas.toDataURL('image/png')
    if (imgDraw !== '') {
    // 可以设置图片名称
      this.saveFile(imgDraw, '111.jpg')
    }
  })
},
// 保存图片
saveFile(data, filename) {
  var save_link = document.createElementNS(
    'http://www.w3.org/1999/xhtml',
    'a'
  )
  save_link.href = data
  save_link.download = filename
  var event = document.createEvent('MouseEvents')
  event.initMouseEvent(
    'click',
    true,
    false,
    window,
    0,
    0,
    0,
    0,
    0,
    false,
    false,
    false,
    false,
    0,
    null
  )
  save_link.dispatchEvent(event)
},