add bilangan on maklumat pengundi

resources/assets/js/components/demo/admin/voter/index.vue

@@ -16,6 +16,7 @@
 			<table class="table table-hover" id="position_table">
 				<thead>
 					<tr>
+						<th>Bil.</th>
 						<th>Nama Anggota</th>
 						<th>No. Kad Pengenalan</th>
 						<th>No. Anggota</th>
@@ -27,6 +28,7 @@
 				</thead>
 				<tbody>
 					<tr v-for="(voter,i) in data.voters.data">
+						<td>{{ i + 1 }}</td>
 						<td>{{ voter.name }}</td>
 						<td>{{ voter.no_kp }}</td>
 						<td>{{ voter.no_anggota }}</td>

resources/assets/js/components/demo/admin/voter/kehadiran.vue

@@ -5,10 +5,16 @@
 				<i class="fa fa-refresh"></i> Kemaskini Pengundi
 			</button>
 
+			<button class="btn btn-primary" @click="downloadPDF()">
+                <i class="fa fa-download"></i> Muat Turun PDF
+            </button>
+
+
 			<div class="table-responsive">
 				<table class="table table-hover">
 					<thead>
 						<tr>
+							<th>Bil.</th>
 							<th>Nama Anggota</th>
 							<th>No. Kad Pengenalan</th>
 							<th>No. Anggota</th>
@@ -19,6 +25,7 @@
 					</thead>
 					<tbody>
 						<tr v-for="(voter, i) in data.voters.data">
+							<td>{{ i + 1 }}</td>
 							<td>{{ voter.name }}</td>
 							<td>{{ voter.no_kp }}</td>
 							<td>{{ voter.no_anggota }}</td>
@@ -49,6 +56,10 @@
 </template>
 
 <script>
+
+import html2canvas from 'html2canvas';
+import jsPDF from 'jspdf';
+
 export default {
 	data: function () {
 		return {
@@ -90,7 +101,18 @@ export default {
 				default:
 					return '-';
 			}
-		}
+		},
+
+		downloadPDF() {
+            const table = document.getElementById('voterTable');
+
+            html2canvas(table).then(canvas => {
+                const imgData = canvas.toDataURL('image/png');
+                const pdf = new jsPDF();
+                pdf.addImage(imgData, 'PNG', 0, 0);
+                pdf.save('kehadiran-pengundi.pdf');
+            });
+        },
 
 	},