从 HTML 生成的 MS Word 文档中不需要的方块

如何解决从 HTML 生成的 MS Word 文档中不需要的方块

我正在使用 this topic 中的代码从 HTML 创建一个 MS Word 文档。经过一些调整后，它对我来说很好用，除了现在我在页眉和页脚 see image here 的每一端都有正方形。这些方块无法手动删除，我看不出是什么在创建它们。

要重现，只需创建一个 *.doc 文件，使用 Notepad++ 或 VS Code 等文本编辑器打开它，然后输入以下代码。之后用 MS Word 打开文件。

我希望你们能帮我摆脱那些方块！

<html xmlns:v='urn:schemas-microsoft-com:vml' xmlns:o='urn:schemas-microsoft-com:office:office'
    xmlns:w='urn:schemas-microsoft-com:office:word' xmlns:m='http://schemas.microsoft.com/office/2004/12/omml'
    xmlns='http://www.w3.org/TR/REC-html40'>

<head>
    <Meta charset='utf-8'/>
    <title></title>
    <style>
        @page {
            mso-page-orientation: portrait;
            margin: 1cm 1cm 1cm 1cm;
        }

        @page Section1 {
            mso-header-margin: 1cm;
            mso-footer-margin: 1cm;
            mso-header: h1;
            mso-footer: f1;
        }

        div.Section1 {
            page: Section1;
        }

        table.hdrftrtbl {
            margin: 0in 0in 0in 900in;
            width: 1px;
            height: 1px;
            overflow: hidden;
        }

        p.MsoHeadFoot,li.MsoHeadFoot,div.MsoHeadFoot,td.MsoHeadFoot {
            margin: 0;
            margin-bottom:1px;
            tab-stops: center 50% right 100%;
            font-size: 12.0pt;
        }
    </style>
</head>

<body>
    <br/>
    Todo: Actual content goes here

    <div class='Section1'>
        <table class='hdrftrtbl' border='0' cellspacing='0' cellpadding='0'>
            <tr>
                <!-- HEADER-tags -->
                <td class='MsoHeadFoot'>
                    <div style='mso-element:header' id='h1'>
                        <span style='mso-tab-count:2'>
                            <img src='logo.jpg' width="140" height="60">
                        </span>
                    </div>
                </td>
                <!-- end HEADER-tags -->
                <!-- FOOTER-tags -->
                <td class='MsoHeadFoot'>
                    <div style='mso-element:footer' id='f1'>
                        <span style='mso-tab-count:0'>&copy; company name</span>
                        <span style='mso-tab-count:1'>Todo: beginning from page 2</span>
                        <span style='mso-tab-count:1'></span>
                        page
                        <span style='mso-field-code:PAGE'></span>
                        of
                        <span style='mso-field-code:NUMPAGES'></span>
                    </div>
                </td>
                <!-- end FOOTER-tags -->
            </tr>
        </table>
    </div>
    
</body>

</html>

解决方法

找到了。我不得不为每个页眉和页脚添加另一个 <div> 块：

<div style='mso-element:header'>
  <p class='MsoHeader'>
    <span>&nbsp;<o:p></o:p></span>
  </p>
</div>

相应地

<div style='mso-element:footer'>
  <p class='MsoFooter'>
    <span>&nbsp;<o:p></o:p></span>
  </p>
</div>

显然 <o:p></o:p> 标签负责这些正方形。