核心：iframe页面加载完成后触发生成图片逻辑

<iframe
  ref="posterDown"
  :src="iframeUrl"
  style="width: 375px; height: 100%"
></iframe>

//当页面渲染完成时间
window.parent.postMessage({ msg: '渲染完成' }, '*')
//如果实在获取不到页面渲染完成时间可使用定时器

//
window.addEventListener(
    'message',
    () => {
      // 生成图片
      drawImg() 
    },
    false
  )

function drawImg() {
  const iframeHtml = posterDown.value.contentWindow
  const iframeScrollY = iframeHtml.document.documentElement.scrollTop
  const iframeScrollX = iframeHtml.document.documentElement.scrollLeft
  console.log(iframeHtml.scrollHeight, iframeScrollX, 'iframeHtml')
  html2canvas(posterDown.value.contentWindow.document.getElementsByTagName('body')[0], {
    allowTaint: true,
    scale: 2, // 生成图片的清晰度（越大越清晰，图片就越大）  1  2  3  4  5  6  7  8  9  10
    backgroundColor: '#f5f5f5', //海报的背景颜色
    useCORS: true, // 允许跨域
    width: 375, //生成海报的
    height: iframeHtml.scrollHeight, // height: 200 //生成海报的h    默认是px
    windowHeight: iframeHtml.scrollHeight,
    x: iframeScrollX,
    y: iframeScrollY
  }).then((canvas) => {
    let baseImg = canvas.toDataURL('image/png')
    let save = document.createElement('a')
    save.href = baseImg
    // 下载的名字
    save.download = '文件命名'
    save.click()
    ElMessage.success('生成成功')
  })
}

注：不想展示iframe但却需要下载图片时，可以将iframe页面层级调低，间接实现隐藏功能。