页眉和页脚是 Word 文档中不可或缺的组成部分——页眉通常用于放置公司 Logo、文档标题，页脚则用于显示页码、版权声明等辅助信息。Spire.Doc for JavaScript 基于 WebAssembly 在浏览器端直接完成 Word 文档的创建与编辑，通过虚拟文件系统（VFS）管理字体和文件资源，无需后端服务支持。
本文介绍三个核心功能点：
有关安装和项目配置，请参考 React 项目中集成 Spire.Doc for JavaScript。以下示例默认已安装 Spire.Doc 并完成 WebAssembly 模块初始化。
添加页眉页脚（图片、文字、页码）
在实际开发中，最常遇到的需求是给文档添加页眉页脚：页眉中插入公司 Logo 和文档标题，页脚中插入页码和版权信息。Spire.Doc 通过 HeadersFooters.Header 和 HeadersFooters.Footer 获取页眉和页脚对象，然后使用 AppendPicture 插入图片、AppendText 插入文字、AppendField 插入页码字段。核心流程分为三个阶段：首先通过 FetchFileToVFS 将字体文件和目标 Word 文件载入 WASM 虚拟文件系统；然后实例化 Document 加载文件，获取节（Section）后调用自定义函数添加页眉页脚内容；最后将文档保存并从 VFS 读取生成的文件，封装为 Blob 后触发浏览器下载。
function InsertHeaderAndFooter(section, inputImgFileName, inputImgFileName_1) {
let wasmModule = window.wasmModule.spiredoc;
let header = section.HeadersFooters.Header;
let footer = section.HeadersFooters.Footer;
// 在页眉中插入图片和文字
let headerParagraph = header.AddParagraph();
let headerPicture = headerParagraph.AppendPicture({ imgFile: inputImgFileName });
// 页眉文字
let text = headerParagraph.AppendText("Demo of Spire.Doc");
text.CharacterFormat.FontName = "Arial";
text.CharacterFormat.FontSize = 10;
text.CharacterFormat.Italic = true;
headerParagraph.Format.HorizontalAlignment = wasmModule.HorizontalAlignment.Right;
// 页眉底部边框
headerParagraph.Format.Borders.Bottom.BorderType = wasmModule.BorderStyle.Single;
headerParagraph.Format.Borders.Bottom.Space = 0.05;
// 页眉图片布局 - 文字环绕
headerPicture.TextWrappingStyle = wasmModule.TextWrappingStyle.Behind;
// 页眉图片布局 - 位置
headerPicture.HorizontalOrigin = wasmModule.HorizontalOrigin.Page;
headerPicture.HorizontalAlignment = wasmModule.ShapeHorizontalAlignment.Left;
headerPicture.VerticalOrigin = wasmModule.VerticalOrigin.Page;
headerPicture.VerticalAlignment = wasmModule.ShapeVerticalAlignment.Top;
// 在页脚中插入图片
let footerParagraph = footer.AddParagraph();
let footerPicture = footerParagraph.AppendPicture({ imgFile: inputImgFileName_1 });
// 页脚图片布局
footerPicture.TextWrappingStyle = wasmModule.TextWrappingStyle.Behind;
footerPicture.HorizontalOrigin = wasmModule.HorizontalOrigin.Page;
footerPicture.HorizontalAlignment = wasmModule.ShapeHorizontalAlignment.Left;
footerPicture.VerticalOrigin = wasmModule.VerticalOrigin.Page;
footerPicture.VerticalAlignment = wasmModule.ShapeVerticalAlignment.Bottom;
// 插入页码
footerParagraph.AppendField("page number", wasmModule.FieldType.FieldPage);
footerParagraph.AppendText(" of ");
footerParagraph.AppendField("number of pages", wasmModule.FieldType.FieldNumPages);
footerParagraph.Format.HorizontalAlignment = wasmModule.HorizontalAlignment.Right;
// 页脚顶部边框
footerParagraph.Format.Borders.Top.BorderType = wasmModule.BorderStyle.Single;
footerParagraph.Format.Borders.Top.Space = 0.05;
}
function App() {
const AddHeaderAndFooter = async () => {
// 获取 Spire.Doc WASM 模块
const wasmModule = window.wasmModule?.spiredoc;
// 检查模块是否就绪
if (!wasmModule) {
alert('Spire.Doc is not ready yet');
return;
}
// 将示例 Word 文件载入 VFS
const inputFileName = "Sample.docx";
await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);
const inputImgFileName = "Header.png";
await window.spire.FetchFileToVFS(inputImgFileName, "", `${process.env.PUBLIC_URL}/data/`);
const inputImgFileName_1 = "Footer.png";
await window.spire.FetchFileToVFS(inputImgFileName_1, "", `${process.env.PUBLIC_URL}/data/`);
// 加载文档
let doc = new wasmModule.Document();
doc.LoadFromFile(inputFileName);
let section = doc.Sections.get_Item(0);
// 插入页眉和页脚
InsertHeaderAndFooter(section, inputImgFileName, inputImgFileName_1);
// 定义输出文件名
const outputFileName = "HeaderAndFooter.docx";
// 保存文档
doc.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.Docx2013 });
// 释放资源
doc.Close();
doc.Dispose();
// 从 VFS 读取生成的文件，触发下载
const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'});
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>单击以下按钮以在 Word 文档中添加页眉和页脚。</h1>
<button onClick={AddHeaderAndFooter}>
Generate
</button>
</div>
);
}
export default App;
生成的 Word 文档效果如下：
设置首页不同的页眉页脚
在实际开发中，很多文档的首页（封面页）需要使用与其他页面不同的页眉页脚，甚至不需要页眉页脚。Spire.Doc 通过设置 PageSetup.DifferentFirstPageHeaderFooter = true 来启用首页独立设置，然后分别通过 HeadersFooters.FirstPageHeader / FirstPageFooter 设置首页内容，通过 HeadersFooters.Header / Footer 设置其他页内容。
function App() {
const DifferentFirstPage = async () => {
// 获取 Spire.Doc WASM 模块
const wasmModule = window.wasmModule?.spiredoc;
// 检查模块是否就绪
if (!wasmModule) {
alert('Spire.Doc is not ready yet');
return;
}
// 将示例文件载入 VFS
let inputFileName = "MultiplePages.docx";
await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);
let inputImgFileName = "E-iceblue.png";
await window.spire.FetchFileToVFS(inputImgFileName, "", `${process.env.PUBLIC_URL}/data/`);
// 加载文档
let doc = new wasmModule.Document();
doc.LoadFromFile(inputFileName);
// 获取节并启用首页独立页眉页脚
let section = doc.Sections.get_Item(0);
section.PageSetup.DifferentFirstPageHeaderFooter = true;
// 设置首页页眉：右侧插入图片
let paragraph1 = section.HeadersFooters.FirstPageHeader.AddParagraph();
paragraph1.Format.HorizontalAlignment = wasmModule.HorizontalAlignment.Right;
let headerimage = paragraph1.AppendPicture({ imgFile: inputImgFileName });
// 设置首页页脚：居中显示文字
let paragraph2 = section.HeadersFooters.FirstPageFooter.AddParagraph();
paragraph2.Format.HorizontalAlignment = wasmModule.HorizontalAlignment.Center;
let FF = paragraph2.AppendText("First Page Footer");
FF.CharacterFormat.FontSize = 10;
// 设置其他页的页眉和页脚
let paragraph3 = section.HeadersFooters.Header.AddParagraph();
paragraph3.Format.HorizontalAlignment = wasmModule.HorizontalAlignment.Center;
let NH = paragraph3.AppendText("Spire.Doc for JavaScript");
NH.CharacterFormat.FontSize = 10;
let paragraph4 = section.HeadersFooters.Footer.AddParagraph();
paragraph4.Format.HorizontalAlignment = wasmModule.HorizontalAlignment.Center;
let NF = paragraph4.AppendText("E-iceblue");
NF.CharacterFormat.FontSize = 10;
// 定义输出文件名
const outputFileName = "DifferentFirstPage.docx";
// 保存文档
doc.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.Docx2013 });
// 释放资源
doc.Close();
doc.Dispose();
// 从 VFS 读取生成的文件，触发下载
const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'});
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 onClick={DifferentFirstPage}>
Generate
</button>
</div>
);
}
export default App;
首页显示单独的页眉页脚内容，而其他页使用统一的页眉页脚，生成的 Word 文档效果如下：
设置奇偶页不同的页眉页脚
对于需要双面打印或书籍排版的文档，通常需要为奇偶页设置不同的页眉页脚——例如奇数页页眉显示章节名称并靠右对齐，偶数页页眉显示书名并靠左对齐。Spire.Doc 通过设置 PageSetup.DifferentOddAndEvenPagesHeaderFooter = true 来启用奇偶页独立设置，然后分别通过 OddHeader / OddFooter 和 EvenHeader / EvenFooter 设置各自的内容。
function App() {
const OddAndEvenHeaderFooter = async () => {
// 获取 Spire.Doc WASM 模块
const wasmModule = window.wasmModule?.spiredoc;
// 检查模块是否就绪
if (!wasmModule) {
alert('Spire.Doc is not ready yet');
return;
}
// 将示例文件载入 VFS
let inputFileName = "MultiplePages.docx";
await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);
// 加载文档
let doc = new wasmModule.Document();
doc.LoadFromFile(inputFileName);
// 获取第一个节
let section = doc.Sections.get_Item(0);
// 启用奇偶页不同的页眉页脚
section.PageSetup.DifferentOddAndEvenPagesHeaderFooter = true;
// 添加奇数页页眉
let P3 = section.HeadersFooters.OddHeader.AddParagraph();
let OH = P3.AppendText("Odd Header");
P3.Format.HorizontalAlignment = wasmModule.HorizontalAlignment.Center;
OH.CharacterFormat.FontName = "Arial";
OH.CharacterFormat.FontSize = 10;
// 添加偶数页页眉
let P4 = section.HeadersFooters.EvenHeader.AddParagraph();
let EH = P4.AppendText("Even Header from E-iceblue Using Spire.Doc");
P4.Format.HorizontalAlignment = wasmModule.HorizontalAlignment.Center;
EH.CharacterFormat.FontName = "Arial";
EH.CharacterFormat.FontSize = 10;
// 添加奇数页页脚
let P2 = section.HeadersFooters.OddFooter.AddParagraph();
let OF = P2.AppendText("Odd Footer");
P2.Format.HorizontalAlignment = wasmModule.HorizontalAlignment.Center;
OF.CharacterFormat.FontName = "Arial";
OF.CharacterFormat.FontSize = 10;
// 添加偶数页页脚
let P1 = section.HeadersFooters.EvenFooter.AddParagraph();
let EF = P1.AppendText("Even Footer from E-iceblue Using Spire.Doc");
EF.CharacterFormat.FontName = "Arial";
EF.CharacterFormat.FontSize = 10;
P1.Format.HorizontalAlignment = wasmModule.HorizontalAlignment.Center;
// 定义输出文件名
const outputFileName = "OddAndEvenHeaderFooter_output.docx";
// 保存文档
doc.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.Docx2013 });
// 释放资源
doc.Close();
doc.Dispose();
// 从 VFS 读取生成的文件，触发下载
const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'});
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 onClick={OddAndEvenHeaderFooter}>
Generate
</button>
</div>
);
}
export default App;
奇偶页分别设置了不同的页眉和页脚文字，生成的 Word 文档效果如下：
常见问题
首页页眉页脚未按预期显示
原因：DifferentFirstPageHeaderFooter 属性默认为 false，直接编辑 FirstPageHeader 或 FirstPageFooter 不会生效。
解决：编辑首页页眉页脚前先设置该属性为 true：
section.PageSetup.DifferentFirstPageHeaderFooter = true;
// 然后再编辑 FirstPageHeader / FirstPageFooter
奇偶页设置不生效
原因：DifferentOddAndEvenPagesHeaderFooter 属性默认为 false，直接编辑 OddHeader / EvenHeader 不会生效。
解决：启用该属性后再编辑奇偶页内容：
section.PageSetup.DifferentOddAndEvenPagesHeaderFooter = true;
// 然后再编辑 OddHeader / EvenHeader / OddFooter / EvenFooter
获取免费许可证
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
