vue2 使用 html2canvas 将页面 dom 转为图片并下载记录

1、安装 html2canvas 依赖

npm install html2canvas -S

2、页面中使用

import Html2Canvas from 'html2canvas'

    // 下载为png图片
    async downFileByImg (imgName) {
      // {分项名称}+{统计时段}+“能耗报表”+{导出时间（YYMMDDMMSS）}.png
      try {
        // 文件名称
        const nowTime = formatDate(new Date(), 'yyMMddhhmm')
        const filename = `能耗报表${nowTime}`
        Html2Canvas(document.querySelector('#energyAnalysisPanel'), {
          // scale: 2,
          useCORS: true,
          ignoreElements: element => { // 跳过指定元素
            // 跳过下载按钮
            if (element.id === 'downFileBtn') {
              return true
            }
          }
        }).then(canvas => {
          const img = document.createElement('a')
          img.href = canvas.toDataURL('image/png')
          img.download = filename
          img.click()
        })
      } catch (error) {
        console.log(error)
      }
    },

dom 元素添加自定义属性 data-html2canvas-ignore 来跳过某些元素

使用 class 跳过指定元素

ignoreElements: (item) => {
  if (item.classList.contains('save')) {
    return true // 排除掉这个元素
  }
  return false // 保留这个元素
 }

3、效果

文档地址
https://html2canvas.hertzen.com/configuration