这篇文章主要介绍“Vue前端表格导出Excel文件的方法是什么”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue前端表格导出Excel文件的方法是什么”文章能帮助大家解决问题。
计算
安全
数据库
网络和加速
企业服务
/**
* 表格数据导出Excel实际方法
* @param list
*/
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集合，那么在调用的时候传参即可使用。
tableHeader 定义表格的表头（此处并不是很严谨，因为还包含了表格的数据，暂时为空，后面遍历时传入）。
rowData 是表格具体数据内容的数组，遍历时传入。
tableHeader.push(rowData) 将内容放入tableHeader中，形成完整的表格数据。
let wb = XLSX.utils.book_new() 定义表格实例。
let ws = XLSX.utils.aoa_to_sheet(tableHeader) 创建工作簿，将表格内容放入工作簿。
/**
* 表格数据导出Excel调用方法
*/
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文件的方法是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://blog.csdn.net/m0_59420288/article/details/128796252
