前言

分享一个Vue前端导出Excel文件的方法。记录学习！

功能需求：将表格的全部数据导出Excel格式的文件
前端：Vue3+Element-Plus

这个导出方法全部为前端操作，后端只需要传入表格数据到前端即可（基础的多表查询，用的内连接）

一、实现

1. 页面

2.代码

2.1 核心方法

/*** 表格数据导出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) 创建工作簿，将表格内容放入工作簿。

2.2 调用方法

/*** 表格数据导出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.assetsAllListexportList(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文件相关推荐

jQuery表格导出Excel文件以及网页内容导出Word文档
前言: 我在这里给大家介绍一下我们能用代码实现的最简单的两种转换为Excel文件以及Word文档的方法. jQuery表格导出Excel文件先来看看我们的层级划分: 如图所示: demo.css 代 ...
vue下载表格为excel文件,需要后端传递list集合
一次学习记录原文链接:(16条消息) Vue--表格导出excel(导出table表格所有数据)_Hsu yiqi的博客-CSDN博客_vue表格导出excelhttps://blog.csdn.n ...
前端页面导出excel文件功能(导出)
方法一: 一.后台管理系统中常有导出excel功能,可定义一个函数,在其他.vue文件中导入即可用. 1.1定义函数 export function excelDown(res, name = &qu ...
vue+Springboot+easyexecl 导出excel文件打不开
使用vue+Springboot+easyExecl导出文件时,在浏览器中下载的文件总是打不开,并且显示这个错误 1.我们逐步进行排查,首先看是不是后端的问题.这里附上我后端的代码 @GetMappi ...
前端下载导出Excel文件以及ie兼容问题
项目开发的时候需要导出功能,一般情况有两种方法,一种是后端把数据弄好然后前端只是访问个地址就能实现下载,代码如下: var url="后端写好的访问地址"; window.loca ...
vue前端下载本地excel文件
<a class="template-download" href="./存货周转率及存货金额目标录入模板.xlsx" download><i ...
php 将数组导出excel,#php 怎样将数组导出excel文件#前端导出excel表格
php 怎样将数组导出excel文件 public function excel() { //在这里你要导出的数据 $data = M('pmproject',"pm_",MYS ...
Vue+iview实现自定义格式导出Excel文件
背景:项目中要实现一个导出Excel文件模板的功能,原来实现是通过后台生成然后前端请求下载,这样要消耗IO资源,然后看了一下之前项目的导出功能,发现原来Vue+iview可以实现本地数据导出,不过iv ...
h5页面如何预览excel文件_如何使用JavaScript实现前端导入和导出excel文件?(H5编辑器实战复盘)...
前言最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解 ...

Vue前端表格导出Excel文件

前言

一、实现

1. 页面

2.代码

2.1 核心方法

2.2 调用方法

3.演示

结束

Vue前端表格导出Excel文件相关推荐

最新文章

热门文章