报表交付时经常要在两种载体之间切换：Excel 适合留档与二次编辑，HTML 适合嵌进网页、邮件或工单系统直接查看。手工另存为网页既繁琐，也难以在批量流程里串联起来。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端完成这一转换，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。
本文介绍四个核心功能点：
有关安装和项目配置，请参考 React 项目中集成 Spire.XLS for JavaScript。以下示例默认已安装 Spire.XLS 并完成 WebAssembly 模块初始化。
将工作表转换为 HTML 文件
将一张工作表导出为 HTML 后，页面中无需再嵌入任何表格控件，复制到任何位置都能直接打开。转换会将单元格的字体、字号、加粗、填充色与列宽一并写成 CSS，工作表内的图片也会一并导出，但默认不作为 HTML 的一部分，而是另存到 HTML 同级的文件夹中。具体操作步骤如下：
- 加载工作簿，通过
workbook.Worksheets.get(0)取得要导出的工作表。 - 创建
HTMLOptions对象承载导出选项，此处保留默认设置。 - 调用
sheet.SaveToHtml({ fileName, saveOption })写出 HTML 文件。 - 图片输出到同名的
<文件名>_files文件夹，HTML 中以相对路径引用，分发时需要与文件夹一并保留。 - 调用
workbook.Dispose()释放资源。
下面是一个完整的代码示例，展示了在 React 中将工作表转换为 HTML：
function App() {
const worksheetToHtml = 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 = 'ExcelToHtml.xlsx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);
// 加载工作簿
const workbook = new xlsModule.Workbook();
workbook.LoadFromFile(inputFileName);
// 获取第一张工作表
const sheet = workbook.Worksheets.get(0);
// 创建 HTML 保存选项，此处保留默认设置
const options = new xlsModule.HTMLOptions();
// 将工作表保存为 HTML 文件
const outputFileName = 'WorksheetToHtml.html';
sheet.SaveToHtml({ fileName: outputFileName, saveOption: options });
// 释放资源
workbook.Dispose();
// 从 VFS 读取结果文件，触发下载
const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([fileArray], { type: "text/html" });
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>将工作表转换为 HTML</h1>
<button onClick={worksheetToHtml}>Start</button>
</div>
);
}
export default App;
运行后，将工作表转换为 HTML 的效果：
将图片内嵌为 Base64，生成单个 HTML 文件
上一步得到的是 HTML 文件与同名文件夹的组合，两者必须一并分发；若通过邮件或接口只传递 HTML 文件，图片便会失效。HTMLOptions.ImageEmbedded 让工作表中的图片以 Base64 数据 URI 直接写进 HTML，导出的结果是一个自包含文件，放置在任意位置都能完整显示，代价是文件体积随图片增大。具体操作步骤如下：
- 加载工作簿并取得要导出的工作表。
- 创建
HTMLOptions对象。 - 将
options.ImageEmbedded设为true。 - 调用
sheet.SaveToHtml({ fileName, saveOption })写出 HTML 文件，此时不会再生成同名文件夹。 - 调用
workbook.Dispose()释放资源。
下面是一个完整的代码示例，展示了在 React 中生成图片内嵌的单个 HTML 文件：
function App() {
const embeddedImages = 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 = 'ExcelToHtml.xlsx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);
// 加载工作簿
const workbook = new xlsModule.Workbook();
workbook.LoadFromFile(inputFileName);
// 获取第一张工作表
const sheet = workbook.Worksheets.get(0);
// 创建 HTML 保存选项
const options = new xlsModule.HTMLOptions();
// 将图片以 Base64 内嵌到 HTML 中
options.ImageEmbedded = true;
// 将工作表保存为单个自包含的 HTML 文件
const outputFileName = 'EmbeddedImages.html';
sheet.SaveToHtml({ fileName: outputFileName, saveOption: options });
// 释放资源
workbook.Dispose();
// 从 VFS 读取结果文件，触发下载
const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([fileArray], { type: "text/html" });
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>生成内嵌图片的 HTML</h1>
<button onClick={embeddedImages}>Start</button>
</div>
);
}
export default App;
运行后，将图片内嵌为 Base64 的效果：
将整个工作簿转换为 HTML
一份报表往往不止一张工作表，逐张取出再分别导出较为繁琐。workbook.SaveToHtml({ fileName }) 一次把工作簿中的每张工作表各写成一个 HTML 页面，并额外生成一个入口文件与底部的工作表标签栏，打开入口文件即可在各页面之间切换。具体操作步骤如下：
- 加载工作簿。
- 调用
workbook.SaveToHtml({ fileName })转换工作簿中的全部工作表。 - 入口 HTML 是一个 frameset，通过相对路径引用同名文件夹中的各工作表页面与
tabs.html。 - 调用
workbook.Dispose()释放资源。
下面是一个完整的代码示例，展示了在 React 中将整个工作簿转换为 HTML：
function App() {
const workbookToHtml = 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 = 'ExcelToHtml.xlsx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);
// 加载工作簿
const workbook = new xlsModule.Workbook();
workbook.LoadFromFile(inputFileName);
// 将工作簿中所有工作表一次性转换为 HTML
const outputFileName = 'WorkbookToHtml.html';
workbook.SaveToHtml({ fileName: outputFileName });
// 释放资源
workbook.Dispose();
// 从 VFS 读取入口文件，触发下载
const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([fileArray], { type: "text/html" });
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>将整个工作簿转换为 HTML</h1>
<button onClick={workbookToHtml}>Start</button>
</div>
);
}
export default App;
运行后，将整个工作簿转换为 HTML 的效果：
将 HTML 中的表格转换为 Excel
反向的场景同样常见：从网页抓取或由系统导出的 HTML 表格需要交付为 Excel 文件，供其他同事继续编辑。workbook.LoadFromHtml({ fileName }) 会把 HTML 中的表格还原成工作表，表头落在第一行，数字保持数值型而不是文本；表格以外的段落类内容则会依次落到同一列中。具体操作步骤如下：
- 创建空白工作簿。
- 调用
workbook.LoadFromHtml({ fileName })载入 HTML，其中的表格成为第一张工作表。 - 调用
workbook.SaveToFile({ fileName, version })保存为 Excel 文件，保存时通过ExcelVersion指定文件版本。 - 调用
workbook.Dispose()释放资源。
下面是一个完整的代码示例，展示了在 React 中将 HTML 中的表格转换为 Excel：
function App() {
const htmlToWorksheet = 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/`);
// 将 HTML 文件载入 VFS
const inputFileName = 'HtmlToExcel.html';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);
// 创建空白工作簿
const workbook = new xlsModule.Workbook();
// 将 HTML 中的表格载入为工作表
workbook.LoadFromHtml({ fileName: inputFileName });
// 保存为 Excel 文件
const outputFileName = 'HtmlToWorksheet.xlsx';
workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.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>将 HTML 转换为 Excel</h1>
<button onClick={htmlToWorksheet}>Start</button>
</div>
);
}
export default App;
运行后，将 HTML 转换为 Excel 的效果：
常见问题
单元格的边框、填充色、合并单元格与超链接会保留吗
原因：会保留。转换时这些格式都有对应的写法。用文本编辑器打开时，这些内容藏在 CSS 与标签属性里，不像 Excel 那样直观，容易被误认为没有导出。
解决：用浏览器打开生成的 HTML 即可看到格式完整，需要调整外观时直接修改 <head> 中生成的 CSS 规则。图片是唯一的例外，它默认不在 HTML 内部，处理方式见下一条。
为什么生成的 HTML 中图片显示不出来
原因：默认情况下图片不写入 HTML 本身，而是输出到同名的 _files 文件夹中，HTML 通过相对路径引用。只保存或只发送 HTML 文件时，相对路径失效。
解决：设置 options.ImageEmbedded = true，将图片以 Base64 直接内嵌进 HTML：
const options = new xlsModule.HTMLOptions();
options.ImageEmbedded = true;
sheet.SaveToHtml({ fileName: outputFileName, saveOption: options });
获取免费许可证
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
