您的位置:首页 > 娱乐 > 八卦 > vue3实现导出Excel(2)

vue3实现导出Excel(2)

2024/10/6 2:23:31 来源:https://blog.csdn.net/weixin_62980497/article/details/141107035  浏览:    关键词: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: "序号", //表头名称titlekey: "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.valueconsole.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: "序号", //表头名称titlekey: "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.valueElMessage({message: '导出成功',type: 'success',})data()const column = [//数据表单{title: "序号", //表头名称titlekey: "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.valueElMessage({message: '导出成功',type: 'success',})data()const column = [//数据表单{title: "序号", //表头名称titlekey: "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)));


 


 

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com