一张表格要在几秒钟内被读懂，靠的不只是数字，还有字体：标题要够大够醒目，要强调的数值要一眼找到，作废的条目要一眼看出。这些差异在 Excel 里全部由单元格自己的字体对象承载——字体名称、字号、颜色、加粗、斜体、下划线、删除线，改哪一格就只影响哪一格。同一个单元格内部也能并存好几套字体，把其中一个词换成另一种颜色或字号，重点便从整句里跳了出来。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端直接完成上述操作，通过虚拟文件系统（VFS）管理输出文件，无需后端服务支持。
本文介绍两个核心功能点：
有关安装和项目配置，请参考 React 项目中集成 Spire.XLS for JavaScript。以下示例默认已安装 Spire.XLS 并完成 WebAssembly 模块初始化。
设置单元格的字体格式
每个单元格都带有一个自己的字体对象，字体名称、字号、颜色、加粗、斜体、下划线、删除线这七个属性都挂在这个对象上。要看清每一类属性各自的效果，可以另起一张工作表，逐行写出属性的名称与示例文字，再对示例所在的那一格点一次对应的属性——改哪一格就只影响哪一格，左侧的说明文字始终保持原样。具体操作步骤如下：
- 用
window.spire.FetchFileToVFS把字体文件载入 VFS。 - 用
new Workbook()新建工作簿，并用workbook.Worksheets.get(0)取得第一张工作表。 - 用
sheet.Range.get逐项写出属性的名称与示例文字，A 列写名称、B 列写示例，行号从 1 开始、每项隔一行。 - 用
Range.Style.Font上的FontName、Size、Color、IsBold、IsItalic、Underline与IsStrikethrough，依次为各行的示例文字设置对应格式；字体颜色取xlsModule.Color.get_Red()，下划线取xlsModule.FontUnderlineType.Single。 - 用
sheet.Columns.get(0).ColumnWidth与sheet.Columns.get(1).ColumnWidth把两列的列宽都设为 25。 - 用
workbook.SaveToFile保存工作簿，再用workbook.Dispose释放 workbook 对象以释放资源。
以下为完整的代码示例，演示如何在 React 中为单元格设置字体格式：
function App() {
const setCellFont = 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/`);
// 新建工作簿，取第一张工作表
const workbook = new xlsModule.Workbook();
const sheet = workbook.Worksheets.get(0);
// 设置字体名称
let row = 1;
sheet.Range.get(`A${row}`).Value = '字体名称';
sheet.Range.get(`B${row}`).Value = '宋体';
sheet.Range.get(`B${row}`).Style.Font.FontName = '宋体';
// 设置字体大小
row += 2;
sheet.Range.get(`A${row}`).Value = '字体大小';
sheet.Range.get(`B${row}`).Value = '15';
sheet.Range.get(`B${row}`).Style.Font.Size = 15;
// 设置字体颜色
row += 2;
sheet.Range.get(`A${row}`).Value = '字体颜色';
sheet.Range.get(`B${row}`).Value = '红色';
sheet.Range.get(`B${row}`).Style.Font.Color = xlsModule.Color.get_Red();
// 设置文本加粗
row += 2;
sheet.Range.get(`A${row}`).Value = '加粗';
sheet.Range.get(`B${row}`).Value = '加粗';
sheet.Range.get(`B${row}`).Style.Font.IsBold = true;
// 设置文本斜体
row += 2;
sheet.Range.get(`A${row}`).Value = '斜体';
sheet.Range.get(`B${row}`).Value = '斜体';
sheet.Range.get(`B${row}`).Style.Font.IsItalic = true;
// 下划线文本
row += 2;
sheet.Range.get(`A${row}`).Value = '下划线';
sheet.Range.get(`B${row}`).Value = '下划线';
sheet.Range.get(`B${row}`).Style.Font.Underline = xlsModule.FontUnderlineType.Single;
// 删除线文本
row += 2;
sheet.Range.get(`A${row}`).Value = '删除线';
sheet.Range.get(`B${row}`).Value = '删除线';
sheet.Range.get(`B${row}`).Style.Font.IsStrikethrough = true;
// 设置列宽
sheet.Columns.get(0).ColumnWidth = 25;
sheet.Columns.get(1).ColumnWidth = 25;
// 将工作簿保存为 Excel 文件
const outputFileName = 'CellFont.xlsx';
workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2016 });
// 释放 workbook 对象以释放资源
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 id="cell-font" onClick={setCellFont}>为单元格设置字体格式</button>
</div>
);
}
export default App;
运行后，为单元格设置字体格式的效果：
在单个单元格内混排多种字体
单元格的富文本对象允许把一段文字按字符位置切开，各段分别套上不同的字体，读起来仍是一句完整的话。做法是先创建几套字体对象，再用 SetFont 按字符区间逐段分配——每调用一次覆盖一段，所以整句的每一段都要点到；区间从 0 开始计数、两端都包含在内。具体操作步骤如下：
- 用
window.spire.FetchFileToVFS把字体文件载入 VFS。 - 用
new Workbook()新建工作簿，并用workbook.Worksheets.get(0)取得第一张工作表。 - 用
workbook.CreateFont()创建两套字体：一套供整句使用，另一套用IsBold与KnownColor强调句中的重点。 - 用
sheet.Range.get('A1')取得承载整句文字的单元格，取其富文本对象并通过RichText.Text写入整句文字。 - 用
note.indexOf(key)与key.length算出需要调整的文本在整句中的起止位置，再用RichText.SetFont依次把重点之前、重点本身与重点之后三段套上对应的字体。 - 用
workbook.SaveToFile保存工作簿，再用workbook.Dispose释放 workbook 对象以释放资源。
以下为完整的代码示例，演示如何在 React 中为一个单元格内的部分文字设置不同的字体格式：
function App() {
const setRichTextFonts = 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/`);
// 新建工作簿，取第一张工作表
const workbook = new xlsModule.Workbook();
const sheet = workbook.Worksheets.get(0);
// 创建第一套字体，用于整句文字
const font1 = workbook.CreateFont();
font1.FontName = '宋体';
font1.Size = 12;
// 创建第二套字体，用于句子中的重点
const font2 = workbook.CreateFont();
font2.FontName = '宋体';
font2.Size = 14;
font2.IsBold = true;
font2.KnownColor = xlsModule.ExcelColors.Red;
// 取得单元格的富文本对象并写入整句文字
const note = '本报价单有效期为 30 天，如需延长请联系销售代表。';
const key = '30 天';
const richText = sheet.Range.get('A1').RichText;
richText.Text = note;
// 定位重点所在的字符区间
const start = note.indexOf(key);
const end = start + key.length - 1;
// 重点之前的一段用第一套字体
richText.SetFont(0, start - 1, font1);
// 重点本身用第二套字体
richText.SetFont(start, end, font2);
// 重点之后的一段仍用第一套字体
richText.SetFont(end + 1, note.length - 1, font1);
// 将工作簿保存为 Excel 文件
const outputFileName = 'RichTextFont.xlsx';
workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2016 });
// 释放 workbook 对象以释放资源
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 id="rich-text-fonts" onClick={setRichTextFonts}>为部分文字设置不同字体</button>
</div>
);
}
export default App;
运行后，在单个单元格内混排多种字体的效果：
常见问题
SetFont 的结束位置应该写多少
原因：SetFont 的两个位置参数都从 0 开始计数，并且包含结束位置本身，按字符串长度直接填写会多出一位，落到字符之外。
解决：结束位置写「长度减一」。若要覆盖整段文字，用整句长度减一：
richText.SetFont(0, note.length - 1, font1);
获取免费许可证
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
