I am a beginner in this field. just try to do a small project using vue.js.
I wanted to give an option to users to download their Vue.js to-do list. I have had imported the jspdf library and Html2canvas.
This is what I got as an output.but I want my output like this. (this is the output of my code in the local browser.try to find out my mistake here.
~my script method()here.
download() {
const doc = new jsPDF();
const width = doc.internal.pageSize.getWidth();
const height = doc.internal.pageSize.getHeight();
/** WITH CSS */
var canvasElement = document.createElement('canvas');
html2canvas(this.$refs.content, { canvas: canvasElement
}).then(function (canvas)
{
const img = canvas.toDataURL("image/jpeg", 0.8);
doc.addImage(img,'JPEG',20,20 , width, height);
doc.save("sample.pdf");
});
},My Vue component code here
<template>
<button @click="download">Download PDF WITH CSS</button>
<div ref="content">
<div class="container">
<h2 class="text-center at-5">My Destinations</h2>
<!-- input -->
<div class="d-flex">
<input v-model="task" type="text" placeholder="Enter Destination" class="form-control">
<button @click="submitTask" class="btn btn-warning rounded-0">SUBMIT</button>
</div>
<table class="table table-bordered mt-5" id="tabalo">
<thead>
<tr>
<th scope="col" style="background-color:#33FDFF">Location</th>
<th scope="col" style="background-color:#33FDFF">Status</th>
<th scope="col" style="background-color:#33FDFF" class="text-center">#</th>
<th scope="col" style="background-color:#33FDFF" class="text-center">#</th>
</tr>
</thead>
<tbody style="background-color:#B895DE">
<tr v-for="(task, index) in tasks" :key="index">
<td>
<span :class="{'visited': task.status === 'visited'}">{{task.name}}</span>
</td>
<td style = "width:100px">
<span @click="changeStatus(index)" class="pointer"
:class="{'text-danger' : task.status === 'to-visit',
'text-warning' : task.status === 'at-the-moment',
'text-success' : task.status === 'visited'}">
{{ firstCharUpper (task.status)}}
</span>
</td>
<td>
<button @click="editTask(index,task)" class="btn btn-warning rounded-0">Edit</button>
</td>
<td>
<button @click="removeTask(index)" class="btn btn-warning rounded-0">Remove</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>