使用 html2canvas 将 HTML 结构导出为图片

一、安装 html2canvas

npm install html2canvas

二、使用

const imgViewRef= ref() // 元素绑定ref
const downloadHandle = () => {
  // 这里的元素是 iframe
  const element = imgViewRef.value.contentWindow.document.body
  // 如果不为 iframe
  // const element = imgViewRef.value?.$el

  const elementWidth = element.offsetWidth + 52 // 元素宽度(52 可选，根据实际情况而定)
  const elementHeight = element.offsetHeight // 元素高度
  const canvas = document.createElement('canvas')
  canvas.width = elementWidth * 2 // 如下载的图片不是很清楚可以放大
  canvas.height = elementHeight * 2 // 如下载的图片不是很清楚可以放大
  canvas.style.width = elementWidth + 'px'
  canvas.style.height = elementHeight + 'px'
  const context = canvas.getContext('2d')
  context!.scale(2, 2) // 如下载的图片不是很清楚可以放大

  html2canvas(element, {
    allowTaint: true,
    useCORS: true,
    logging: true,
    canvas: canvas
  }).then((canvas) => {
    const imgUrl = canvas.toDataURL('image/jpeg')
    const dataArr = imgUrl.split(',')
    const bstr = atob(dataArr[1])
    let n = bstr.length
    const u8arr = new Uint8Array(n)
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n)
    }
    const fileName = `导出的文件名称.jpg`
    const img = new File([u8arr], fileName, { type: 'jpg' })
    const aTag = document.createElement('a')
    aTag.download = fileName
    const href = URL.createObjectURL(img)
    aTag.href = href
    aTag.click()
    URL.revokeObjectURL(href)
  }).catch(err => {
    console.log(err)
  })
}