I am new to this field and attempting to create a small project using Vue.js. I want to provide users with the option to download their Vue.js to-do list. I have imported the jspdf library and Html2canvas. Here is the current output, but this is the desired output (as displayed in my local browser). Can you help me identify the mistake in my code?
~Here is my script method()
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");
});
},Below is the Vue component code:
<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>