显示 HTML 生成的 Word 文档第二页的页眉/页脚

问题描述 投票:0回答:1

我目前正在研究从 HTML 导出 Word 文档。该文档包含页眉和页脚,但我想要从第 2 页开始。我尝试了各种线程、stackoverflow 帖子中的各种方法,但无法达到预期的结果。我的代码如下所示:

<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">
    <head>
        <meta charset="utf-8" />
        <!--[if gte mso 9]>
            <xml>
                <w:WordDocument><w:View>Print</w:View><w:Zoom>100</w:Zoom><w:DoNotOptimizeForBrowser /></w:WordDocument>
            </xml>
        <![endif]-->
        <style type="text/css">
            body {
                font-family: Arial, sans-serif;
            }

            @page WordSection1 {
                size: 8.5in 11in;
                mso-header-space: 0.5in;
                mso-footer-space: 0in;
                mso-paper-source: 0;
                mso-title-page: yes;
                mso-first-header: fh1;
                mso-first-footer: ff1;
                mso-header: h1;
                mso-footer: f1;
            }
            div.WordSection1 {
                page: WordSection1;
            }
        </style>
    </head>
    <body>
        <div class="WordSection1">
            <table style="margin-left: 150in;">
                <tr style="height: 1pt; mso-height-rule: exactly;">
                    <td>
                        <div style="mso-element: header;" id="h1">
                            <p class="header" style="text-align: right;">
                                <img height="36" width="36" src="data:image/jpg;base64,{{headerBase64Image}}" alt="" />
                            </p>
                        </div>
                    </td>
                    <td>
                        <div style="mso-element: footer;" id="f1">
                            <p style="font-family: ff2; font-size: 9px; color: rgb(166, 166, 166); width: 100%; text-align: center; margin: 0in 0in 0pt;">
                                Page
                                <span style="mso-field-code: PAGE;"></span>
                            </p>
                        </div>

                        <div style="mso-element: header;" id="fh1">
                            <p class="MsoHeader">
                                <span lang="EN-US" style="mso-ansi-language: EN-US;">&nbsp;FIRST-HEADER-TITLE<o:p></o:p></span>
                            </p>
                        </div>

                        <div style="mso-element: footer;" id="ff1">
                            <p class="MsoFooter">
                                <span lang="EN-US" style="mso-ansi-language: EN-US;">&nbsp;FIRST-FOOTER-TITLE<o:p></o:p></span>
                            </p>
                        </div>
                    </td>
                </tr>
            </table>
            <!-- Other Page Content -->
            <div style="page-break-before: always;">
                <p class="">
                    Another page content
                </p>
            </div>
        </div>
    </body>
</html>

我已经设置了

mso-first-header
mso-first-footer
mso-title-page: yes
,但仍然不起作用。在第一页中也显示页眉、页脚。

我查看了其他帖子,很多人提到设置 mso-first-header、mso-first-footer 和 mso-title-page 属性应该可以完成这项工作。

将页眉和页脚的“不同首页”MS Word 选项应用于动态生成的 Word 文档 Office HTML Word 标题 css打印模式:仅在生成的word文档的第一页上显示页眉和页脚 如何让页脚只从第二页开始出现

我尝试了所有这些方法。我是不是错过了什么?

css ms-word header ms-office doc
1个回答
0
投票

如果我正确理解您的要求,您需要一个没有页眉/页脚的封面页(又名标题页),然后是默认的Word正文,首页有单独的页眉/页脚,其余页面有默认的页眉/页脚。

如果是这样,那么封面页需要位于其自己的部分中。如果需要,此封面页部分可能有自己的页面设置和页眉/页脚设置。

应生成所需的示例:

<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">
    <head>
        <meta charset="utf-8" />
        <!--[if gte mso 9]>
            <xml>
                <w:WordDocument><w:View>Print</w:View><w:Zoom>100</w:Zoom><w:DoNotOptimizeForBrowser /></w:WordDocument>
            </xml>
        <![endif]-->
        <style type="text/css">
            body {
                font-family: Arial, sans-serif;
            }
            
            @page CoverPageSection {
                size: 8.5in 11in;
                mso-header-space: 0.5in;
                mso-footer-space: 0in;
                mso-paper-source: 0;
            }
            div.CoverPageSection {
                page: CoverPageSection;
            }
            
            @page WordSection1 {
                size: 8.5in 11in;
                mso-header-space: 0.5in;
                mso-footer-space: 0in;
                mso-paper-source: 0;
                mso-title-page: yes;
                mso-first-header: fh1;
                mso-first-footer: ff1;
                mso-header: h1;
                mso-footer: f1;
                mso-page-numbers:1; /* start with page number 1, so cover page is page number 0 */
            }
            div.WordSection1 {
                page: WordSection1;
            }
        </style>
    </head>
    <body>
        <!-- cover page content -->
        <div class="CoverPageSection">
            <!-- no header/footer definitions in hidden table-->
            <table style="margin-left: 150in;">
                <tr style="height: 1pt; mso-height-rule: exactly;">
                    <td>
                        <!-- possible header/footer definitions-->
                    </td>
                </tr>
            </table>
           <!-- page content -->
            <div>
                <p class="">
                    Title aka Cover page content
                </p>
                
                <!-- page and section break -->
                <br clear="all" style="page-break-before: always; mso-break-type:section-break">
            </div>
        </div>

        <!-- default word section content -->
        <div class="WordSection1">
            <!-- header/footer definitions in hidden table-->
            <table style="margin-left: 150in;">
                <tr style="height: 1pt; mso-height-rule: exactly;">
                    <td>
                        <div style="mso-element: header;" id="h1">
                            <p class="header" style="text-align: right;">
                                <img height="36" width="36" src="data:image/jpg;base64,{{headerBase64Image}}" alt="" />
                            </p>
                        </div>

                        <div style="mso-element: footer;" id="f1">
                            <p style="font-family: ff2; font-size: 9px; color: rgb(166, 166, 166); width: 100%; text-align: center; margin: 0in 0in 0pt;">
                                Page
                                <span style="mso-field-code: PAGE;"></span>
                            </p>
                        </div>

                        <div style="mso-element: header;" id="fh1">
                            <p class="MsoHeader">
                                <span lang="EN-US" style="mso-ansi-language: EN-US;">&nbsp;FIRST-HEADER-TITLE<o:p></o:p></span>
                            </p>
                        </div>

                        <div style="mso-element: footer;" id="ff1">
                            <p class="MsoFooter">
                                <span lang="EN-US" style="mso-ansi-language: EN-US;">&nbsp;FIRST-FOOTER-TITLE<o:p></o:p></span>
                            </p>
                        </div>
                    </td>
                </tr>
            </table>
            <!-- first page content -->
            <div>
                <p class="">
                    First page content
                </p>
            </div>
            <!-- other page content -->
            <div style="page-break-before: always;">
                <p class="">
                    Another page content
                </p>
            </div>
            <div style="page-break-before: always;">
                <p class="">
                    Another page content
                </p>
            </div>
        </div>
    </body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.