第一步终端安装
npm install js-table2excel# 或者
yarn add js-table2excel
第二步引入
// 导出需要引入的
import * as XLSX from 'xlsx';
import table2excel from 'js-table2excel'
第三步创建column数据表单
const column = [
//数据表单
{
title: "序号", //表头名称title
key: "id", //数据
type: "text", //类型
},
{
title: "用户姓名",
key: "name",
type: "text",
},
{
title: "用户昵称",
key: "nickname",
type: "text",
},
{
title: "用户头像",
key: "imgs",
type: 'image',
width: 80,
height: 80,
},
{
title: "手机号",
key: "tel",
type: "text",
width: 130,
height: 80,
},
{
title: "商品名称",
key: "ticketName",
type: "text",
width: 130,
height: 80,
},
{
title: "商品状态",
key: 'sheng',
type: "text",
width: 130,
height: 80,
}
,
{
title: "支付状态",
key: "shen",
type: "text",
width: 130,
height: 80,
},
{
title: "订单号",
key: "orderNum",
type: "text",
width: 130,
height: 80,
},
{
title: "支付金额",
key: "money",
type: "text",
width: 130,
height: 80,
},
{
title: "商品价格",
key: "ticketPrice",
type: "text",
width: 130,
height: 80,
},
{
title: "支付日期",
key: "pay_time",
type: "text",
width: 130,
height: 80,
},
{
title: "过期日期",
key: "over_time",
type: "text",
width: 130,
height: 80,
},
{
title: "下单日期",
key: "create_time",
type: "text",
width: 130,
height: 80,
},
];
第四步进行导出
//将数据转化为字符串(list_data数据是接口数据,把名称换成自己的数据即可)
getCurrentDateTimeString()
let tableDatas = JSON.parse(JSON.stringify(Value_Data.value));
let datas = tableDatas;
table2excel(column, datas, "订单导出" + g); //表单数据名称
这里的+g是当天时间
这里的getCurrentDataTimeString()是计算获取当天的时间
获取当天时间
let g = ''
// 获取到当前时间
function getCurrentDateTimeString() {
const now = new Date();
// 获取当前的年份,并只取后两位
const year = now.getFullYear().toString().slice();
// 获取当前的月份,并确保是两位数(从0开始)
const month = (now.getMonth() + 1).toString().padStart(2, '0');
// 获取当前的日期,并确保是两位数
const day = now.getDate().toString().padStart(2, '0');
// 获取当前的小时,并确保是两位数
const hours = now.getHours().toString().padStart('0');
// 获取当前的分钟,并确保是两位数
const minutes = now.getMinutes().toString().padStart(2, '0');
// 获取当前的秒,并确保是两位数
const seconds = now.getSeconds().toString().padStart(2, '0');
// 拼接成所需的字符串格式
const dateTimeString = `${year}-${month}-${day} ${hours}-${minutes}-${seconds}`;
g = `${year}-${month}-${day}`
return dateTimeString;
}
完整代码
let g = ''
// 获取到当前时间
function getCurrentDateTimeString() {
const now = new Date();
// 获取当前的年份,并只取后两位
const year = now.getFullYear().toString().slice();
// 获取当前的月份,并确保是两位数(从0开始)
const month = (now.getMonth() + 1).toString().padStart(2, '0');
// 获取当前的日期,并确保是两位数
const day = now.getDate().toString().padStart(2, '0');
// 获取当前的小时,并确保是两位数
const hours = now.getHours().toString().padStart('0');
// 获取当前的分钟,并确保是两位数
const minutes = now.getMinutes().toString().padStart(2, '0');
// 获取当前的秒,并确保是两位数
const seconds = now.getSeconds().toString().padStart(2, '0');
// 拼接成所需的字符串格式
const dateTimeString = `${year}-${month}-${day} ${hours}-${minutes}-${seconds}`;
g = `${year}-${month}-${day}`
return dateTimeString;
}
//导出点击事件
const derive = (i) => {
console.log(i);
const Value_Data = ref([])
// if(Value_Data.value!=''){
if (i == 0) {
// if(Value_Data.value!=''){
if (tableData.value != "") {
Value_Data.value = Data.value
console.log(Data.value);
ElMessage({
message: '导出成功',
type: 'success',
})
data()
// const worksheet = XLSX.utils.json_to_sheet(Value_Data.value);
// const workbook = XLSX.utils.book_new();
// XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
// // 生成Excel文件并下载
// XLSX.writeFile(workbook, `订单.xlsx`);
const column = [
//数据表单
{
title: "序号", //表头名称title
key: "id", //数据
type: "text", //类型
},
{
title: "用户姓名",
key: "name",
type: "text",
},
{
title: "用户昵称",
key: "nickname",
type: "text",
},
{
title: "用户头像",
key: "imgs",
type: 'image',
width: 80,
height: 80,
},
{
title: "手机号",
key: "tel",
type: "text",
width: 130,
height: 80,
},
{
title: "商品名称",
key: "ticketName",
type: "text",
width: 130,
height: 80,
},
{
title: "商品状态",
key: 'sheng',
type: "text",
width: 130,
height: 80,
}
,
{
title: "支付状态",
key: "shen",
type: "text",
width: 130,
height: 80,
},
{
title: "订单号",
key: "orderNum",
type: "text",
width: 130,
height: 80,
},
{
title: "支付金额",
key: "money",
type: "text",
width: 130,
height: 80,
},
{
title: "商品价格",
key: "ticketPrice",
type: "text",
width: 130,
height: 80,
},
{
title: "支付日期",
key: "pay_time",
type: "text",
width: 130,
height: 80,
},
{
title: "过期日期",
key: "over_time",
type: "text",
width: 130,
height: 80,
},
{
title: "下单日期",
key: "create_time",
type: "text",
width: 130,
height: 80,
},
];
//将数据转化为字符串(list_data数据是接口数据,把名称换成自己的数据即可)
getCurrentDateTimeString()
let tableDatas = JSON.parse(JSON.stringify(Value_Data.value));
let datas = tableDatas;
table2excel(column, datas, "订单导出" + g); //表单数据名称
} else {
ElMessage({
message: '暂无订单可以导出',
type: 'warning',
})
}
} else if (i == 1) {
console.log(tableData.value);
if (search_name.value != "" || time.value != "" || search_tel.value != "" || OrderAll.value != "" || status_z.value != "" || status_e.value != "") {
Value_Data.value = tableData.value
ElMessage({
message: '导出成功',
type: 'success',
})
data()
const column = [
//数据表单
{
title: "序号", //表头名称title
key: "id", //数据
type: "text", //类型
},
{
title: "用户姓名",
key: "name",
type: "text",
},
{
title: "用户昵称",
key: "nickname",
type: "text",
},
{
title: "用户头像",
key: "imgs",
type: 'image',
width: 80,
height: 80,
},
{
title: "手机号",
key: "tel",
type: "text",
width: 130,
height: 80,
},
{
title: "商品名称",
key: "ticketName",
type: "text",
width: 130,
height: 80,
},
{
title: "商品状态",
key: 'sheng',
type: "text",
width: 130,
height: 80,
}
,
{
title: "支付状态",
key: "shen",
type: "text",
width: 130,
height: 80,
},
{
title: "订单号",
key: "orderNum",
type: "text",
width: 130,
height: 80,
},
{
title: "支付金额",
key: "money",
type: "text",
width: 130,
height: 80,
},
{
title: "商品价格",
key: "ticketPrice",
type: "text",
width: 130,
height: 80,
},
{
title: "支付日期",
key: "pay_time",
type: "text",
width: 130,
height: 80,
},
{
title: "过期日期",
key: "over_time",
type: "text",
width: 130,
height: 80,
},
{
title: "下单日期",
key: "create_time",
type: "text",
width: 130,
height: 80,
},
];
//将数据转化为字符串(list_data数据是接口数据,把名称换成自己的数据即可)
getCurrentDateTimeString()
let tableDatas = JSON.parse(JSON.stringify(Value_Data.value));
let datas = tableDatas;
table2excel(column, datas, "订单导出" + g); //表单数据名称
} else {
ElMessage({
message: '您还未搜索订单无法导出数据',
type: 'warning',
})
}
} else {
console.log(SelectArr.value);
if (SelectArr.value.length > 0) {
Value_Data.value = SelectArr.value
ElMessage({
message: '导出成功',
type: 'success',
})
data()
const column = [
//数据表单
{
title: "序号", //表头名称title
key: "id", //数据
type: "text", //类型
},
{
title: "用户姓名",
key: "name",
type: "text",
},
{
title: "用户昵称",
key: "nickname",
type: "text",
},
{
title: "用户头像",
key: "imgs",
type: 'image',
width: 80,
height: 80,
},
{
title: "手机号",
key: "tel",
type: "text",
width: 130,
height: 80,
},
{
title: "商品名称",
key: "ticketName",
type: "text",
width: 130,
height: 80,
},
{
title: "商品状态",
key: 'sheng',
type: "text",
width: 130,
height: 80,
}
,
{
title: "支付状态",
key: "shen",
type: "text",
width: 130,
height: 80,
},
{
title: "订单号",
key: "orderNum",
type: "text",
width: 130,
height: 80,
},
{
title: "支付金额",
key: "money",
type: "text",
width: 130,
height: 80,
},
{
title: "商品价格",
key: "ticketPrice",
type: "text",
width: 130,
height: 80,
},
{
title: "支付日期",
key: "pay_time",
type: "text",
width: 130,
height: 80,
},
{
title: "过期日期",
key: "over_time",
type: "text",
width: 130,
height: 80,
},
{
title: "下单日期",
key: "create_time",
type: "text",
width: 130,
height: 80,
},
];
//将数据转化为字符串(list_data数据是接口数据,把名称换成自己的数据即可)
getCurrentDateTimeString()
let tableDatas = JSON.parse(JSON.stringify(Value_Data.value));
let datas = tableDatas;
table2excel(column, datas, "订单导出" + g); //表单数据名称
} else {
ElMessage({
message: '请选择你要导出的数据',
type: 'warning',
})
return
}
}
}
// 当前时间
let date = new Date();
// 获取当前时间
let date_time = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
console.log(Date.parse(new Date(date_time)));