安装 npm install --save html2canvas
使用 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里就行了
>