Excel 中的页眉和页脚是放在每页顶部和底部的文字或图像。页眉页脚中的文本或图像可以展示有关页面或文件的基本信息，如文件名、公司标志、页码、日期和时间等。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端直接完成此操作，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。

Spire.XLS for JavaScript 提供的 PageSetup 类可以对 Excel 工作簿的页面进行设置，包括设置页眉和页脚。该类中的 LeftHeader、CenterHeader、RightHeader、LeftFooter、CenterFooter、RightFooter 等属性能够添加内容到页眉或页脚的左侧、中部和右侧。如需添加域到页眉页脚或是设置页眉页脚的文本格式，可以使用下表列出的格式代码。

本文介绍两个核心功能点：

• 在页眉中添加图像和带格式文本
• 在页脚中添加当前日期和页码

有关安装和项目配置，请参考 React 项目中集成 Spire.XLS for JavaScript。以下示例默认已安装 Spire.XLS 并完成 WebAssembly 模块初始化。

在页眉中添加图像和带格式文本

页眉位于每一页的顶部，适合放置公司标志、文件名称等固定信息。把图片放在左侧、把带字体和颜色设置的文本放在右侧，打印或预览时每一页都会带上同样的标识，不必逐页手工添加。

在页眉中添加图像和带格式文本的写法与结果：

具体操作步骤如下：

1. 将字体文件、Excel 文件与图片载入 VFS。
2. 创建 Workbook 对象，用 LoadFromFile() 载入 Excel 文件，并通过 Workbook.Worksheets.get(0) 取得第一张工作表。
3. 使用 Stream 载入图片，并通过 PageSetup.LeftHeaderImage 属性将该图像设置为页眉左侧的图像源。
4. 使用 PageSetup.LeftHeader 属性在页眉左侧显示该图像。
5. 使用 PageSetup.RightHeader 属性在页眉右侧插入带格式文本。
6. 将工作表切换到页面布局视图（ViewMode.Layout），便于预览页眉。
7. 通过 Workbook.SaveToFile() 方法保存工作簿，并用 Workbook.Dispose() 释放资源。

下面是一个完整的代码示例，展示了在 React 中向工作表页眉中添加图像和带格式文本：

function App() {
  const addImageAndTextToHeader = 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 = 'HeaderFooter.xlsx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);
    const imgFileName = 'logo.png';
    await window.spire.FetchFileToVFS(imgFileName, '', `${process.env.PUBLIC_URL}data/`);

    // 加载工作簿
    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: inputFileName });

    // 获取第一个工作表
    const sheet = workbook.Worksheets.get(0);

    // 载入图片并设置为页眉左侧的图像源
    const image = new xlsModule.Stream(imgFileName);
    sheet.PageSetup.LeftHeaderImage = image;
    sheet.PageSetup.LeftHeader = "&G";

    // 添加带格式文本到页眉右侧
    sheet.PageSetup.RightHeader = "&\"宋体\"&B&10&K4253E2冰蓝科技公司  \n www.e-iceblue.com";

    // 切换为页面布局视图，便于预览页眉页脚
    sheet.ViewMode = xlsModule.ViewMode.Layout;

    // 保存文档
    const outputFileName = 'HeaderImageAndText_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>Add Image and Formatted Text to Header</h1>
      <button onClick={addImageAndTextToHeader}>
        Start
      </button>
    </div>
  );
}

export default App;

在页眉中添加图像和带格式文本后的工作表：

在页脚中添加当前日期和页码

页脚位于每一页的底部，常用来放页码和日期。页码与日期会随打印页数自动更新，无需在正文中手工维护；把它们分列左右两侧，读者翻页时也能快速定位。

在页脚中添加当前日期和页码的写法与结果：

具体操作步骤如下：

1. 将字体文件与 Excel 文件载入 VFS。
2. 创建 Workbook 对象，用 LoadFromFile() 载入 Excel 文件，并通过 Workbook.Worksheets.get(0) 取得第一张工作表。
3. 使用 PageSetup.LeftFooter 属性在页脚左侧添加带格式的页码，可根据喜好定制页码的格式。
4. 使用 PageSetup.RightFooter 属性将当前日期添加到页脚右侧，同样可以根据需要改变日期文本的外观。
5. 将工作表切换到页面布局视图（ViewMode.Layout），便于预览页脚。
6. 通过 Workbook.SaveToFile() 方法保存工作簿，并用 Workbook.Dispose() 释放资源。

下面是一个完整的代码示例，展示了在 React 中向工作表页脚中添加当前日期和页码：

function App() {
  const addDateAndPageNumberToFooter = 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 = 'HeaderFooter.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);

    // 添加页码到页脚左侧，&P 表示当前页码
    sheet.PageSetup.LeftFooter = "&\"宋体\"&B&10&K4253E2第 &P 页";

    // 添加当前日期到页脚右侧，&D 表示当前日期
    sheet.PageSetup.RightFooter = "&\"宋体\"&B&10&K4253E2&D";

    // 切换为页面布局视图，便于预览页眉页脚
    sheet.ViewMode = xlsModule.ViewMode.Layout;

    // 保存文档
    const outputFileName = 'FooterDatePageNumber_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>Add Current Date and Page Number to Footer</h1>
      <button onClick={addDateAndPageNumberToFooter}>
        Start
      </button>
    </div>
  );
}

export default App;

在页脚中添加当前日期和页码后的工作表：

常见问题

在 Excel 中看不到页眉页脚

原因：Excel 工作表默认处于普通视图，页眉和页脚只有在页面布局视图或打印时才会显示。

解决：在代码中通过 sheet.ViewMode = xlsModule.ViewMode.Layout; 将工作表切换为页面布局视图，或在 Excel 中手动切换到"页面布局"视图后查看。

页眉中的图片没有显示出来

原因：只设置了图像源（如 LeftHeaderImage），却没有在对应的页眉文本中使用 &G 占位符，或图片文件未正确载入 VFS。

解决：确保图片已通过 FetchFileToVFS() 载入，并已在页眉字符串中添加 &G，例如 sheet.PageSetup.LeftHeader = "&G";。

页脚中如何同时显示当前页码和总页数

原因：页码只用了 &P 域，页脚中因此只有当前页的编号，没有总页数信息。

解决：在页脚字符串中同时写入 &P 和 &N，例如 sheet.PageSetup.LeftFooter = "&P / &N";，打印或预览时两个域会分别替换为当前页码和总页数。

获取免费许可证

如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。