我遇到的第一个障碍是没有document.getElementByIdin Vue的简写，所以我实施了function like this one。我面临的第二个障碍是，在处理你没有html2canvas docs和<!DOCTYPE html>的情况时，恕我直言<body>是非常有限的。
这是我的.vuefile中的标记摘要：
<template>
<div>
<md-layout>
<div id="capture" class='m1 '>
// more markup...
</div>
</md-layout>
</div>
</template>
这就是我试图实现捕获功能的方法：
//Vue equivalent for document.getElementById
showCaptureRef() {
console.log(this.$refs.capture);
},
// Screen capture function
downloadVisualReport () {
let vc = this
alert("Descargando reporte visual")
html2canvas(vc.showCaptureRef).then(canvas => {
vc.document.body.appendChild(canvas)
}).catch((error) => {
console.log("Erorr descargando reporte visual")
alert("Error descargando el reporte visual")
});
},
我想通了，我有两个错误：
首先，我有id='capture'而不是ref="capture"
第二，这条线vc.document.body.appendChild(canvas)，需要改为document.body.appendChild(canvas)
这是将此类画布下载为图像的函数的最终代码：
downloadVisualReport () {
let vc = this
let filename = 'Reporte de ' + vc.campaign.name + '.png';
html2canvas(vc.showCaptureRef()).then(canvas => {
vc.saveAs(canvas.toDataURL(), filename);
}).catch((error) => {
alert("Error descargando el reporte visual")
});
},
对于未来的读者。试试这个vue-html2canvas mixin。
<template>
<div>
<!-- SOURCE -->
<div ref="printMe">
<h1>Print me!</h1>
</div>
<!-- OUTPUT -->
<img :src="output">
</div>
<teplate>
<script>
export default {
data() {
return {
output: null
}
},
methods: {
print() {
const el = this.$refs.printMe;
// add option type to get the image version
// if not provided the promise will return
// the canvas.
const options = {
type: 'dataURL'
}
this.output = await this.$html2canvas(el, options);
}
}
}
</script>