I’m having a trouble on how can I implement export file in vue.js using datatable in laravel. I know it is common to ask this problem, but I couldn’t find a way yet. When I click button it should automatically download the datatable data in excel. It would be great if anybody could help me out, thank you so much in advance!.
I have these two buttons
<button type="button" @click='togglexl()'>Export xlsx</button> <button type="button" @click='togglecsv()'>Export csv</button>
Vuejs script
export default {
data(){
return{
id: null,
trip_ticket: null,
created_at: null,
status: null,
status_class: null,
vehicles: [],
vehicle_image: null,
formFields: {
starting_odo: null,
ending_odo: null,
date_submitted_proc: null,
distance_travelled: null,
rate_per_km: null,
flat_rate: null,
no_nights: null,
rate_per_night: null,
remarks: null,
travel_date: null,
travel_time: null,
vehicle_id: null,
vehicle_name: null,
status: null,
total_cost: null
},
names: ['starting_odo', 'date_submitted_proc', 'rate_per_km', 'flat_rate', 'travel_date']
}
},
mounted(){
this.ini();
},
methods:{
ini() {
$(()=>{
this.tdatatable().init();
});
},
togglexl(){
//xlsx file here
},
togglecsv(){
//csv file here
},
tdatatable() {
let vm = this;
var initTable = () => {
var table = $('#list-travel-tbl');
table.DataTable({
searchDelay: 500,
scrollX: true,
scrollCollapse: true,
processing: true,
serverSide: true,
fixedColumns: {
leftColumns: false,
rightColumns: 1,
},
ajax: {
url: BASE_URL + '/tracking/listtravel',
type: 'GET'
},
columns: [
{ "data": "id" },
{ "data": "trip_ticket" },
{ "data": "company_name" },
{ "data": "travel_date" },
{ "data": "starting_odo" },
{ "data": "ending_odo" },
{ "data": "date_submit_proc" },
{ "data": "travelled" },
{ "data": "po_no" },
{ "data": "po_amount" },
{ "data": "rate_per_km" },
{ "data": "flat_rate" },
{ "data": "rate_per_night" },
{ "data": "nights_count" },
{ "data": "total_cost" },
{ "data": "is_status" },
{ "data": "remarks" },
{ "data": "created_at" },
{ "data": "id" }
],
columnDefs: [
{
targets: 1,
render: data => {
return '<span class="text-nowrap label label-lg font-weight-bold label-light-primary label-inline">'+data+'</span>';
}
},
{
targets: [9, 10, 11, 12, 14],
render: data => {
let values = (data)? toParseNum(data):'';
return values;
}
},
{
targets: [7, 13],
render: data => {
let values = (data)? data:'';
return values;
}
},
{
targets: [13, 16],
orderable: false,
},
{
targets: 17,
orderable: false,
render: data => {
return dateTimeEng(data);
}
},
{
targets: 15,
render: data => {
var status = {
1: {'title': 'Pending', 'class': ' label-light-warning'},
2: {'title': 'Approved', 'class': ' label-light-primary'},
3: {'title': 'Completed', 'class': ' label-light-success'},
};
if (typeof status[data] === 'undefined') {
return data;
}
return '<span class="label text-nowrap label-lg font-weight-bold ' + status[data].class + ' label-inline">' + status[data].title + '</span>';
},
},
{
targets: -1,
orderable: false,
render: data => {
return '
<a href="javascript:;" data-id="'+ data +'" class="ml-5 btn-edit btn btn-sm btn-clean btn-icon" title="Edit details">
<span class="svg-icon svg-icon-md">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24"/>
<path d="M8,17.9148182 L8,5.96685884 C8,5.56391781 8.16211443,5.17792052 8.44982609,4.89581508 L10.965708,2.42895648 C11.5426798,1.86322723 12.4640974,1.85620921 13.0496196,2.41308426 L15.5337377,4.77566479 C15.8314604,5.0588212 16,5.45170806 16,5.86258077 L16,17.9148182 C16,18.7432453 15.3284271,19.4148182 14.5,19.4148182 L9.5,19.4148182 C8.67157288,19.4148182 8,18.7432453 8,17.9148182 Z" fill="#000000" fill-rule="nonzero" transform="translate(12.000000, 10.707409) rotate(-135.000000) translate(-12.000000, -10.707409) "/>
<rect fill="#000000" opacity="0.3" x="5" y="20" width="15" height="2" rx="1"/>
</g>
</svg>
</span>
</a>
';
}
}
],
drawCallback: () => {
$('.btn-edit').off().on('click', function() {
let id = $(this).data('id');
vm.show(id);
});
}
});
};
return {
init: function() {
initTable();
},
};
},
}
}Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
I think this is what you’re looking for, just add this inside your vue datatable
Based on documenttion here in datatable https://datatables.net/extensions/buttons/examples/initialisation/export.html
dom: 'Bfrtip', buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
Method 2
you can check datatables docs:
https://datatables.net/extensions/buttons/examples/initialisation/export.html
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0