默认情况下，Excel 会在每一页的顶部和底部显示相同的页眉和页脚。但在打印正式报表、手册或论文时，常常需要让不同的页面显示不同的页眉页脚——例如奇数页和偶数页使用不同的页眉，或者首页不显示页眉页脚、只让正文页显示页码。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端直接完成此操作，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。
本文介绍两个核心功能点：
有关安装和项目配置，请参考 React 项目中集成 Spire.XLS for JavaScript。以下示例默认已安装 Spire.XLS 并完成 WebAssembly 模块初始化。
为奇偶页设置不同的页眉页脚
在书籍、论文或双面打印的报表中，奇数页和偶数页通常使用不同的页眉页脚，例如奇数页页眉显示章节名，偶数页页眉显示书名。使用 Spire.XLS for JavaScript 为奇偶页设置不同的页眉页脚，具体操作步骤如下：
- 创建
Workbook对象，并使用LoadFromFile()方法载入 Excel 文件。 - 通过
Workbook.Worksheets.get()方法获取指定工作表。 - 将
PageSetup.DifferentOddEven属性设置为1，开启奇偶页页眉页脚不同。 - 使用
PageSetup.OddHeaderString和PageSetup.OddFooterString属性设置奇数页的页眉和页脚。 - 使用
PageSetup.EvenHeaderString和PageSetup.EvenFooterString属性设置偶数页的页眉和页脚。 - 通过
Workbook.SaveToFile()方法保存工作簿。
下面是一个完整的代码示例，展示了在 React 中为工作表奇偶页设置不同的页眉页脚（示例输入文件包含跨越多页的数据，便于观察不同页的效果）：
function App() {
const setOddEvenHeaderFooter = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 将字体和 Excel 文件载入 VFS
await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
const inputFileName = 'DifferentHeaderFooter.xlsx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);
// 加载工作簿
const workbook = new xlsModule.Workbook();
workbook.LoadFromFile({ fileName: inputFileName });
// 获取第一个工作表
const sheet = workbook.Worksheets.get(0);
// 开启奇偶页页眉页脚不同
sheet.PageSetup.DifferentOddEven = 1;
// 设置奇数页的页眉和页脚（橙色、加粗）
sheet.PageSetup.OddHeaderString = "&\"宋体\"&12&B&KFFC000奇数页页眉";
sheet.PageSetup.OddFooterString = "&\"宋体\"&12&B&KFFC000奇数页页脚";
// 设置偶数页的页眉和页脚（红色、加粗）
sheet.PageSetup.EvenHeaderString = "&\"宋体\"&12&B&KFF0000偶数页页眉";
sheet.PageSetup.EvenFooterString = "&\"宋体\"&12&B&KFF0000偶数页页脚";
// 切换为页面布局视图，便于预览页眉页脚
sheet.ViewMode = xlsModule.ViewMode.Layout;
// 保存文档
const outputFileName = 'DifferentHeaderFooterOddEven_output.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>Set Different Header and Footer for Odd and Even Pages</h1>
<button onClick={setOddEvenHeaderFooter}>
Start
</button>
</div>
);
}
export default App;
设置完成后，即可实现为奇偶页设置不同页眉页脚的效果。
为首页设置与其他页不同的页眉页脚
很多正式文档要求首页（封面页）不显示或显示专用的页眉页脚，而正文页显示带文件信息的页眉页脚。此时可开启“首页不同”，单独设置首页的页眉页脚。具体操作步骤如下：
- 创建
Workbook对象，并使用LoadFromFile()方法载入 Excel 文件。 - 通过
Workbook.Worksheets.get()方法获取指定工作表。 - 将
PageSetup.DifferentFirst属性设置为1，开启首页页眉页脚与其他页不同。 - 使用
PageSetup.FirstHeaderString和PageSetup.FirstFooterString属性设置首页的页眉和页脚。 - 使用
PageSetup.LeftHeader、CenterFooter等属性设置其他页的页眉和页脚。 - 通过
Workbook.SaveToFile()方法保存工作簿。
下面是一个完整的代码示例，展示了在 React 中为工作表首页设置与其他页不同的页眉页脚：
function App() {
const setFirstPageHeaderFooter = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 将字体和 Excel 文件载入 VFS
await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
const inputFileName = 'DifferentHeaderFooter.xlsx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);
// 加载工作簿
const workbook = new xlsModule.Workbook();
workbook.LoadFromFile({ fileName: inputFileName });
// 获取第一个工作表
const sheet = workbook.Worksheets.get(0);
// 开启首页页眉页脚与其他页不同
sheet.PageSetup.DifferentFirst = 1;
// 设置首页的页眉和页脚（蓝色、加粗）
sheet.PageSetup.FirstHeaderString = "&\"宋体\"&16&B&K4253E2首页页眉";
sheet.PageSetup.FirstFooterString = "&\"宋体\"&16&B&K4253E2首页页脚";
// 设置其他页的页眉和页脚（灰色、加粗）
sheet.PageSetup.LeftHeader = "&\"宋体\"&12&B&K808080其他页页眉";
sheet.PageSetup.CenterFooter = "&\"宋体\"&12&B&K808080其他页页脚";
// 切换为页面布局视图，便于预览页眉页脚
sheet.ViewMode = xlsModule.ViewMode.Layout;
// 保存文档
const outputFileName = 'DifferentHeaderFooterFirstPage_output.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>Set Different Header and Footer on the First Page</h1>
<button onClick={setFirstPageHeaderFooter}>
Start
</button>
</div>
);
}
export default App;
设置完成后，即可实现首页与其他页页眉页脚不同的效果。
常见问题
首页的页眉页脚没有生效
原因：未开启“首页不同”。若只设置 FirstHeaderString/FirstFooterString，而没有将 PageSetup.DifferentFirst 设置为 1，Excel 会忽略首页专用页眉页脚。
解决：开启 sheet.PageSetup.DifferentFirst = 1; 后再设置首页页眉页脚。
页眉页脚中的中文显示为乱码或方框
原因：浏览器端的 Excel 处理依赖字体文件，若未将中文字体（如 simsun.ttc）载入虚拟文件系统（VFS），中文字符可能无法正常渲染。
解决：在调用 Workbook.LoadFromFile() 前，先通过 FetchFileToVFS() 将字体载入，例如：
await window.spire.FetchFileToVFS(
'simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`
);
获取免费许可证
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
