当前位置：首页 > 全部内容 > 前端JS使用xlsx-js-style导出Excel并自定义单元格样式

前端JS使用xlsx-js-style导出Excel并自定义单元格样式

作者：阿沐时间：2026-10-30 23:27:03浏览：122

本文介绍如何在Web前端使用xlsx-js-style库导出Excel文件，并详细演示如何自定义单元格样式，包括字体、颜色、边框、合并单元格、列宽和行高。通过完整示例代码，帮助开发者实现美观的Excel导出功能。

安装

在前端导出Excel时，常用的JavaScript库包括xlsx，xlsx是其基础版本，但该版本不支持对单元格进行样式修饰（如对齐方式、文字颜色、背景颜色等）。若需自定义单元格样式，推荐使用xlsx-js-style库。

npm install xlsx-js-style

引入

import XLSXS from 'xlsx-js-style';

准备需要导出的数据源。

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

/*
    定义表头，每一行即是一个数组，数组中的元素即是一个个单元格内容。
    如果单元格不需要样式，那么每个元素类型为字符串即可。如：['一月（2022年01月）'], 
    如果单元格需要样式，那么数组中的元素就需要为一个个对象，在此对象中定义单元格的样式等等。
*/
    const header = [
      // 第一行，需要样式，则数组中元素为对象，进行定义样式。
      [
        {
          v: '一月（2023年01月）',
          t: 's',
          s: {
            // font 字体属性
            font: {
              bold: true,
              sz: 14,
              name: '宋体',
            },
            // alignment 对齐方式
            alignment: {
              vertical: 'center', // 垂直居中
              horizontal: 'center', // 水平居中
            },
            // border 边框属性
            border: {
              top: { style: 'thin' },
              bottom: { style: 'thin' },
              left: { style: 'thin' },
              right: { style: 'thin' }
            },
            // fill 颜色填充属性
            fill: {
              fgColor: { rgb: '87CEEB' },
            },
          },
        },
      ],
      ['商品名称', '手机客户端', '', '电脑客户端', '', '总计', ''],
      ['', '销售数量', '销售金额', '销售数量', '销售金额', '销售数量', '销售金额']
    ]

将定义好的表头添加到数据主体（body）中。

body.unshift(...header);

将二维数组转换为Excel工作表（sheet）。

// 这里我们举例是用 aoa_to_sheet ，所以是需要将数据源转成一个二维数组
const sheet = XLSXS.utils.aoa_to_sheet(body);
// aoa_to_sheet  	是将【一个二维数组】转化成 sheet
// json_to_sheet 	是将【由对象组成的数组】转化成sheet
// table_to_sheet  	是将【table的dom】直接转成sheet

!merges 设置单元格合并

若需设置单元格合并，需定义好merges，并将其添加到sheet中。

merges是一个对象数组，每个对象定义了单元格合并的规则。

例如：{ s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }，其中s表示开始位置，e表示结束位置，r代表行号，c代表列号。

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中

!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中

创建虚拟的workbook

整个Excel表格称为workbook，其中的每张表称为sheet。

const workbook = xlsx.utils.book_new();

向workbook中添加sheet。

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

导出workbook。

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

完整示例

import XLSXS from 'xlsx-js-style';
......
// 需要导出的数据源
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]))
/* 定义表头
    定义表头，每一行即是一个数组，数组中的元素即是一个个单元格内容。
    如果单元格不需要样式，那么每个元素类型为字符串即可。如：['一月（2022年01月）'], 
    如果单元格需要样式，那么数组中的元素就需要为一个个对象，在此对象中定义单元格的样式等等。
    这里只针对第一行进行举例：
*/
const header = [
  [
    {
      v: '一月（2023年01月）',
      t: 's',
      s: {
        // font 字体属性
        font: {
          bold: true,
          sz: 14,
          name: '宋体',
        },
        // alignment 对齐方式
        alignment: {
          vertical: 'center', // 垂直居中
          horizontal: 'center', // 水平居中
        },
        // fill 颜色填充属性
        fill: {
          fgColor: { rgb: '87CEEB' },
        },
      },
    },
  ],
  ['商品名称', '手机客户端', '', '电脑客户端', '', '总计', ''],
  ['', '销售数量', '销售金额', '销售数量', '销售金额', '销售数量', '销售金额']
]
body.unshift(...header);// 将定义好的表头添加到 body 中
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中，设置行高
const workbook = XLSXS.utils.book_new();// 创建虚拟的 workbook
XLSXS.utils.book_append_sheet(workbook, sheet, 'sheet名称'); // 向 workbook 中添加 sheet
XLSXS.writeFile(workbook, 'excel名称.xlsx'); // 导出 workbook
// 注意：定义导出 excel 的名称时需要加上后缀 .xlsx

效果图

安装

总结

  • 创建虚拟的 workbook、将数组转成 sheet、向workbook中添加sheet和导出workbook这四个步骤是必要的。
  • 设置合并单元格、设置列宽、设置行高是可选的，根据实际需求进行添加。
  • 如果添加样式需要border，则需要在被合并的单元格位置进行占位。

到此这篇关于前端js使用xlsx-js-style导出Excel文件并修饰单元格样式的文章就介绍到这了,更多相关前端导出Excel并修饰单元格内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

为什么叫JavaScript：语言命名由来及与Java的历史渊源

2026-11-05 11:37:48

JS获取当前时间年月日时分秒并格式化为YYYY-MM-DD HH：mm：ss

2026-11-04 21:25:21

不同语言间JS与Java/Python加密结果不一致怎么办

2026-11-04 18:27:23

Mock.js 拦截 Axios 和 Fetch 请求的原理与配置方法

2026-11-04 08:13:59

JS怎么获取当前日期并格式化为YYYY-MM-DD

2026-11-03 18:47:03