dataTables Export Buttons

dataTablesExportButtons.md

dataTable in VueJs

Install and use dataTable in vueJs

Installation

Install the dependencies and devDependencies and start the server.

npm install datatables.net-dt
npm install datatables.net-buttons
npm install pdfmake
npm install jszip

VueJs Code

Create a Vue file and import all the required plugins.

<template>
<div class="table-responsive">
    <table class="table table-sm table-bordered table-hover" id="dataTable">
        <thead class="thead-dark">
            <tr>
                <th>Transaction Date</th>
                <th>Transaction Id</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
</template>

<script>
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';
//for export excel and Pdf
import pdfMake from 'pdfmake/build/pdfmake'
import pdfFonts from 'pdfmake/build/vfs_fonts'
pdfMake.vfs = pdfFonts.pdfMake.vfs;
window.pdfMake = pdfMake;
import jsZip from 'jszip';
window.JSZip = jsZip;

export default {
  name: "dataTableExport",
  data() {
    return {
      table: {},
    }
  },
  methods: {},
  mounted() {
    this.table = $("#dataTable").DataTable({
      dom: "lBfrtip",
      buttons: ['copy','excel','csv','pdf','print'],
      processing: true,
      serverSide: true,
      "bFilter": true,
      ajax: {
        url: process.env.VUE_APP_URL + "api/report/dataTable",
        type: 'post',
        data: function (d) {
            //for data filtering
        }
      },
      columns: [
        {data: "transaction_date", name: "transaction_date", orderable: true, searchable: true},
        {data: "transaction_id", name: "transaction_id", orderable: true, searchable: true},
        {data: "status", name: "status", orderable: true, searchable: true},
      ],
      order: [[0, "desc"]]
    })
  },
}
</script>

<style scoped>
</style>

Ref: dataTables Export Buttons