首页 前端知识 vue中使用html2canvas报错 Unable to find element in cloned iframe

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

2024-02-09 20:02:25 前端知识 前端哥 619 810 我要收藏
  1. 安装 npm install --save html2canvas

  1. 使用 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里就行了
  >

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1609.html
评论
发布的文章

Spring MVC-JSON

2024-06-02 09:06:53

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!