前端使用xlsx导出数据生成Excel文件

安装 xlsx

xlsx 算是基础版本，不能对单元格进行样式（对齐方式、文字颜色、背景颜色等）的修饰，如果需要修饰单元格，可使用 xlsx-js-style

npm i xlsx

引入 xlsx

import xlsx from 'xlsx';

需要导出的数据源

// 一般我们拿到的是从接口中请求到的对象数组，在使用是需要转成二维数组，下面有介绍
const data = [
  { name: '商品01', mb_num: 50, mb_sum: 5000, pc_num: 30, pc_sum: 3000, total_num: 80, total_sum: 8000 },
  { name: '商品02', mb_num: 50, mb_sum: 5000, pc_num: 30, pc_sum: 3000, total_num: 80, total_sum: 8000 },
  { name: '商品03', mb_num: 50, mb_sum: 5000, pc_num: 30, pc_sum: 3000, total_num: 80, total_sum: 8000 },
]

将数据源转成需要的二维数组

const body = data.map(x => ([x.name, x.mb_num, x.mb_sum, x.pc_num, x.pc_sum, x.total_num, x.total_sum]))

// 转换后的数据为一个二维数组
[
  ['商品01', 50, 5000, 30, 3000, 80, 8000]
  ['商品02', 50, 5000, 30, 3000, 80, 8000]
  ['商品03', 50, 5000, 30, 3000, 80, 8000]
]

定义 Excel 表头

// 根据需要导出的目标 Excel格式，先定义好表头
const header = [
  ['一月（2022年01月）'], 
  ['商品名称', '手机客户端', '', '电脑客户端', '', '总计', ''], 
  ['', '销售数量', '销售金额', '销售数量', '销售金额', '销售数量', '销售金额']
]

将定义好的表头添加到 body 中

body.unshift(...header);

//分别为每一行单元格内的值，需要合并的单元格给一个空值进行站位
[
  ['一月（2022年01月）','','','','','','']
  ['商品名称', '手机客户端', '', '电脑客户端', '', '总计', '']
  ['', '销售数量', '销售金额', '销售数量', '销售金额', '销售数量', '销售金额']
  ['商品01', 50, 5000, 30, 3000, 80, 8000]
  ['商品02', 50, 5000, 30, 3000, 80, 8000]
  ['商品03', 50, 5000, 30, 3000, 80, 8000]
]

1 创建虚拟的 workbook

Excel整个表格可称为 workbook
里面的每张表分别是 sheet

const workbook = xlsx.utils.book_new();

2 将二维数组转成 sheet

// 这里我们举例是用 aoa_to_sheet ，所以是需要将数据源转成一个二维数组
const sheet = xlsx.utils.aoa_to_sheet(body);

// aoa_to_sheet  	是将【一个二维数组】转化成 sheet
// json_to_sheet 	是将【由对象组成的数组】转化成sheet
// table_to_sheet  	是将【table的dom】直接转成sheet

!merges 设置单元格合并

const merges = [
  { s: { r: 0, c: 0 }, e: { r: 0, c: 6 } },
  { s: { r: 1, c: 1 }, e: { r: 1, c: 2 } },
  { s: { r: 1, c: 3 }, e: { r: 1, c: 4 } },
  { s: { r: 1, c: 5 }, e: { r: 1, c: 6 } },
  { s: { r: 1, c: 0 }, e: { r: 2, c: 0 } },
]
sheet['!merges'] = merges; // 添加到sheet中

// merges 为一个对象数组，每个对象设定了单元格合并的规则
// { s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }, 即为一个规则，s:开始位置, e:结束位置, r:行, c:列

!cols 设置列宽

// cols 为一个对象数组，依次表示每一列的宽度
const cols = [
    { wch: 10 },
    { wch: 10 }, 
    { wch: 10 },
    { wch: 10 },
    { wch: 10 },
    { wch: 10 }, 
    { wch: 10 }
];
sheet['!cols'] = cols; // 添加到sheet中

!rows 设置行高

// rows 为一个对象数组，依次表示每一行的高度
const rows = [
    { hpx: 20 }, 
    { hpx: 16 },
    { hpx: 18 }
]
sheet['!rows'] = rows; // 添加到sheet中

3 向 workbook 中添加 sheet

xlsx.utils.book_append_sheet(workbook, sheet, 'sheet名称');

// 一个 workbook 允许添加多个 sheet，即可以同时创建多个表
// xlsx.utils.book_append_sheet(workbook, sheet2, 'sheet名称2');

4 导出 workbook

// 注意：定义导出 excel 的名称时需要加上后缀 .xlsx
xlsx.writeFile(workbook, 'excel名称.xlsx');

完整示例：

import xlsx from 'xlsx'; // 引入 xlsx
......

// 需要导出的数据源
const data = [
  { name: '商品01', mb_num: 50, mb_sum: 5000, pc_num: 30, pc_sum: 3000, total_num: 80, total_sum: 8000 },
  { name: '商品02', mb_num: 50, mb_sum: 5000, pc_num: 30, pc_sum: 3000, total_num: 80, total_sum: 8000 },
  { name: '商品03', mb_num: 50, mb_sum: 5000, pc_num: 30, pc_sum: 3000, total_num: 80, total_sum: 8000 },
]

// 将数据源转成我们需要的二维数组
const body = data.map(x => ([x.name, x.mb_num, x.mb_sum, x.pc_num, x.pc_sum, x.total_num, x.total_sum]))

// 定义Excel表头
const header = [
  ['一月（2022年01月）'],
  ['商品名称', '手机客户端', '', '电脑客户端', '', '总计', ''],
  ['', '销售数量', '销售金额', '销售数量', '销售金额', '销售数量', '销售金额']
]

body.unshift(...header);// 将定义好的表头添加到 body 中
const workbook = xlsx.utils.book_new();// 创建虚拟的 workbook
const sheet = xlsx.utils.aoa_to_sheet(body);// aoa_to_sheet 将二维数组转成 sheet
const merges = [
  { s: { r: 0, c: 0 }, e: { r: 0, c: 6 } },
  { s: { r: 1, c: 1 }, e: { r: 1, c: 2 } },
  { s: { r: 1, c: 3 }, e: { r: 1, c: 4 } },
  { s: { r: 1, c: 5 }, e: { r: 1, c: 6 } },
  { s: { r: 1, c: 0 }, e: { r: 2, c: 0 } },
]
sheet['!merges'] = merges; // 将merges添加到sheet中，设置合并单元格
const cols = [ { wch: 10 },{ wch: 10 },{ wch: 10 },{ wch: 10 },{ wch: 10 },{ wch: 10 },{ wch: 10 } ];
sheet['!cols'] = cols; // 将cols添加到sheet中，设置列宽
const rows = [ { hpx: 20 },{ hpx: 16 },{ hpx: 18 }]
sheet['!rows'] = rows; // 将rows添加到sheet中，设置行高

xlsx.utils.book_append_sheet(workbook, sheet, 'sheet名称'); // 向 workbook 中添加 sheet
xlsx.writeFile(workbook, 'excel名称.xlsx'); // 导出 workbook
// 注意：定义导出 excel 的名称时需要加上后缀 .xlsx

总结

其中，创建虚拟的 workbook、将数组转成 sheet、向workbook中添加sheet和导出workbook，这四个步骤是必要的。
设置合并单元格、设置列宽、设置行高是可选的，根据需求进行添加。