目录前言一、实现1. 页面2.代码2.1 核心方法2.2 调用方法结束前言 分享一个Vue前端导出excel文件的方法。记录学习! 功能需求:将表格的全部数据导出Excel格式的文件
功能需求:将表格的全部数据导出Excel格式的文件
前端:vue3+Element-Plus
这个导出方法全部为前端操作,后端只需要传入表格数据到前端即可(基础的多表查询,用的内连接)
const exportList = (list) => {
//表格表头,导出表头
let tableHeader = [['#', '资产编号', '资产名称', '资产类别', '资产型号', "资产单价", "资产金额",
"生产厂家", "生产日期", "购买日期", "购买人", "状态", "库存数量"]]
list.forEach((item, index) => {
let rowData = []
//导出内容的字段
rowData = [
index + 1,
item.zcbh,
item.zcmc,
item.name,
item.zcxh,
item.zcdj,
item.zcje,
item.sccj,
currencyFORMatDate(item.scrq),
currencyFormatDate(item.gmrq),
item.gmr,
item.sts,
item.kcsl,
]
tableHeader.push(rowData)
})
let wb = XLSX.utils.book_new()
let ws = XLSX.utils.aoa_to_sheet(tableHeader)
XLSX.utils.book_append_sheet(wb, ws, '资产设备基本信息') // 工作簿名称
XLSX.writeFile(wb, '资产设备基本信息.xlsx') // 保存的文件名
}
将这个导出方法单独封装出来,带一个参数,即需要导出的所有数据的List集合,那么在调用的时候传参即可使用。
const exportExcel = () => {
ElMessageBox.confirm(
'确定导出资产设备基本信息表吗?',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(async () => {
let list = [];
const res = await request.get("asset/listAll");
console.log(res)
list = res.data.assetsAllList
exportList(list);
if (res.data.code === 200) {
ElMessage({
type: 'success',
message: '即刻开始下载',
})
}
})
.catch(() => {
})
}
await request.get(“asset/listAll”) 请求后端接口,拿到结果。将结果中的集合赋值给提前定义好的list数组list = res.data.assetsAllList。用了MessageBox消息弹框,根据自己的实际需求哈用到了异步等待,上面的request.get是自己封装的axios方法 3.演示
到此这篇关于Vue前端表格导出Excel文件的文章就介绍到这了,更多相关Vue前端表格导出Excel内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Vue前端表格导出Excel文件的图文教程
本文链接: https://www.lsjlt.com/news/211211.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0