Vue JS DataTable Export CSV Excel

Vue js jquery datatables with export buttons; Through this tutorial, i am going to show you how integrate jquery datatables with export button in vue js applications.

And as well as show you how to show dynamic data on dataTable from apis in vue js applications using jQuery dataTables.

Vue JS DataTable Export Data using Print Csv Copy Button Example

Use the following steps to export data using jquery datatable in vuejs applications:

  • Step 1 – Create New VUE JS App
  • Step 2 – Install jQuery DataTable and Export Button Library
  • Step 3 – Create Component
  • Step 4 – Add Component on main.js
  • Step 5 – Import Component on App.vue

Step 1 – Create New VUE JS App

Run the following command on terminal to create new vue js app:

vue create my-app

Step 2 – Install jQuery DataTable and Export Button Library

Run the following commands on terminal to install jQuery dataTable library, bootstrap and export button package in your vue js app:

cd my-app

npm install datatables.net --save

npm install datatables.net-dt --save

npm install datatables.net-buttons --save

npm install datatables.net-buttons-dt --save

npm install @types/datatables.net-buttons --save-dev

npm install jquery --save
npm i bootstrap
npm i axios

Step 3 – Create Component

Go to /src/components directory and create a new component called VueDataTable.vue and add the following code into it:

<template>
  <h1 class="text-center">Vue JS DataTable Export Data with Print Csv Copy Button Example - laratutorials.com</h1>
   
   <table class="table table-hover table-bordered" id="example">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
        <th>Job Title</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="user in users" :key="user.id">
        <td>{{user.id}}</td>
        <td>{{user.name}}</td>
        <td>{{user.email}}</td>
        <td>{{user.job_title}}</td>
      </tr>
      
    </tbody>
  </table>
  
  
</template>
<script>
//Bootstrap and jQuery libraries
import 'bootstrap/dist/css/bootstrap.min.css'; //for table good looks
import 'jquery/dist/jquery.min.js';
//Datatable Modules
import "datatables.net-dt/js/dataTables.dataTables"
import "datatables.net-dt/css/jquery.dataTables.min.css"
import "datatables.net-buttons/js/dataTables.buttons.js"
import "datatables.net-buttons/js/buttons.colVis.js"
import "datatables.net-buttons/js/buttons.flash.js"
import "datatables.net-buttons/js/buttons.html5.js"
import "datatables.net-buttons/js/buttons.print.js"
import $ from 'jquery'; 
import axios from 'axios'; //for api calling
export default {
 
  mounted(){
    //Web api calling for dynamic data and you can also use into your demo project
    axios
    .get("https://www.testjsonapi.com/users/")
    .then((res)=>
    {
      this.users = res.data;
      setTimeout(function(){
      $('#example').DataTable(
          {
              pagingType: 'full_numbers',
                pageLength: 5,
                processing: true,
                dom: 'Bfrtip',
                    buttons: ['copy', 'csv', 'print'
                    ]
          }
      );
      },
        1000
        );
    })
  },
  data: function() {
        return {
            users:[]
        }
    },
}
</script>

Step 4 – Import Component on main.js

Go to /src/ directory and main.js file. And then add the following code into it:

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
    
Vue.use(VueAxios, axios)
   
Vue.config.productionTip = false
   
new Vue({
  render: h => h(App),
}).$mount('#app')

Step 5 – Import Component on App.vue

Import component inside src >> App.vue file, as shown below:

// App.vue
<template>
  <div id="app">
    <vue-data-table></vue-data-table>
  </div>
</template>
<script>
import VueDataTable from './components/VueDataTable'
export default {
  name: 'app',
  components: {
    VueDataTable
  }
}
</script>

Conclusion

Vue js jquery datatables with export buttons example. In this tutorial, you have learned how to use jquery datatables with export button in vue js app. And as well as, how to display and export dynamic data into table using json apis with jQuery datatable in vue js app.

Recommended VUE JS Tutorials

Leave a Comment