HTML导出Word：如何为特定页面设置不同背景色（首页蓝其余白）

当然可以实现你想要的效果！Word对HTML/CSS的分页和页面样式有一定支持，我们只需要调整代码结构和CSS规则，就能轻松做到首页蓝色背景、其余页面白色背景。

问题分析 #

你当前的代码给<body>设置了全局蓝色背景，这会导致所有分页后的页面都继承这个背景色。要实现不同页面的背景区分，我们需要把背景色设置从全局body转移到每个页面的独立容器上，避免样式继承。

修改后的完整代码 #

头部样式部分

ExportHeader &= "<html>"
ExportHeader &= "<head>"
ExportHeader &= "<style>"
ExportHeader &= "html,body,th,td { font-family:Verdana,Arial; font-size:9pt; margin:0; padding:0; }"
ExportHeader &= ".first-page-container { background-color: #1c3f94; width:100%; height:100vh; padding:10px; box-sizing:border-box; color:#ffffff; }"
ExportHeader &= ".other-page-container { background-color: #ffffff; width:100%; min-height:100vh; padding:10px; box-sizing:border-box; }"
ExportHeader &= "h3 { font-size:12pt; }"
ExportHeader &= "</style>"
ExportHeader &= "</head>"
ExportHeader &= "<body>"

（额外添加了color:#ffffff，让首页文字在蓝色背景上更清晰，你可以根据需求调整）

正文内容部分

ExportBody &= "<div class='first-page-container'>"
ExportBody &= "<table>"
ExportBody &= "<tr><td>First blue background</td></tr>"
ExportBody &= "</table>"
ExportBody &= "</div>"
ExportBody &= "<br clear=all style='mso-special-character:line-break;page-break-before:always' />"
ExportBody &= "<div class='other-page-container'>"
ExportBody &= "<table>"
ExportBody &= "<tr><td>Second page, white background</td></tr>"
ExportBody &= "</table>"
ExportBody &= "</div>"

尾部代码保持不变

ExportFooter &= "</body>"
ExportFooter &= "</html>"

关键调整说明 #

1. 移除全局body背景：不再给body设置背景色，避免所有页面继承同一背景
2. 页面容器独立设置背景：
   • 用.first-page-container包裹首页内容，设置蓝色背景，height:100vh确保容器占满整个页面高度
   • 用.other-page-container包裹后续页面内容，设置白色背景，min-height:100vh保证即使内容不足也能铺满页面
3. 保留Word专属分页标记：你原来的<br clear=all style='mso-special-character:line-break;page-break-before:always' />是Word识别强制分页的关键，这个要保留

如果后续还有更多页面，只需要重复添加分页标记+.other-page-container包裹内容的结构即可。

内容的提问来源于stack exchange，提问作者Peter van Mourik