html2canvas 插件之实现 echarts 下载多个图片

工作原理

html2canvas 库的工作原理并不是真正的 “截图”，而是读取网页上的目标 DOM 节点的信息来绘制 canvas，所以它并不支持所有的 css 属性

npm install html2canvas
import html2canvas from 'html2canvas'

html2canvas(document.getElementById(id)).then(function(canvas) {
    document.body.appendChild(canvas)
    let img = canvas
      .toDataURL("image/png")
      .replace("image/png", "image/octet-stream")
     // 创建a标签，实现下载
     let creatIMg = document.createElement("a")
     creatIMg.download = "项目总体及区域分布图.png" // 设置下载的文件名
     creatIMg.href = img // 下载 url
     document.body.appendChild(creatIMg)
     creatIMg.click()
     creatIMg.remove() // 下载之后把创建的元素删除
})

其中 id 是把要下载的多个 echarts 图表都包裹起来