CodeIgniter 3导出Word文档：页眉与正文间空白及图标问题求助

问题分析 #

你遇到的图标是Word解析页眉专用表格时，因表格定位逻辑不完善导致的残留元素；多余空白则是<pre>标签和默认样式的margin共同造成的。

修复步骤 #

• 彻底隐藏页眉页脚专用表格：把原表格样式改成绝对定位移出可视区域，避免Word渲染多余图标
• 移除冗余的<pre>标签：正文部分的<pre>会引入不必要空白，直接替换为普通容器
• 优化页眉分隔线样式：给<hr>设置margin:0消除默认上下边距
• 修正HTML闭合标签：footer里未闭合的<span>会导致Word解析异常

修改后的视图代码 #

<!DOCTYPE html>
<html lang="en" 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">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @page {
            mso-page-orientation: portrait;
            size: 21cm 29.7cm;
            margin: 1cm 1cm 1cm 1cm;
        }

        @page Section1 {
            mso-header-margin: .5in;
            mso-footer-margin: .5in;
            mso-header: h1;
            mso-footer: f1;
        }

        div.Section1 {
            page: Section1;
        }

        /* 彻底隐藏页眉页脚表格，避免生成多余图标 */
        table#hrdftrtbl {
            position: absolute;
            left: -9999px;
            top: -9999px;
            width: 1px;
            height: 1px;
            overflow: hidden;
            border: none;
        }

        p.MsoFooter,
        li.MsoFooter,
        div.MsoFooter {
            margin: 0in;
            margin-bottom: .0001pt;
            mso-pagination: widow-orphan;
            tab-stops: center 3.0in right 6.0in;
            font-size: 12.0pt;
        }

        /* 消除页眉分隔线的默认空白 */
        .header-hr {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div class="Section1">
        <table id='hrdftrtbl' border='0' cellspacing='0' cellpadding='0'>
            <tr>
                <td>
                    <div style='mso-element:header' id=h1>
                        <div class="row">
                            <div>
                                <table>
                                    <tr>
                                        <td>
                                            <img src="<?php echo base_url() ?>images/images.jpg" width="100"
                                                height="100" alt="">
                                        </td>
                                        <td>
                                            <p><b></b>Bangladesh
                                                Agricultural Research Council</p>
                                            <p>Digital Archive</p>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <hr class="header-hr">
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div style='mso-element:footer' id=f1>
                        <div class="row">
                            <table>
                                <tr>
                                    <td>
                                        <span style='position:relative;z-index:-1'>
                                            Develop and Maintain by Computer & GIS Unit
                                        </span>
                                    </td>
                                    <td>
                                        <p class="MsoFooter" style="text-align: right;">
                                            <span style='mso-tab-count:2'></span>
                                            Page
                                            <span style='mso-field-code: PAGE; text-align: right;'></span>
                                        </p>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <!-- 正文内容直接写在这里，替换原来的pre标签 -->
    <div class="content">
        <!-- 你的正文内容 -->
        这里是文档正文内容...
    </div>
</body>

</html>

修改后的控制器代码 #

header("Content-Type: application/vnd.ms-word");
header("Content-disposition: attachment; filename=\"mydocument_name.doc\"");
$this->load->view('welcome_message');

内容的提问来源于stack exchange，提问作者ZeroToOne