在vue2中使用html2canvas导出png图片

这次的需求是把甘特图导出为png图片，记录下滚动区域及超出内容区域的内容怎么截取到图片。

具体实现需要用到js+css。在点击导出按钮的时候，对目前元素进行css样式处理，即设置所有元素大小由内容撑开，不在折叠隐藏，不在滚动。

结合实际业务就是，给需要截图的元素添加特殊样式

// 需要截图的元素
.visibleDiv {
    width: max-content !important;
    height: max-content !important;
    max-width: unset !important;
    overflow: visible !important;
    & /deep/ div {
      flex-wrap: nowrap;
      width: max-content;
      height: max-content;
      max-width: unset !important;
      overflow: visible !important;
    }
  }

对html2canvas封装一下

import html2canvas from 'html2canvas'

const exportWrapDomId = 'img-export-canvas-id'
const removeCssList = ['boxShadow']

export function cloneCanvas(oldCanvas, newCanvas) {
  const context = newCanvas.getContext('2d')

  if (context) {
    context.drawImage(oldCanvas, 0, 0)
  }

  return newCanvas
}

export function replaceCanvas(targetDom, newNode) {
  const validCanvasDomArr = targetDom.getElementsByTagName('canvas')
  const invalidCanvasDomArr = newNode.getElementsByTagName('canvas')
  if (validCanvasDomArr.length < 1) {
    return newNode
  }
  for (let i = validCanvasDomArr.length - 1; i >= 0; i--) {
    const validCanvasDom = validCanvasDomArr[i]
    const invalidCanvasDom = invalidCanvasDomArr[i]
    cloneCanvas(validCanvasDom, invalidCanvasDom)
  }

  return newNode
}

export function removeCSS(node, cssNames = []) {
  if (!node) {
    return
  }

  const { style } = node
  for (const cssName of cssNames) {
    // @ts-ignore
    style[cssName] = 'none'
  }

  const { children = [] } = node
  // @ts-ignore
  for (const child of children) {
    removeCSS(child, cssNames)
  }
}

export function cloneDom(domId) {
  const dom = document.querySelector(`#${domId}`)
  if (dom) {
    const cloneNode = document.importNode(dom, true)

    return replaceCanvas(dom, cloneNode)
  } else {
    return null
  }
}
// 判断浏览器类型
export function getOperaType() {
  var userAgent = navigator.userAgent //取得浏览器的userAgent字符串
  if (userAgent.indexOf('Opera') > -1) {
    //判断是否Opera浏览器
    return 'Opera'
  }
  if (userAgent.indexOf('Firefox') > -1) {
    //判断是否Firefox浏览器
    return 'FF'
  }
  if (userAgent.indexOf('Chrome') > -1) {
    //判断是否Chrome浏览器
    return 'Chrome'
  }
  if (userAgent.indexOf('Safari') > -1) {
    //判断是否Safari浏览器
    return 'Safari'
  }
  if (userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1 && !isOpera) {
    //判断是否IE浏览器
    return 'IE'
  }
}
// 设置截图最宽、高
export function getWH(eleW, eleH, maxLen, maxArea) {
  if (eleH <= maxLen && eleW <= maxLen) {
    return {
      width: eleW,
      height: eleH
    }
  } else if (eleH <= maxLen) {
    return {
      width: parseInt(maxArea / eleH) >= maxLen ? maxLen : parseInt(maxArea / eleH),
      height: eleH
    }
  } else if (eleW <= maxLen) {
    return {
      width: eleW,
      height: parseInt(maxArea / eleW) >= maxLen ? maxLen : parseInt(maxArea / eleW)
    }
  }
}
export function getMaxWidthHeight(eleW, eleH) {
  let maxWH = 8192
  let maxArea = maxWH * maxWH
  const operaType = getOperaType()
  switch (operaType) {
    case 'Chrome':
      // Maximum height/width: 32,767 pixels
      // Maximum area: 268,435,456 pixels (e.g., 16,384 x 16,384)
      maxWH = 32767
      maxArea = 268435456
      return getWH(eleW, eleH, maxWH, maxArea)
    case 'FF':
      // Maximum height/width: 32,767 pixels
      // Maximum area: 472,907,776 pixels (e.g., 22,528 x 20,992)
      maxWH = 32767
      maxArea = 472907776
      return getWH(eleW, eleH, maxWH, maxArea)
    case 'IE':
      // Maximum height/width: 8,192 pixels
      // Maximum area: N/A
      return getWH(eleW, eleH, maxWH, maxArea)
    default:
      return getWH(eleW, eleH, maxWH, maxArea)
  }
}
export const screenShotImage = async (domId, opt) => {
  const dom = cloneDom(domId)
  const targetElement = document.querySelector(`#${domId}`)
  if (dom && targetElement) {
    const width = targetElement.offsetWidth
    const height = targetElement.offsetHeight
    const wrap = document.createElement('div')
    wrap.style.position = 'absolute'
    wrap.style.left = '-10000px'
    wrap.style.top = '-10000px'
    wrap.style.width = `${width}px`
    wrap.style.height = `${height}px`
    wrap.id = exportWrapDomId
    wrap.appendChild(dom)
    document.body.appendChild(wrap)
    const targetDom = document.getElementById(exportWrapDomId)
    Object.assign(opt, getMaxWidthHeight(width, height))
    if (targetDom) {
      removeCSS(targetDom, removeCssList)
      return await new Promise((resolve) => {
        html2canvas(targetDom, opt).then((canvas) => {
          document.body.removeChild(wrap)
          return resolve(canvas.toDataURL('image/png'))
        })
      })
    }
  } else {
    return ''
  }
}

页面调用

htmlToImage() {
      try {
        this.visibleDiv = true
        this.options.maxHeight = '100%'
        // canvas最大绘制高度 / 每条高度  得出最大条数
        const rowH = document.getElementsByClassName('gantt-elastic__task-list-item')[0].clientHeight
        this.options.maxRows = Math.floor(32767 / rowH)
        setTimeout(() => {
          screenShotImage('gantt-container', {}).then((url) => {
            this.visibleDiv = false
            const a = document.createElement('a')
            a.setAttribute('href', url)
            a.download = `${this.projectName}.png`
            document.body.appendChild(a)
            a.click()
            document.body.removeChild(a)
            this.$nextTick(() => this.setGanttViewHeight())
          })
        }, 1000)
      } catch (error) {
        this.$Message.warning('保存图片失败！')
      }
    },