【发布时间】：2021-04-19 13:32:15
【问题描述】：
我在如何使用 laravel 中的数据表在 vue.js 中实现导出文件时遇到问题。我知道问这个问题很常见，但我还找不到方法。当我单击按钮时，它应该会自动下载 Excel 中的数据表数据。如果有人可以帮助我，那就太好了，在此先感谢您！
我有这两个按钮
<button type="button" @click='togglexl()'>Export xlsx</button>
<button type="button" @click='togglecsv()'>Export csv</button>
Vuejs 脚本
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();
},
};
},
}
}
【问题讨论】：