在 Excel 里维护商品清单、订单明细这类表格时，一个单元格常常需要承载不止一种格式：说明文字要分成几行，促销语里只有几个字要加粗，库存提示则要用红色标出来。手工做法是双击单元格、选中片段、逐个调整字体，条目一多就很难批量完成。HTML 字符串恰好适合描述这类「一段文字里各部分样式不同」的内容，Spire.XLS for JavaScript 提供了 HtmlString 属性，把一段 HTML 直接写进单元格，换行、加粗、倾斜、下划线、颜色和字号都按标签渲染，批量处理只是循环里的一行赋值。它基于 WebAssembly 在浏览器端直接完成，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。
本文介绍两个核心功能点：
有关安装和项目配置，请参考 React 项目中集成 Spire.XLS for JavaScript。以下示例默认已安装 Spire.XLS 并完成 WebAssembly 模块初始化。
在单元格中写入带换行的 HTML 文本
在单元格里换行，通常要在编辑状态下按 Alt+Enter 手动插入。数据来自数据库或表单时，这类手工操作无法批量完成，而 HTML 里的 <br> 标签表达的正是「在此处断行」。HtmlString 会把 <br>、<div>、<p> 都解析成单元格内的换行符，一个字符串写进去就是一格多行。具体操作步骤如下：
- 将字体载入 VFS。
- 新建工作簿并取第一个工作表，把 A 列拉宽一些。
- 逐条拼出用
<br>分段的 HTML 字符串。 - 用
HtmlString把它们逐个写进 A 列的单元格。 - 保存工作簿。
以下为完整的代码示例，演示如何在 React 中向 Excel 单元格写入带换行的 HTML 文本：
function App() {
const setMultilineText = 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/`);
// 新建工作簿并取第一个工作表，拉宽 A 列免得一段文字被折成好几段
const workbook = new xlsModule.Workbook();
const sheet = workbook.Worksheets.get(0);
sheet.Range.get('A1:A5').ColumnWidth = 30;
// 每行的说明由三段文字组成，用 <br> 在同一个单元格里换行
const notes = [
'蓝牙 5.3 双设备连接<br>续航 30 小时<br>Type-C 快充',
'静音微动按键<br>内置 800 mAh 电池<br>支持 2.4G 无线',
'双麦克风降噪<br>单次续航 6 小时<br>磁吸充电盒',
'1080P 高清分辨率<br>重量 780 克<br>Type-C 一线连',
'木质箱体<br>蓝牙 5.0 连接<br>附赠遥控器',
];
// 把 HTML 字符串逐格写进 A 列，一个单元格里显示三行
notes.forEach((html, index) => {
sheet.Range.get(`A${index + 1}`).HtmlString = html;
});
// 保存工作簿
const outputFileName = 'MultilineHtmlText.xlsx';
workbook.SaveToFile({ fileName: 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>Excel HTML 富文本</h1>
<button onClick={setMultilineText}>多行 HTML 文本</button>
</div>
);
}
export default App;
运行后，在单元格中写入带换行的 HTML 文本的效果：
为单元格中的部分文字设置格式
同一个单元格里的文字不必格式一致。同一段内容中，往往只有其中一部分需要突出显示，其余部分保持普通字重即可。HtmlString 支持 <b>、<i>、<u> 等标签，把颜色和字号写在 style 里交给 <span> 承载，被标签包住的片段会各自成为独立的一段格式，互不影响，标签本身不会出现在单元格里。具体操作步骤如下：
- 与上一步相同，先把中文字体载入 VFS，再新建工作簿、取第一个工作表并把 A 列拉宽。
- 在 HTML 字符串中用
<b>、<i>、<u>标出需要强调的文字，用<span style="color:#C00000;font-size:14pt">包住需要突出的文字，颜色写十六进制色值，字号按磅值给出。 - 把字符串逐格写进 A 列，同一格里剩下的文字保持原有格式。
- 保存工作簿。
以下为完整的代码示例，演示如何在 React 中为 Excel 单元格的部分文字设置格式：
function App() {
const setPartialFormatting = 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/`);
// 新建工作簿并取第一个工作表，拉宽 A 列免得一段文字被折成好几段
const workbook = new xlsModule.Workbook();
const sheet = workbook.Worksheets.get(0);
sheet.Range.get('A1:A5').ColumnWidth = 30;
// 一段促销语里的各段内容分别套上 <b>、<i>、<u> 和带样式的 <span>，
// 加粗、倾斜、下划线、颜色和字号都只作用于被标签包住的那段文字
const promotions = [
'<b>满 300 减 50</b>，<i>限时三天</i>，<u>每人限购两件</u>，<span style="color:#C00000;font-size:14pt">仅剩 3 件</span>',
'<b>第二件半价</b>，<i>仅限本周</i>，<u>不与其他优惠叠加</u>',
'<b>下单立减 100</b>，<i>今日 24 点结束</i>，<u>赠收纳包</u>，<span style="color:#C00000;font-size:14pt">库存紧张</span>',
'<b>以旧换新补贴 200</b>，<i>活动至月底</i>，<u>需出示旧机</u>',
'<b>买一赠一</b>，<i>限量 500 套</i>，<u>赠品随机发放</u>，<span style="color:#E36C0A;font-size:14pt">补货中</span>',
];
// 把 HTML 字符串逐格写进 A 列
promotions.forEach((html, index) => {
sheet.Range.get(`A${index + 1}`).HtmlString = html;
});
// 保存工作簿
const outputFileName = 'PartialFormattingHtml.xlsx';
workbook.SaveToFile({ fileName: 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>Excel HTML 富文本</h1>
<button onClick={setPartialFormatting}>部分文字格式</button>
</div>
);
}
export default App;
运行后，为单元格中的部分文字设置加粗、倾斜、下划线、颜色与字号的效果：
常见问题
HTML 里的连续空格会被吞掉吗
原因：浏览器解析 HTML 时会把连续空格合并成一个，容易让人以为 Spire 也这么做，于是改用 逐个拼空格。
解决：不会被吞。A B 写进单元格后读回来仍是 5 个空格，行首的多个空格也原样保留； 同样有效，但一般的对齐场景不需要替换。
写入富文本后，单元格原来的对齐方式还在吗
原因：HtmlString 会改动单元格的字体属性，于是担心它把先前设好的对齐方式一并重置掉。
解决：对齐方式不受影响。先设置 Style.HorizontalAlignment 再写 HtmlString，读回来仍是原来的对齐值，先设格式再填内容可以放心。
const cell = sheet.Range.get('A1');
cell.Style.HorizontalAlignment = xlsModule.HorizontalAlignType.Center;
cell.HtmlString = '<b>居中</b>';
获取免费许可证
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
