【亲测免费】 xlsx-js-style 项目教程

2026-01-15 16:48:10作者：宣海椒Queenly

1. 项目介绍

xlsx-js-style 是一个基于 SheetJS 社区版的扩展项目，旨在通过 JavaScript 创建带有基本样式选项的 Excel 电子表格。该项目允许用户在生成 Excel 文件时，为单元格添加字体、边框、填充、对齐等样式，从而使生成的 Excel 文件更加美观和易读。

2. 项目快速启动

安装

你可以通过 npm 或直接在浏览器中使用 <script> 标签来安装和使用 xlsx-js-style。

通过 npm 安装

npm install xlsx-js-style

在浏览器中使用

<script src="dist/xlsx.bundle.js"></script>

核心 API

xlsx-js-style 的核心 API 与 SheetJS 的 API 基本一致，但增加了样式相关的功能。以下是一个简单的示例，展示如何创建一个带有样式的 Excel 文件。

// 步骤 1: 创建一个新的工作簿
const wb = XLSX.utils.book_new();

// 步骤 2: 创建数据行和样式
let row = [
  { v: "Courier: 24", t: "s", s: { font: { name: "Courier", sz: 24 } } },
  { v: "bold & color", t: "s", s: { font: { bold: true, color: { rgb: "FF0000" } } } },
  { v: "fill: color", t: "s", s: { fill: { fgColor: { rgb: "E9E9E9" } } } },
  { v: "line\nbreak", t: "s", s: { alignment: { wrapText: true } } }
];

// 步骤 3: 创建工作表并添加到工作簿
const ws = XLSX.utils.aoa_to_sheet([row]);
XLSX.utils.book_append_sheet(wb, ws, "readme demo");

// 步骤 4: 将 Excel 文件写入浏览器
XLSX.writeFile(wb, "xlsx-js-style-demo.xlsx");

样式 API

xlsx-js-style 支持多种样式属性，包括对齐、边框、填充、字体等。以下是一些常用的样式属性示例：

// 字体样式
const fontStyle = {
  font: {
    name: "Arial",
    sz: 14,
    bold: true,
    color: { rgb: "0000FF" }
  }
};

// 填充样式
const fillStyle = {
  fill: {
    patternType: "solid",
    fgColor: { rgb: "FFFF00" }
  }
};

// 边框样式
const borderStyle = {
  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" } }
  }
};

// 对齐样式
const alignmentStyle = {
  alignment: {
    horizontal: "center",
    vertical: "center",
    wrapText: true
  }
};

3. 应用案例和最佳实践

应用案例

生成带有公司 Logo 和样式的报告

在生成公司内部报告时，可以使用 xlsx-js-style 为报告添加公司 Logo、标题样式、表格边框等，使报告更加专业和美观。

const wb = XLSX.utils.book_new();
const ws = XLSX.utils.aoa_to_sheet([
  [{ v: "公司报告", t: "s", s: { font: { name: "Arial", sz: 20, bold: true } } }]
]);
XLSX.utils.book_append_sheet(wb, ws, "报告");
XLSX.writeFile(wb, "公司报告.xlsx");

生成带有数据验证的 Excel 表格

在生成需要用户输入的 Excel 表格时，可以使用 xlsx-js-style 为单元格添加数据验证规则，并设置相应的样式提示用户。

const ws = XLSX.utils.aoa_to_sheet([
  [{ v: "请输入数字", t: "s", s: { alignment: { horizontal: "center" } } }]
]);
ws["!dataValidations"] = [
  {
    sqref: "A1",
    type: "decimal",
    operator: "between",
    formula1: "0",
    formula2: "100",
    showErrorMessage: true,
    errorTitle: "输入错误",
    error: "请输入0到100之间的数字"
  }
];