xlsx-js-style导出Demo纯前端带样式导出表格数据

适用场景

xlsx-js-style是一个强大的JavaScript库，专门用于在纯前端环境中生成带有丰富样式的Excel文件。它适用于以下场景：

数据报表导出：企业管理系统、数据分析平台需要将表格数据导出为格式化的Excel文件，包含字体样式、背景色、边框等。

在线表格应用：类似于在线Excel的Web应用，需要将用户编辑的内容完整导出，保持原有的格式和样式。

数据可视化导出：将前端图表或数据可视化结果转换为格式化的Excel文档，便于用户后续处理和分析。

批量数据下载：当用户需要下载大量结构化数据时，提供格式化的Excel文件比CSV更具可读性和专业性。

跨平台数据交换：在不需要后端支持的情况下，直接在浏览器中生成标准Excel文件，方便用户在不同系统间交换数据。

适配系统与环境配置要求

浏览器兼容性

• Chrome 60+（推荐使用最新版本）
• Firefox 55+
• Safari 12+
• Edge 79+
• 支持现代ES6语法的浏览器环境

开发环境要求

• Node.js 12.0+（用于开发和构建）
• npm 或 yarn 包管理器
• 现代前端框架支持：React、Vue、Angular等
• TypeScript支持（可选但推荐）

技术依赖

• 基于SheetJS核心库构建
• 纯JavaScript实现，无需额外运行时
• 文件大小优化，压缩后约100KB左右
• 支持CommonJS和ES Module两种模块格式

资源使用教程

安装与引入

通过npm安装：

npm install xlsx-js-style

在项目中引入：

import * as XLSX from 'xlsx-js-style';
// 或者使用CommonJS
// const XLSX = require('xlsx-js-style');

基础使用示例

创建带有样式的工作表：

// 创建工作簿
const wb = XLSX.utils.book_new();

// 创建数据数组
const data = [
  ["姓名", "年龄", "部门", "薪资"],
  ["张三", 28, "技术部", 15000],
  ["李四", 32, "市场部", 12000],
  ["王五", 25, "人事部", 10000]
];

// 创建工作表
const ws = XLSX.utils.aoa_to_sheet(data);

// 定义样式
const headerStyle = {
  font: { bold: true, color: { rgb: "FFFFFF" } },
  fill: { fgColor: { rgb: "4472C4" } },
  alignment: { horizontal: "center" }
};

// 应用样式到表头
for(let col = 0; col < data[0].length; col++) {
  const cellAddress = XLSX.utils.encode_cell({r: 0, c: col});
  if(!ws[cellAddress]) ws[cellAddress] = {};
  ws[cellAddress].s = headerStyle;
}

// 添加工作表到工作簿
XLSX.utils.book_append_sheet(wb, ws, "员工信息");

// 导出Excel文件
XLSX.writeFile(wb, "员工信息表.xlsx");

高级样式配置

支持丰富的样式选项：

// 单元格样式配置
const cellStyles = {
  // 字体样式
  font: {
    name: "宋体",
    sz: 12,
    bold: true,
    italic: false,
    underline: false,
    color: { rgb: "FF0000" }
  },
  
  // 填充背景色
  fill: {
    fgColor: { rgb: "FFFF00" },
    patternType: "solid"
  },
  
  // 边框样式
  border: {
    top: { style: "thin", color: { rgb: "000000" } },
    bottom: { style: "thin", color: { rgb: "000000" } },
    left: { style: "thin", color: { rgb: "000000" } },
    right: { style: "thin", color: { rgb: "000000" } }
  },
  
  // 对齐方式
  alignment: {
    horizontal: "center",
    vertical: "center",
    wrapText: true
  },
  
  // 数字格式
  numFmt: "#,##0.00"
};

数据格式处理

处理不同类型的数据：

// 日期格式处理
const dateStyle = {
  numFmt: 'yyyy-mm-dd'
};

// 货币格式
const currencyStyle = {
  numFmt: '"¥"#,##0.00'
};

// 百分比格式
const percentStyle = {
  numFmt: '0.00%'
};

常见问题及解决办法

样式不生效问题

问题描述：设置的样式在导出的Excel文件中没有显示。

解决方案：

1. 确保样式对象格式正确，所有属性都使用小写字母
2. 检查单元格引用是否正确，使用XLSX.utils.encode_cell()确保地址准确
3. 确认样式对象被正确赋值给单元格的s属性

中文乱码问题

问题描述：中文字符在Excel中显示为乱码。

解决方案：

1. 设置正确的字体名称，如："宋体"、"微软雅黑"
2. 确保数据源使用UTF-8编码
3. 在样式中明确指定中文字体

文件下载失败

问题描述：在部分浏览器中文件下载功能无法正常工作。

解决方案：

1. 检查浏览器是否支持Blob和URL.createObjectURL
2. 对于移动端浏览器，可能需要用户主动触发下载操作
3. 使用try-catch捕获可能的异常

性能优化

问题描述：处理大量数据时性能下降明显。

解决方案：

1. 分批处理数据，避免一次性操作过多单元格
2. 使用Web Worker在后台线程处理导出任务
3. 优化样式应用，避免重复设置相同样式

兼容性问题

问题描述：在不同版本的Excel中样式显示不一致。

解决方案：

1. 使用标准的Excel样式属性，避免使用过于复杂的样式组合
2. 在不同Excel版本中进行测试
3. 提供样式回退方案

内存占用过高

问题描述：导出大型Excel文件时浏览器内存占用过高。

解决方案：

1. 使用流式处理，分块生成Excel内容
2. 及时释放不再使用的对象引用
3. 考虑使用服务器端导出作为备选方案

通过合理使用xlsx-js-style，开发者可以在纯前端环境中轻松实现高质量的Excel导出功能，为用户提供更好的数据导出体验。