The front end uses xlsx to export data to generate an Excel file

install xlsx

xlsx is considered the basic version and cannot modify the style (alignment, text color, background color, etc.) of the cell. If you need to modify the cell, you can use xlsx-js-style

npm i xlsx

Import xlsx

import xlsx from 'xlsx';

Data source to be exported

// 一般我们拿到的是从接口中请求到的对象数组，在使用是需要转成二维数组，下面有介绍
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 },
]

Convert the data source into the required two-dimensional array

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]
]

Define Excel header

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

Add the defined header to the 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 Create a virtualworkbook

The entire Excel table can be called Each table workbook
inside issheet

const workbook = xlsx.utils.book_new();

2 Convert the two-dimensional array intosheet

// 这里我们举例是用 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

!mergesSet up cell merging

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:列

!colsset column width

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

!rowsset line height

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

3 way workbook 中添加 sheet

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

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

4 exportworkbook

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

Full example:

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

Summarize

Among them, 创建虚拟的 workbook, 将数组转成 sheet, 向workbook中添加sheetand 导出workbook, these four steps are necessary.
设置合并单元格, 设置列宽, 设置行高are optional and can be added as required.