在 Web 应用中，将 Excel 文件以流（Stream）的形式进行操作，开发者可以动态地创建、加载、修改和保存 Excel 文件，从而实现灵活高效的数据处理。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端直接完成 Excel 文件的流式读写，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。它提供了简单易用的 Stream API，让通过流创建和保存 Excel 文件变得更加便捷。
通过流操作，可以在很大程度上减少直接的磁盘 I/O 操作，不仅提升应用的性能，还增强了响应能力，尤其适用于实时数据处理或存储受限的场景。借助 Spire.XLS for JavaScript，您可以在浏览器中动态创建 Excel 文件并保存到流，从流中加载并读取工作簿数据，或在流中修改内容后保存为新的 Excel 文件，从而简化数据交换和系统集成。
本文介绍三个核心功能点：
有关安装和项目配置，请参考 React 项目中集成 Spire.XLS for JavaScript。以下示例默认已安装 Spire.XLS 并完成 WebAssembly 模块初始化。
动态创建 Excel 文件并保存到流
利用 Spire.XLS for JavaScript，您可以在浏览器中动态创建 Excel 文件，填充数据并设置格式后，通过 SaveToStream() 方法将工作簿保存到文件流。这种方法可以省去直接对磁盘进行文件存储的需求，同时提升应用的性能和响应速度。具体操作步骤如下：
- 创建
Workbook 实例以生成新的 Excel 工作簿，清除默认工作表并添加新工作表。
- 使用
Worksheets.get() 方法访问特定的工作表。
- 定义要写入工作表的数据，例如使用二维数组组织数据。
- 通过
Range.get_Item() 方法获取单元格并逐一设置值。
- 对工作表单元格进行格式化，例如设置颜色、字体、边框，或调整列宽。
- 创建
Stream 对象，使用 SaveToStream() 方法将工作簿保存到文件流。保存后的流可直接用于进一步处理，例如下载为文件或通过网络进行传输。
下面是一个完整的代码示例，展示了在 React 中动态创建 Excel 文件并保存到流：
function App() {
const createAndSaveToStream = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 加载字体文件以确保文本正确渲染
await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}font/`);
// 创建新的工作簿实例
const workbook = new xlsModule.Workbook();
// 清除默认工作表并添加新工作表
workbook.Worksheets.Clear();
const sheet = workbook.Worksheets.Add('Data');
// 定义要写入工作表的示例数据（二维数组）
const headers = ['编号', '姓名', '年龄', '国家', '工资 (¥)'];
const data = [
[1, '张伟', 29, '中国', 8000],
[2, '李娜', 35, '中国', 12000],
[3, '王强', 42, '中国', 15000],
[4, '杰克', 26, '美国', 9500],
[5, '陈思', 31, '中国', 11000],
[6, '石原安子', 28, '日本', 8800]
];
// 将表头写入第一行
for (let col = 0; col < headers.length; col++) {
sheet.Range.get_Item({ row: 1, column: col + 1 }).Text = headers[col];
}
// 将数据写入后续行
for (let row = 0; row < data.length; row++) {
for (let col = 0; col < data[row].length; col++) {
sheet.Range.get_Item({ row: row + 2, column: col + 1 }).Text = String(data[row][col]);
}
}
// 格式化表头行
sheet.Range.get('A1:E1').Style.Color = xlsModule.Color.get_LightSkyBlue();
sheet.Range.get('A1:E1').Style.Font.FontName = 'Arial';
sheet.Range.get('A1:E1').Style.Font.Size = 12;
sheet.Range.get('A1:E1').Style.Font.IsBold = true;
// 格式化数据行
for (let i = 2; i <= data.length + 1; i++) {
const dataRange = sheet.Range.get({
row: i, column: 1,
lastRow: i, lastColumn: headers.length
});
dataRange.Style.Color = xlsModule.Color.get_LightGray();
dataRange.Style.Font.FontName = 'Arial';
dataRange.Style.Font.Size = 11;
}
// 为表头和所有数据单元格添加边框
const usedRange = sheet.Range.get({
row: 1, column: 1,
lastRow: data.length + 1,
lastColumn: headers.length
});
usedRange.Borders.LineStyle = xlsModule.LineStyleType.Thin;
usedRange.Borders.Color = xlsModule.Color.get_LightSteelBlue();
// 调整列宽以适应内容
for (let col = 1; col <= headers.length; col++) {
sheet.AutoFitColumn(col);
}
// 创建流并将工作簿保存到流
const outputFileName = 'CreateExcelToStream.xlsx';
const fileStream = new xlsModule.Stream(outputFileName);
workbook.SaveToStream(fileStream, xlsModule.FileFormat.Version2010);
// 释放工作簿对象以释放资源
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>动态创建 Excel 并保存到流</h1>
<button onClick={createAndSaveToStream}>
生成
</button>
</div>
);
}
export default App;
使用 Spire.XLS for JavaScript 动态创建 Excel 文件并保存到流
从流中加载并读取 Excel 文件
通过 Spire.XLS for JavaScript，您可以使用 LoadFromStream() 方法直接从流中加载 Excel 文件。加载完成后，可以轻松读取流中 Excel 文件的单元格数据，实现快速灵活的数据处理，而无需进行文件 I/O 操作。具体操作步骤如下：
- 创建指向待加载 Excel 文件的
Stream 对象。
- 创建
Workbook 对象，调用 LoadFromStream() 方法从流中加载文件。
- 使用
Worksheets.get() 方法获取第一个工作表。
- 遍历工作表的行和列，通过
Range.get() 方法提取单元格数据。
- 将提取的数据显示在页面上，或用于其他操作。
下面是一个完整的代码示例，展示了在 React 中从流中加载并读取 Excel 文件：
import React, { useState } from 'react';
function App() {
const [extractedData, setExtractedData] = useState('');
const loadAndReadFromStream = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 加载字体文件以确保文本正确渲染
await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}font/`);
// 将示例 Excel 文件加载到 VFS
await window.spire.FetchFileToVFS('Sample.xlsx', '', `${process.env.PUBLIC_URL}data/`);
// 创建工作簿对象并从流中加载 Excel 文件
const workbook = new xlsModule.Workbook();
const fileStream = new xlsModule.Stream('Sample.xlsx');
workbook.LoadFromStream(fileStream, xlsModule.FileFormat.Auto);
// 获取工作簿中的第一个工作表
const sheet = workbook.Worksheets.get(0);
// 遍历工作表的行和列，提取单元格数据
const data = [];
for (let row = sheet.FirstRow; row <= sheet.LastRow; row++) {
const line = [];
for (let col = sheet.FirstColumn; col <= sheet.LastColumn; col++) {
line.push(sheet.Range.get({ row: row, column: col }).Text);
}
data.push(line.join(' | '));
}
// 释放工作簿对象以释放资源
workbook.Dispose();
// 在页面上显示提取的数据
setExtractedData(data.join('\n'));
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>从流中加载并读取 Excel 数据</h1>
<button onClick={loadAndReadFromStream}>
读取
</button>
<pre style={{ marginTop: '20px', textAlign: 'left' }}>{extractedData}</pre>
</div>
);
}
export default App;
使用 Spire.XLS for JavaScript 从流中加载并读取 Excel 文件
在流中修改并保存 Excel 文件
借助 Spire.XLS for JavaScript，您可以在内存中修改 Excel 文件。首先通过 LoadFromStream() 方法将流中的 Excel 文件加载到 Workbook 对象中，完成修改（例如更改单元格样式或内容）后，再使用 SaveToStream() 方法将文件保存回流。无需依赖直接的文件存储操作即可实现实时的 Excel 文件数据更改。具体操作步骤如下：
- 创建指向 Excel 文件的
Stream 对象，并通过 LoadFromStream() 方法从流中加载文件。
- 使用
Worksheets.get() 方法访问工作表。
- 修改表头行及数据行的样式（字体、字号、背景色等），通过
CellRange.Style 属性完成。
- 使用
AutoFitColumn() 方法自动调整列宽以适应内容。
- 设置单元格的边框样式。
- 创建新的
Stream 对象，使用 SaveToStream() 方法将修改后的工作簿保存到流，并从 VFS 读取结果文件触发下载。
下面是一个完整的代码示例，展示了在 React 中修改流中的 Excel 文件并保存：
function App() {
const modifyAndSaveInStream = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 加载字体文件以确保文本正确渲染
await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}font/`);
// 将示例 Excel 文件加载到 VFS
await window.spire.FetchFileToVFS('Sample.xlsx', '', `${process.env.PUBLIC_URL}data/`);
// 创建工作簿对象并从流中加载 Excel 文件
const workbook = new xlsModule.Workbook();
const fileStream = new xlsModule.Stream('Sample.xlsx');
workbook.LoadFromStream(fileStream, xlsModule.FileFormat.Auto);
// 获取工作簿中的第一个工作表
const sheet = workbook.Worksheets.get(0);
// 修改表头行的样式
const headerRow = sheet.Range.get({
row: sheet.FirstRow, column: sheet.FirstColumn,
lastRow: sheet.FirstRow, lastColumn: sheet.LastColumn
});
headerRow.Style.Font.FontName = 'Arial';
headerRow.Style.Font.Size = 12;
headerRow.Style.Font.IsBold = true;
headerRow.Style.Color = xlsModule.Color.get_LightSkyBlue();
// 修改数据行的样式，并交替着色（偶数行）
for (let i = sheet.FirstRow + 1; i <= sheet.LastRow; i++) {
const dataRow = sheet.Range.get({
row: i, column: sheet.FirstColumn,
lastRow: i, lastColumn: sheet.LastColumn
});
dataRow.Style.Font.FontName = 'Arial';
dataRow.Style.Font.Size = 10;
dataRow.Style.Color = xlsModule.Color.get_LightGray();
if (i % 2 === 0) {
dataRow.Style.Color = xlsModule.Color.get_DarkGray();
}
}
// 自动调整列宽以适应内容
for (let col = sheet.FirstColumn; col <= sheet.LastColumn; col++) {
sheet.AutoFitColumn(col);
}
// 设置边框颜色
sheet.AllocatedRange.Borders.Color = xlsModule.Color.get_White();
// 将修改后的工作簿保存到新的流
const outputFileName = 'ModifyExcelInStream.xlsx';
const outStream = new xlsModule.Stream(outputFileName);
workbook.SaveToStream(outStream, xlsModule.FileFormat.Version2010);
// 释放工作簿对象以释放资源
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>在流中修改并保存 Excel</h1>
<button onClick={modifyAndSaveInStream}>
生成
</button>
</div>
);
}
export default App;
使用 Spire.XLS for JavaScript 在流中修改并保存 Excel 文件
常见问题
为什么保存到流的文件无法在 Excel 中正常打开？
原因：使用 SaveToStream() 方法保存工作簿时，若未通过 FileFormat 参数指定正确的输出文件格式，生成的文件格式可能与扩展名不匹配，导致无法正常打开。
解决方案：保存到流时指定具体的文件格式枚举值，例如 xlsModule.FileFormat.Version2010：
const fileStream = new xlsModule.Stream(outputFileName);
workbook.SaveToStream(fileStream, xlsModule.FileFormat.Version2010);
如何确保从流加载的工作簿能够正确识别文件格式？
原因：LoadFromStream() 方法需要根据流中数据的实际格式来识别文件类型，若格式参数设置不正确，可能导致加载失败或数据解析错误。
解决方案：加载时使用 xlsModule.FileFormat.Auto，让库自动检测流中文件的格式：
const fileStream = new xlsModule.Stream('Sample.xlsx');
workbook.LoadFromStream(fileStream, xlsModule.FileFormat.Auto);
获取免费许可证
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
提取并导出的Excel
原系统交易PDF
Excel AI对账后的对账明细
原系统交易PDF
Excel AI对账后的对账明细
