I am working on vueJs template and I need to export data of tables in three formats which are .pdf, .csv, .xls I tried with this question but its show Utils undefined. so how can I achieve what I want ?
I am working on vueJs template and I need to export data of tables in three formats which are .pdf, .csv, .xls I tried with this question but its show Utils undefined. so how can I achieve what I want ?
Share Improve this question edited Sep 28, 2021 at 6:09 Varinder Sohal asked Oct 29, 2019 at 3:49 Varinder SohalVarinder Sohal 1,2926 gold badges25 silver badges51 bronze badges2 Answers
Reset to default 9Easy way
If you can use different table ponent try to look into Vue materialize datatable
It's letting you to export in XLS and print to PDF
Without any ponent
The way I personally use If i need to export any JSON that is consist of more fields than there are in the actual table:
https://www.papaparse./
import Papa from "papaparse";
var blob = new Blob([Papa.unparse(jsonData)], { type: 'text/csv;charset=utf-8;' });
var link = document.createElement("a");
var url = URL.createObjectURL(blob);
link.setAttribute("href", url);
link.setAttribute("download", 'filename.csv');
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
So, we actually unparsing JSON data into the blob, creating dynamic element which linked to it and downloading the file.
I've created a code snippet at the following link which creates csv file from html using vueJS
https://codepen.io/mwaqasiqbal/pen/wvVqyoz
<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
<div id="app">
<div v-if="array.length > 0" class="mt-4">
<button class="mt-1 btn btn-plete btn-cons btnGo" @click="downloadCSV()">Export</button>
</div>
<div id="divData">
<table class="table" :class="loading ? 'loading' : ''" id="shiftTable">
<thead>
<tr>
<th><span>Employee</span></th>
<th><span>Clocked In</span></th>
<th><span>Clocked Out</span></th>
<th><span>Duration</span></th>
<th ignore-column="true">Action</th>
</tr>
</thead>
<tbody>
<tr v-for="shift in array">
<td>{{shift.name}}</td>
<td>{{shift.clockedInStr}}</td>
<td>{{shift.clockedOutStr}}</td>
<td>{{shift.durationStr}}</td>
<td ignore-column="true">
<a v-bind:href="'/Shift/' + shift.id">View</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="noRowFound" v-if="array.length == 0">no data found</div>
</div>
</template>
<script>
export default {
data() {
return {
array: [
{
"id": "10HYAGKNRFSX2",
"name": "Khurram",
"clockedIn": "2024-10-08T07:11:00.000Z",
"clockedInStr": "Tue Oct 08 2024 12:11:00 p.m.",
"clockedOut": "2024-10-13T15:22:00.000Z",
"clockedOutStr": "Sun Oct 13 2024 8:22:00 p.m.",
"duration": "08:11",
"durationStr": "8 hr(s), 11 min(s)"
},
{
"id": "WZXZH7AKXBWP8",
"name": "Khurram",
"clockedIn": "2024-10-03T16:12:00.000Z",
"clockedInStr": "Thu Oct 03 2024 9:12:00 p.m.",
"clockedOut": "2024-10-03T16:13:00.000Z",
"clockedOutStr": "Thu Oct 03 2024 9:13:00 p.m.",
"duration": "00:01",
"durationStr": "0 hr(s), 1 min(s)"
},
{
"id": "E7S41FS70YYPC",
"name": "Khurram",
"clockedIn": "2024-10-01T07:00:00.000Z",
"clockedInStr": "Tue Oct 01 2024 12:00:00 p.m.",
"clockedOut": "2024-10-01T07:02:00.000Z",
"clockedOutStr": "Tue Oct 01 2024 12:02:00 p.m.",
"duration": "00:02",
"durationStr": "0 hr(s), 2 min(s)"
},
{
"id": "SBDEENC6NX72J",
"name": "Khurram",
"clockedIn": "2024-09-29T17:18:00.000Z",
"clockedInStr": "Sun Sep 29 2024 10:18:00 p.m.",
"clockedOut": "2024-09-29T17:30:00.000Z",
"clockedOutStr": "Sun Sep 29 2024 10:30:00 p.m.",
"duration": "00:12",
"durationStr": "0 hr(s), 12 min(s)"
},
{
"id": "3J3T3HJZV672J",
"name": "Khurram",
"clockedIn": "2024-09-29T13:56:00.000Z",
"clockedInStr": "Sun Sep 29 2024 6:56:00 p.m.",
"clockedOut": "2024-09-29T17:02:00.000Z",
"clockedOutStr": "Sun Sep 29 2024 10:02:00 p.m.",
"duration": "03:05",
"durationStr": "3 hr(s), 5 min(s)"
},
{
"id": "VQHKEA4MCJA6J",
"name": "Khurram",
"clockedIn": "2024-09-28T20:54:00.000Z",
"clockedInStr": "Sun Sep 29 2024 1:54:00 a.m.",
"clockedOut": "2024-09-28T20:58:00.000Z",
"clockedOutStr": "Sun Sep 29 2024 1:58:00 a.m.",
"duration": "00:03",
"durationStr": "0 hr(s), 3 min(s)"
},
{
"id": "3NAQ8KM13X874",
"name": "Khurram",
"clockedIn": "2024-09-28T20:43:00.000Z",
"clockedInStr": "Sun Sep 29 2024 1:43:00 a.m.",
"clockedOut": "2024-09-28T20:54:00.000Z",
"clockedOutStr": "Sun Sep 29 2024 1:54:00 a.m.",
"duration": "00:10",
"durationStr": "0 hr(s), 10 min(s)"
},
{
"id": "ME6W0ZMVKXZAJ",
"name": "Khurram",
"clockedIn": "2024-09-28T20:33:00.000Z",
"clockedInStr": "Sun Sep 29 2024 1:33:00 a.m.",
"clockedOut": "2024-09-28T20:37:00.000Z",
"clockedOutStr": "Sun Sep 29 2024 1:37:00 a.m.",
"duration": "00:04",
"durationStr": "0 hr(s), 4 min(s)"
},
{
"id": "P5H5W03KZQ4MW",
"name": "Khurram",
"clockedIn": "2024-09-28T20:02:00.000Z",
"clockedInStr": "Sun Sep 29 2024 1:02:00 a.m.",
"clockedOut": "2024-09-28T20:03:00.000Z",
"clockedOutStr": "Sun Sep 29 2024 1:03:00 a.m.",
"duration": "00:01",
"durationStr": "0 hr(s), 1 min(s)"
},
{
"id": "88FK0GD8XKQE0",
"name": "Khurram",
"clockedIn": "2024-09-27T20:33:00.000Z",
"clockedInStr": "Sat Sep 28 2024 1:33:00 a.m.",
"clockedOut": "2024-09-27T20:34:00.000Z",
"clockedOutStr": "Sat Sep 28 2024 1:34:00 a.m.",
"duration": "00:01",
"durationStr": "0 hr(s), 1 min(s)"
},
{
"id": "XFNZG477TRTS2",
"name": "Khurram",
"clockedIn": "2024-09-27T19:53:00.000Z",
"clockedInStr": "Sat Sep 28 2024 12:53:00 a.m.",
"clockedOut": "2024-09-27T20:27:00.000Z",
"clockedOutStr": "Sat Sep 28 2024 1:27:00 a.m.",
"duration": "00:33",
"durationStr": "0 hr(s), 33 min(s)"
},
{
"id": "HTVQWC19GPQXW",
"name": "Khurram",
"clockedIn": "2024-09-27T10:11:00.000Z",
"clockedInStr": "Fri Sep 27 2024 3:11:00 p.m.",
"clockedOut": "2024-09-27T19:50:00.000Z",
"clockedOutStr": "Sat Sep 28 2024 12:50:00 a.m.",
"duration": "09:39",
"durationStr": "9 hr(s), 39 min(s)"
},
{
"id": "JWV5XFV1Q4NC0",
"name": "Khurram",
"clockedIn": "2024-09-26T21:29:00.000Z",
"clockedInStr": "Fri Sep 27 2024 2:29:00 a.m.",
"clockedOut": "2024-09-27T19:50:00.000Z",
"clockedOutStr": "Sat Sep 28 2024 12:50:00 a.m.",
"duration": "22:21",
"durationStr": "22 hr(s), 21 min(s)"
},
{
"id": "KTDGGRRK6XMCA",
"name": "Khurram",
"clockedIn": "2024-09-26T19:40:00.000Z",
"clockedInStr": "Fri Sep 27 2024 12:40:00 a.m.",
"clockedOut": "2024-09-26T21:29:00.000Z",
"clockedOutStr": "Fri Sep 27 2024 2:29:00 a.m.",
"duration": "01:48",
"durationStr": "1 hr(s), 48 min(s)"
},
{
"id": "563F8GN9SC7J2",
"name": "Khurram",
"clockedIn": "2024-09-26T07:13:00.000Z",
"clockedInStr": "Thu Sep 26 2024 12:13:00 p.m.",
"clockedOut": "2024-09-26T16:31:00.000Z",
"clockedOutStr": "Thu Sep 26 2024 9:31:00 p.m.",
"duration": "09:18",
"durationStr": "9 hr(s), 18 min(s)"
},
{
"id": "03ZFXTFE6RETE",
"name": "Khurram",
"clockedIn": "2024-09-26T15:55:00.000Z",
"clockedInStr": "Thu Sep 26 2024 8:55:00 p.m.",
"clockedOut": "2024-09-26T19:38:00.000Z",
"clockedOutStr": "Fri Sep 27 2024 12:38:00 a.m.",
"duration": "03:43",
"durationStr": "3 hr(s), 43 min(s)"
},
{
"id": "XHF694KK2FKTE",
"name": "Khurram",
"clockedIn": "2024-09-26T07:26:00.000Z",
"clockedInStr": "Thu Sep 26 2024 12:26:00 p.m.",
"clockedOut": "2024-09-26T15:52:00.000Z",
"clockedOutStr": "Thu Sep 26 2024 8:52:00 p.m.",
"duration": "08:26",
"durationStr": "8 hr(s), 26 min(s)"
},
{
"id": "BPPFQRX5BZZ6W",
"name": "Khurram",
"clockedIn": "2024-09-26T15:25:00.000Z",
"clockedInStr": "Thu Sep 26 2024 8:25:00 p.m.",
"clockedOut": "2024-09-26T19:40:00.000Z",
"clockedOutStr": "Fri Sep 27 2024 12:40:00 a.m.",
"duration": "04:14",
"durationStr": "4 hr(s), 14 min(s)"
},
{
"id": "M5VHJ0X560S10",
"name": "Khurram",
"clockedIn": "2024-09-26T02:20:00.000Z",
"clockedInStr": "Thu Sep 26 2024 7:20:00 a.m.",
"clockedOut": "2024-09-26T11:11:00.000Z",
"clockedOutStr": "Thu Sep 26 2024 4:11:00 p.m.",
"duration": "08:51",
"durationStr": "8 hr(s), 51 min(s)"
},
{
"id": "DDCFFZD8D02G8",
"name": "Khurram",
"clockedIn": "2024-09-25T02:06:00.000Z",
"clockedInStr": "Wed Sep 25 2024 7:06:00 a.m.",
"clockedOut": "2024-09-26T16:40:00.000Z",
"clockedOutStr": "Thu Sep 26 2024 9:40:00 p.m.",
"duration": "14:34",
"durationStr": "14 hr(s), 34 min(s)"
},
{
"id": "3P3BK8R9YWH12",
"name": "Khurram",
"clockedIn": "2024-09-25T07:16:00.000Z",
"clockedInStr": "Wed Sep 25 2024 12:16:00 p.m.",
"clockedOut": "2024-09-26T19:39:00.000Z",
"clockedOutStr": "Fri Sep 27 2024 12:39:00 a.m.",
"duration": "12:23",
"durationStr": "12 hr(s), 23 min(s)"
},
{
"id": "K55T9130TBTX8",
"name": "Khurram",
"clockedIn": "2024-09-24T09:59:00.000Z",
"clockedInStr": "Tue Sep 24 2024 2:59:00 p.m.",
"clockedOut": "2024-09-26T19:39:00.000Z",
"clockedOutStr": "Fri Sep 27 2024 12:39:00 a.m.",
"duration": "09:39",
"durationStr": "9 hr(s), 39 min(s)"
},
{
"id": "FR5GWGJ2Q2Z4J",
"name": "Khurram",
"clockedIn": "2024-09-23T18:14:00.000Z",
"clockedInStr": "Mon Sep 23 2024 11:14:00 p.m.",
"clockedOut": "2024-09-26T19:39:00.000Z",
"clockedOutStr": "Fri Sep 27 2024 12:39:00 a.m.",
"duration": "01:24",
"durationStr": "1 hr(s), 24 min(s)"
}
]
};
},
methods: {
doSomething() {
alert('Hello!');
},
downloadCSV() {
// Getting values of current time for generating the file name, with current date and time
const dateTime = new Date();
const day = dateTime.getDate();
const month = dateTime.getMonth() + 1;
const year = dateTime.getFullYear();
const hour = dateTime.getHours();
const minute = dateTime.getMinutes();
const postfix = `${day}.${month}.${year}_${hour}.${minute}`;
//get the table by its id
const table = document.getElementById('shiftTable');
let csvContent = '';
//traverse the table rows and create csv contents
for (let i = 0; i < table.rows.length; i++) {
let row = table.rows[i];
let rowData = [];
//traverse the table columns and create ma separeted columns
for (let j = 0; j < row.cells.length; j++) {
let cell = row.cells[j];
//don't include the columns which have 'ignore-column' attribute, in case some column need to be removed from csv
if (cell.attributes.getNamedItem('ignore-column') == null) {
rowData.push(cell.textContent.replace(/,/g, ''));
}
}
//add line feed to plete a row
csvContent += rowData.join(',') + '\r\n';
}
//xreatea a blob with csv contents
const blob = new Blob([csvContent], { type: 'text/csv' });
//create a url to link to csv content blob
const url = URL.createObjectURL(blob);
//create anchor to point to url
const a = document.createElement('a');
a.href = url;
//download the file with date time in name
a.download = `shifts_${postfix}.csv`;
//add the anchor to document, so it can be clicked
document.body.appendChild(a);
//call the click event, so the csv contents can be downloadws
a.click();
//remove the anchor as its purpose is served
document.body.removeChild(a);
}
}
};
</script>
<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
a,
button {
color: #4fc08d;
}
button {
background: none;
border: solid 1px;
border-radius: 2em;
font: inherit;
padding: 0.75em 2em;
}
</style>