I needed to take a screenshot in my vue.js project, so I decided to use html2canvas. Here are the steps I followed to implement html2canvas:
Step 1-: Install 'html2canvas' into my project
npm install html2canvas
Step 2-: Import html2canvas into my project code.
Project Code -:
<template>
<div class="hello">
<div id="photo">
<p>This is a Vue screenshot</p>
</div>
<button v-on:click="screenshot">Take Picture</button>
</div>
</template>
<script>
//import html2canvas from 'vue-html2canvas';
import html2canvas from 'html2canvas';
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
screenshot(){
console.log('Function Screenshot');
html2canvas(document.getElementById('photo')).then(canvas => {
document.body.appendChild(canvas)
});
}
}
}
</script>
However, when I run this project, it gives me the following error -:
ReferenceError: html2canvas is not defined
Any suggestions on how to solve this issue?