DataTables Excel Buttons Not Show With Vue Cli

karacaguard

Hi,

This is my tableCompenent.vue
This component not show excel button.
Where is my fault ?
I read all forum post.
And I inspect Allan Full Extension Post
I must be missing something.
I've been working on it for 5 days. I'm about to give up.

<script>

import dataTablesTrJson from './../../../assets/dataTable.tr.json';
import DataTable from 'datatables.net-vue3';
import DataTablesLib from 'datatables.net';
import 'datatables.net-select';
import 'datatables.net-buttons';
import 'datatables.net-buttons/js/buttons.html5';
DataTable.use(DataTablesLib);

export default {
  components: {
    DataTable,
  },
  data() {
    return {
      options: {
        language: dataTablesTrJson ,
        data:[
          {name:"Allan",Surname:"Allan"}
          {name:"Bob",Surname:"Marley"}

        ]
        dom: 'Bfrtip',
        columns: [
         {
          title: "İsim",
          data: 'name',
          width:'10%'
         },
         {
          title: "Soyisim",
          data: 'position',
         }
        ]
        buttons: [
          'copy', 'csv', 'excel', 'pdf', 'print'
        ]
      },
    };
  },
  created() {

  }
};
</script>
<template>
  <div class="card card-body">
    <DataTable :data="data"  :options="options" class="table dataTable table-bordered"> 
      <thead>
        <tr>
          <th>Name</th>
          <th>Surname</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>Name</th>
          <th>Surname</th>
        </tr>
      </tfoot>

    </DataTable>
  </div>
</template>

My package.json

{
  "name": "karacaguard",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "serve": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "set NODE_OPTIONS=--openssl-legacy-provider &&vue-cli-service build",
    "lint": "set NODE_OPTIONS=--openssl-legacy-provider &&vue-cli-service lint"
  },
  "dependencies": {
    "@anivive/vue3-form-wizard": "^1.0.1",
    "@ckeditor/ckeditor5-build-classic": "^31.1.0",
    "@ckeditor/ckeditor5-vue": "^2.0.1",
    "@fullcalendar/bootstrap": "^5.10.1",
    "@fullcalendar/core": "^5.10.1",
    "@fullcalendar/daygrid": "^5.10.1",
    "@fullcalendar/interaction": "^5.10.1",
    "@fullcalendar/list": "^5.10.1",
    "@fullcalendar/timegrid": "^5.10.1",
    "@fullcalendar/vue": "^5.10.1",
    "@fullcalendar/vue3": "^5.10.1",
    "@j-t-mcc/vue3-chartjs": "^1.2.0",
    "@vue-leaflet/vue-leaflet": "^0.6.1",
    "@vueform/multiselect": "^2.3.1",
    "@vueform/slider": "^2.0.8",
    "@vuelidate/core": "^2.0.0-alpha.34",
    "@vuelidate/validators": "^2.0.0-alpha.26",
    "apexcharts": "^3.33.0",
    "axios": "^1.3.1",
    "bootstrap": "^5.1.3",
    "bootstrap-vue-3": "^0.1.0",
    "datatables.net-buttons": "^2.3.2",
    "datatables.net-buttons-dt": "^2.3.2",
    "datatables.net-dt": "^1.13.1",
    "datatables.net-select": "^1.5.0",
    "datatables.net-select-dt": "^1.5.0",
    "datatables.net-vue3": "^2.0.0",
    "chart.js": "^3.7.0",
    "click-outside-vue3": "^4.0.1",
    "core-js": "^3.6.5",
    "dropzone": "^6.0.0-beta.2",
    "echarts": "^5.3.0",
    "jwt-decode": "^3.1.2",
    "leaflet": "^1.7.1",
    "maska": "^1.5.0",
    "metismenujs": "^1.3.1",
    "moment": "^2.29.1",
    "sass": "^1.48.0",
    "sass-loader": "^10.0.1",
    "simplebar": "^5.3.6",
    "simplebar-vue3": "^0.1.5",
    "sweetalert2": "^11.3.6",
    "vue": "^3.2.37",
    "vue-axios": "^3.5.2",
    "vue-chartist": "^3.0.0",
    "vue-cropperjs": "^5.0.0",
    "vue-draggable-next": "^2.1.1",
    "vue-easy-lightbox": "^1.2.4",
    "vue-form-wizard": "^0.8.4",
    "vue-hotel-datepicker": "^4.5.1",
    "vue-i18n": "^9.2.0-beta.35",
    "vue-meta": "^2.4.0",
    "vue-number-input-spinner": "^2.2.0",
    "vue-router": "^4",
    "vue-switches": "^2.0.1",
    "vue3-apexcharts": "^1.4.1",
    "vue3-carousel": "^0.1.36",
    "vue3-datepicker": "^0.3.2",
    "vue3-draggable": "^2.0.9",
    "vue3-dropzone": "^0.0.7",
    "vue3-echarts": "^1.0.4",
    "vue3-google-map": "^0.8.3",
    "vue3-scroll-spy": "^1.0.8",
    "vuelidate": "^0.7.7",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

karacaguard

I Add Test Link

allan

Looks like your project is using a CommonJS loader - so use:

const jQuery = require('jquery');
const JSZip = require('jszip');
const DataTablesLib = require('datatables.net')();
require('datatables.net-buttons')();
require('datatables.net-buttons/js/buttons.html5.js')();
require('datatables.net-select')();

DataTable.use(DataTablesLib);
DataTablesLib.Buttons.jszip(JSZip);

Updated project: https://stackblitz.com/edit/vue-1aamnq?file=src%2Fcomponents%2FHelloWorld.vue .

Allan