纯前端excel数据导出
前言
为了便于用户更好的对数据进行筛选操作统计。
基于Vue框架、iView UI组件开发
一、需求
- 将表格中的所有数据导出
- 有数据则导出，无数据则提示导出失败
二、需求开发
1.需要用到的组件
代码如下（示例）：
//导出按钮
<Row type="flex" justify="end" align="bottom" class="code-row-bg">
<Button type="success" @click="tableExport">导出</Button>
</Row>
//表格
<Table border :columns="tableInfo" :data="recordList.rows"></Table>
//分页
<Page :total="recordList.total" :page-size="recordList.limit" :current="recordList.page" @on-change="changePageHandler" show-elevator show-total></Page>
表格展示如下（示例）：
2.定义数据
代码如下（示例）：
data () {
return {
tableInfo: [
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Num',
key: 'num',
render: (h, params) => {
return h('span', this.showNum(params.row.num))
}
},
{
title: 'Address',
key: 'address'
},
{
title: 'Date',
key: 'date'
}
],
//表单信息
listData：{
page:1,
size:10,
....
}
//表格数据
recordList: [],
//用于后面存储后端返回的总数量
exportTotal:0,
}
},
3.获取表格数据
1、接口请求
mounted () {
this.list()
},
methods: {
list () {
//page:当前页数，size:请求条数（后端要啥数据就传啥数据）
let data = {page:1,size:20}
//接口请求
getRecordList(data).then((res) => {
if (res.status === 200) {
let recordList = res.data || []
//解构
let {total} = recordList
//将total赋值（方便后面数据导出时使用）
this.exportTotal=total
} else {
//接口请求失败
this.$Message.error(res.msg)
}
})
}
},
showNum (data) {
let showNum = ''
switch (data) {
case 'one':
showNum = '数字一'
break
case 'two':
showNum = '数字二'
break
case 'three':
showNum = '数字三'
break
case 'four':
showNum = '数字四'
break
default:
showNum = 'ss'
}
return showNum
}
}
}
2、接口返回的数据结构
//为了方便看看数据结构，造个假的吧😛接口数据结构如下
this.recordList = {
total: 8,
page: 1,
size: 10,
rows: [
{
name: 'John Brown',
age: 18,
num: 'one',
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
num: 'two',
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
num: 'three',
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 26,
num: 'four',
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
},
{
name: 'John Brown',
age: 18,
num: 'one',
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
num: 'two',
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
num: 'three',
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 26,
num: 'four',
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
]
}
4.导出
1、导出方法一，后端接收数据值时，可能存在限制，size过大时，接口挂了😂
// 导出
tableExport () {
// 导出所有信息
//判断一下表格中是否有数据，有则请求接口获取数据，并导出；无数据则提示数据为空，导出失败
if (this.exportTotal > 0) {
//这里将表格数据的总数赋值size传给后端
this.listData = {page:1,size:this.exportTotal}
let data = JSON.parse(JSON.stringify(this.listData))
//接口请求
getRecordList(data).then((res) => {
if (res.status === 200) {
let exportList = res.data || []
let {rows} = exportList
//这一步是为了处理一下接口返回的数据
rows.forEach((item) => {
Object.assign(item, {
num:this.showNum(item.num)
})
})
//调用数据导出的方法并传入数据
this.exportExcelFile(rows)
} else {
this.$Message.error(res.msg)
}
})
} else {
this.$Message.warning('数据为空，导出失败')
}
},
//数据导出成excel表格
exportExcelFile (excelData) {
const w = [50, 133, 130, 130, 130] //excel的列宽
const th = [
'Name', 'Age', 'Num', 'Address', 'Date',
]
const filterVal = [
'name',
'age',
'num',
'address',
'date',
]
const data = excelData.map(v => filterVal.map(k => v[k]))
const [fileName, fileType, sheetName] = ['列表', 'xlsx', '列表信息']
toExcel({ th, data, fileName, fileType, sheetName, w })
}
2、导出方法二，当方法一size过大时，那就只能多请求几次接口咯🉑
tableExport () {
// 导出所有信息
if (this.exportTotal > 0) {
let data = JSON.parse(JSON.stringify(this.listData))
//定义空数组存查询的数据
let queryList = []
const queryData = (exportPage) => {
data.pageSize = 1000
//判断有无exportPage重新赋值page
if (exportPage) {
data.page = exportPage
}
getRecordList(data.pageSize,data.page).then((res) => {
this.loading = false
if (res.status === 200) {
let exportList = res.data || []
let {rows, total} = exportList
//这一步是为了处理一下接口返回的数据
rows.forEach((item) => {
Object.assign(item, {
num:this.showNum(item.num)
})
})
queryList = queryList.concat(rows)
//当接口返回的total等于查询数据的长度时，?调用数据的导出方法
if (total === queryList.length) {
this.exportExcelFile(queryList)
this.$Message.info('导出成功')
} else { //当接口返回的total不等于?查询数据的长度时
//那就只能page+1在调一次接口了
let exportPage = exportList['page'] += 1
queryData(exportPage)
}
} else {
this.$Message.error(res.msg)
}
})
}
queryData()
} else {
this.$Message.warning('数据为空，导出失败')
}
},
总结
请求表格数据的接口和导出请求的是同一个接口，复制的时候记得改改接收接口返回数据的变量名，避免表格数据出现问题
数据量较少时，可采用第一种方法，数据量较多时，建议第二种