vue3实现导出Excel（2）

第一步终端安装
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)));