项目中涉及到Table表格的很大概率会有需求是导出Excel,在项目中一般使用xlsx插件导出
思路
先来理一下实现这个需求的大纲
1. 首先是安装插件并使用
2. 获取到要导出的数据
3. 编写导出方法
4. 处理成xlsx插件接收的数据
5. 导出表格定制化
安装插件
npm install xlsx
npm install xlsx-js-style --save
npm install file-saver --save
npm install xlsx
npm install xlsx-js-style --save
npm install file-saver --save
import * as XLSX from ‘xlsx’ //导XLSX插件
import XLSXJSStyle from ‘xlsx-js-style’ //定制化XLSX的样式插件
import FileSaver from ‘file-saver’ //添加样式后需要用fileSaver到处(如果不使用xlsx-js-style可以直接 用xlsx的导出方法)
import * as XLSX from 'xlsx' //导XLSX插件
import XLSXJSStyle from 'xlsx-js-style' //定制化XLSX的样式插件
import FileSaver from 'file-saver' //添加样式后需要用fileSaver到处(如果不使用xlsx-js-style可以直接用xlsx的导出方法)
获取到要导出的数据
我项目中用的antdv 所以这里就不过多展示
编写导出方法
我们的项目需求中要求合并单元格,具体数据格式后面展示
/**
*
* @param tableData 要导出的数据(必填)
* @param columns 要导出的数据的表头(必填)因为是用的表格组件所以我这里直接传的就是table组件要求的columns
* @param name 导出文件名称默认为test
* @param sheetName
* @param merges 要合并行/列 格式为 [{s:{r:x,c:x},e:{}}]
*/
export function exportExcel(
tableData,
columns,
name = 'test',
sheetName = 'sheetName',
merges: any = [],
) {
/* convert state to workbook */
const data: any[] = []
const keyArray: any[] = columns.map((item) => item.key) //获取key
const titleArr: any[] = columns.map((item) => item.title) //获取表头
// keyArray为英文字段表头
tableData.forEach((item) => {
const arr: any[] = keyArray.map((key) => {
return item[key]
})
data.push(arr)
})
data.splice(0, 0, titleArr)
// data.split(0,0,keyArray,titleArr) 如果需要英文表头的话
console.log('data', data)
const ws: any = XLSX.utils.aoa_to_sheet(data)
const wb = XLSX.utils.book_new()
// 此处隐藏英文字段表头
// const wsrows = [{ hidden: true }]
// ws['!rows'] = wsrows // ws - worksheet
ws['!merges'] = merges
console.log(ws)
for (const key in ws) {
if (key != '!rows' && key != '!merges' && key != '!ref') {
ws[key].s = {
alignment: {
horizontal: 'center', //水平居中
vertical: 'center', //垂直居中
},
}
}
}
XLSX.utils.book_append_sheet(wb, ws, sheetName)
const wbout = XLSXJSStyle.write(wb, {
bookType: 'xlsx', bookSST: true, type: 'array' })
try {
FileSaver.saveAs(new Blob([wbout], {
type: 'application/octet-stream' }), `${
name}.xlsx`)
} catch (error) {
}
}
处理成xlsx想要的数据
我们的数据中是一条数据里某个字段是数组形式,所以导出的时候要根据这个字段拆分成对应数据,然后再把重复的字段合并,我以我们项目中的字段为例了就,数据格式如下
[
{
createTime: '',
deviceID: '',
deviceSN: '',
firewallVersion: '',
lastActiveTime: '',
online: '',
productID: '',
productName: '',
projectList: [
{
projectAddress: '',
projectID: '',
projectName: '',
projectShortName: '',
},
],
},
]
//导出方法具体使用
function exportSelectFun() {
let tableData = JSON.parse(JSON.stringify(state.selectedRows))
let {
arr, merges } = formatData(tableData, true) //拆分数据,以及处理合并单元格的数据
exportExcel(
arr,
[
{
title: '序号',
dataIndex: 'index',
key: 'index',
ellipsis: true,
},
...columns.filter((item) => item.key != 'operation'),
],
'智能终端设备列表',
'sheetName',
merges,
)
}
/**
*拆分数据以及处理数据
*target 目标数据
*flag 是否要拆分
*/
function formatData(target, flag = false) {
let arr: any[] = []
let merges: any[] = []
target.forEach((item, index) => {
let newArr = item.projectList.map((v) => {
let obj = {
...item,
...v,
index: index + 1,
}
obj.location = obj.projectAddress
if (flag) {
obj.monitorItemName = ''
obj.monitorPointName = ''
if (Array.isArray(obj.monitorPointList)) {
obj.monitorItemName = removeDuplicates(
obj.monitorPointList.map((point) => point.monitorItemName),
)?.join(',')
obj.monitorPointName = obj.monitorPointList
.map((point) => point.monitorPointName)
?.join(',')
}
}
return obj
})
//调用getMerges生成合并的数据
//这里用的取巧的办法
// 1.start传的是arr的长度,因为每次循环都会把拆分的数据重新添加到arr中所以我们start就用arr.length
// 2.end参数传的是newArr的长度,因为每次拆分好的数据是newArr 所以我要合并单元格的结束位置就是这个newArr,首次的时候newArr.length,之后就要变成arr.length+length了
if (arr.length == 0) {
merges.push(...getMerges(arr.length, newArr.length))
} else {
merges.push(...getMerges(arr.length, arr.length + newArr.length))
}
arr.push(...newArr)
})
return {
arr, merges }
}
/*
* 处理合并单元格参数merges
* start 起始位置
* end 结束位置
* num 是要合并几列
*/
function getMerges(start, end, num = 5) {
let merges: any[] = []
start += 1 //因为合并的时候要去除表头所以start要+1
for (let index = 0; index < num; index++) {
merges.push({
s: {
r: start, c: index }, e: {
r: end, c: index } })
}
console.log(merges)
return merges
}
导出展示
结语
比较仓促的结束,因为要下班了,打工人从不加班哈哈哈哈