One hurdle I encountered was the absence of a shorthand for document.getElementById in Vue. To address this, I created a custom function similar to this one. Another challenge I am currently grappling with is the perceived limitations of the html2canvas documentation when navigating scenarios where there is no <!DOCTYPE html> and <body>.
Below is a brief overview of the structure within my .vue file:
<template>
<div>
<md-layout>
<div id="capture" class='m1 '>
// additional markup...
</div>
</md-layout>
</div>
</template>
Additionally, here is how I am attempting to incorporate the capture function:
//Vue's equivalent of document.getElementById
showCaptureRef() {
console.log(this.$refs.capture);
},
// Function for capturing screen
downloadVisualReport () {
let vc = this
alert("Downloading visual report")
html2canvas(vc.showCaptureRef).then(canvas => {
vc.document.body.appendChild(canvas)
}).catch((error) => {
console.log("Error downloading visual report")
alert("Error downloading visual report")
});
},