在 Excel 中，公式通常需要直接写入具体的单元格区域，例如 =SUM(D2:D10)。这类公式一旦增多，维护成本便随之上升：数据范围调整时，所有相关公式都需逐一修改，遗漏一处即会导致结果出错。命名区域（Named Range）正是为解决这一问题而设计——为单元格区域取一个有含义的名称，公式中直接引用该名称即可。区域与公式由此得以分离：调整范围只需修改一处，所有引用它的公式都会自动更新，既降低了出错的可能，也让公式更易阅读。Spire.XLS for JavaScript 提供完整的命名区域 API，支持在浏览器端通过 WebAssembly 创建全局（工作簿级）与局部（工作表级）命名区域，无需后端服务。
本文介绍两个核心功能点：
有关安装和项目配置，请参考 React 项目中集成 Spire.XLS for JavaScript。以下示例默认已安装 Spire.XLS 并完成 WebAssembly 模块初始化。
全局命名区域
全局命名区域保存在工作簿的名称集合 Workbook.NameRanges 中，名称在整个工作簿内唯一，任意工作表都可以直接引用它。通过 Workbook.NameRanges.Add() 方法创建，再用 RefersToRange 属性指定它指向的单元格区域。具体操作步骤如下：
- 加载包含数据的 Excel 文件，并获取第一个工作表。
- 通过
workbook.NameRanges.Add("SalesData")创建全局命名区域。 - 将
namedRange.RefersToRange设置为sheet.Range.get("A1:D10")，即区域 A1:D10。 - 读取
namedRange.Name与namedRange.RefersToRange.RangeAddress，把名称和引用地址写回单元格。 - 通过
Workbook.SaveToFile()方法保存工作簿。
下面是一个完整的代码示例，展示了在 React 中创建全局命名区域：
function App() {
const createGlobalNamedRange = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 将中文字体载入 VFS
await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
// 将 Excel 文件载入 VFS
const inputFileName = 'NamedRanges.xlsx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);
// 加载工作簿
const workbook = new xlsModule.Workbook();
workbook.LoadFromFile(inputFileName);
// 获取第一个工作表
let sheet = workbook.Worksheets.get(0);
// 创建工作簿级（全局）命名区域
let namedRange = workbook.NameRanges.Add("SalesData");
// 设置命名区域指向的单元格区域
namedRange.RefersToRange = sheet.Range.get("A1:D10");
// 读取命名区域的名称与引用地址
sheet.Range.get("F1").Text = "命名区域名称";
sheet.Range.get("F2").Text = namedRange.Name;
sheet.Range.get("G1").Text = "引用地址";
sheet.Range.get("G2").Text = namedRange.RefersToRange.RangeAddress;
// 自适应列宽
sheet.AllocatedRange.AutoFitColumns();
// 保存工作簿
const outputFileName = 'GlobalNamedRange.xlsx';
workbook.SaveToFile(outputFileName);
// 释放资源
workbook.Dispose();
// 从 VFS 读取结果文件，触发下载
const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([fileArray], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
a.click();
URL.revokeObjectURL(url);
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>创建全局命名区域</h1>
<button onClick={createGlobalNamedRange}>Start</button>
</div>
);
}
export default App;
运行后，创建全局命名区域的效果：
局部命名区域
全局命名区域要求名称在整个工作簿内唯一。如果不同工作表都需要使用一个相同的名字，却各自指向不同的数据区域，就应改用局部命名区域——通过 Worksheet.Names.Add() 添加，名称只在所属工作表内生效，同名区域可以分别存在于多个工作表中而互不影响。具体操作步骤如下：
- 加载工作簿并获取第一个工作表。
- 通过
sheet.Names.Add("SalesData")在第一个工作表上创建局部命名区域，指向A2:D10。 - 通过
workbook.Worksheets.Add()新增一个工作表，并在其上创建同名的局部命名区域，指向另一段区域。 - 分别读取两处命名区域的引用地址写回单元格。
- 保存工作簿。
下面是一个完整的代码示例，展示了在 React 中创建局部命名区域：
function App() {
const createLocalNamedRange = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 将中文字体载入 VFS
await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
// 将 Excel 文件载入 VFS
const inputFileName = 'NamedRanges.xlsx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);
// 加载工作簿
const workbook = new xlsModule.Workbook();
workbook.LoadFromFile(inputFileName);
// 获取第一个工作表
let sheet = workbook.Worksheets.get(0);
// 在第一个工作表上创建局部命名区域
let localRange = sheet.Names.Add("SalesData");
localRange.RefersToRange = sheet.Range.get("A2:D10");
// 新增一个工作表，并在其上创建同名的局部命名区域
let sheet2 = workbook.Worksheets.Add("汇总");
let localRange2 = sheet2.Names.Add("SalesData");
localRange2.RefersToRange = sheet2.Range.get("A1:B5");
// 分别读取两个工作表中同名命名区域的引用地址
sheet.Range.get("F1").Text = "工作表1 的 SalesData";
sheet.Range.get("F2").Text = localRange.RefersToRange.RangeAddress;
sheet.Range.get("G1").Text = "工作表2 的 SalesData";
sheet.Range.get("G2").Text = localRange2.RefersToRange.RangeAddress;
// 自适应列宽
sheet.AllocatedRange.AutoFitColumns();
// 保存工作簿
const outputFileName = 'LocalNamedRange.xlsx';
workbook.SaveToFile(outputFileName);
// 释放资源
workbook.Dispose();
// 从 VFS 读取结果文件，触发下载
const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([fileArray], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
a.click();
URL.revokeObjectURL(url);
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>创建局部命名区域</h1>
<button onClick={createLocalNamedRange}>Start</button>
</div>
);
}
export default App;
运行后，创建局部命名区域的效果：
常见问题
如何在公式中使用命名区域？
原因：命名区域真正的价值在于公式引用，把金额列定义为命名区域后，公式无需再写具体的区域地址，后续插入行时求和范围也会自动扩展。
解决：直接把命名区域的名称写进公式即可：
let namedRange = workbook.NameRanges.Add("SalesAmount");
namedRange.RefersToRange = sheet.Range.get("D2:D10");
// 在公式中引用命名区域
sheet.Range.get("F2").Formula = "=SUM(SalesAmount)";
如何读取工作簿中已有的命名区域？
原因：命名区域创建后会随工作簿一起保存，后续需要先把它读取出来，才能知道当前有哪些名称、各自指向哪一块区域。
解决：通过 NameRanges 集合遍历读取。先取总数，再按下标逐个读取名称与引用地址：
// 命名区域总数
let count = workbook.NameRanges.Count;
// 逐个读取名称与引用地址
for (let i = 0; i < count; i++) {
let namedRange = workbook.NameRanges.get(i);
sheet.Range.get(`F${i + 2}`).Text = namedRange.Name;
sheet.Range.get(`G${i + 2}`).Text = namedRange.RefersToRange.RangeAddress;
}
以上遍历的是工作簿级命名区域；工作表级命名区域需通过 sheet.Names 读取，用法完全相同。
获取免费许可证
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
