vue中使用html2canvas报错 Unable to find element in cloned iframe

1. 安装 npm install --save html2canvas

2. 使用 home.vue

<div ref="downloadRef">测试内容</div>
 
 
import html2canvas from 'html2canvas'
 
download() {
  const downloadRef = this.$refs.downloadRef
  html2canvas(downloadRef, {
    background: '#ffffff',
    useCORS: true,
    scale: 1,
    dpi: 350,
    width: downloadRef.offsetWidth,
    height: downloadRef.offsetHeight
  }).then((canvas) => {
    var a = document.createElement('a') //添加一个下载标签
    a.download = 'pic'
    // 设置图片地址
    a.href = canvas.toDataURL('image/png')
    a.click()
  })
}复制

！！报错 Uncaught (in promise) Unable to find element in cloned iframe

原因：使用了 elementUI中的<el-popover>组件，挂载到body里的

解决：

<el-popover
    :placement="placement"
    trigger="click"
    width="200"
    popper-class="qrcode-popover"
    @after-leave="hidePopover"
    :append-to-body="false"  //不添加到body里就行了
  >复制