DataTables Excel Buttons Not Show With Vue Cli
DataTables Excel Buttons Not Show With Vue Cli

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"
]
}
This discussion has been closed.
Answers
I Add Test Link
Looks like your project is using a CommonJS loader - so use:
Updated project: https://stackblitz.com/edit/vue-1aamnq?file=src%2Fcomponents%2FHelloWorld.vue .
Allan