Export data of table in CSV, Excel, PDF format in VueJs

Question

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 ?

Answer 1

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-complete 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 comma 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 complete 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>

Answer 2

Easy way

If you can use different table component try to look into Vue materialize datatable

It's letting you to export in XLS and print to PDF

Without any component

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.com/

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.