How to Add Export TO Excel Further For VueJs Table

Here i will show how to export table data to excel sheet whit one button click. If we click on the botton it will download into local mechinal, all the Table data.

Here we getting data FROM API and showing on table, as well poroviding to download all the table data to excel formate…

STEP_1:
npm install –save vue-json-to-csv

STEP_2:
<template>
<div>
 <vue-json-to-csv
                :json-data=”items”
                :csv-title=”‘nodesitems'”>
                <button type=”button” class=”btn btn-primary” style=”float:right”>
                      Export To Excel <i class=”mdi mdi-export-variant” aria-hidden=”true”></i>
                </button>
            </vue-json-to-csv>
</div>
<div>
 <b-table :hover=”hover”  :striped=”striped” :bordered=”bordered”
              :small=”small” :fixed=”fixed”
              responsive=”sm” :items=”items” :fields=”fields”
              :current-page=”currentPage” :per-page=”perPage” @row-clicked=”rowClicked” >
            </b-table>

</div>
</template>
STEP_3:
<script>
 import VueJsonToCsv from ‘vue-json-to-csv’
export default {
    name: ‘NAME’,
data: () => {
      return {
        items: [],
fields: [
          {key: ‘element1’},
          {key: ‘element1’},
          {key: ‘element1’},
] }}

STEP_4:
components: {
      VueJsonToCsv
    },

STEP_5:
 methods: {
        MethodName() {
           axios.get(API)
          .then((response) => {
            this.items = response.data;
}}
}

mounted() {
      this.MethodName() ;
    },
</script>