如何避免在打印为 pdf 时固定 div 的重叠？答案

【问题标题】：How to avoid overlapping of fixed div's in print as pdf?如何避免在打印为 pdf 时固定 div 的重叠？
【发布时间】：2014-07-23 15:16:36
【问题描述】：

我有一个为我的网页修复的 div

.header-logo{
     width:100%; 
height:55px; 
position:fixed; 
z-index:100;
   }

我使用了一个插件，当我点击“打印为 PDF”时，我修复的 div 与其他 div 的其他地方重叠。如何将 div 打印为 pdf 格式

【问题讨论】：

标签： jquery css pdf pdf-generation fpdf

【解决方案1】：

pdf中正确实现页眉页脚的方法

在互联网上找到了很多不同的解决方案和解决方法后，我终于分享了一种适合我的方法。

请将这些样式添加到容器中（呈现报告的 div）

     <div #scrollingContainer class="col-xxs-9 content-container" style="overflow-x: hidden;width:100%;">
     </div>

Div 属性可能不同

根据你的页眉和页脚的大小，用thead和tfoot将组件包裹到表格结构中（表格被包裹在一个div中）

    <div style="width: 100%;">
                <table style="table-layout: fixed;
                width: 100%;"> // Add this css to make main table fixed, child tables will still scroll
                    <thead class="page-break-before">
                        <tr>
                            <td>
                                <div style="height: 80px;"></div> // space for the respective header
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                              <div> Your Data Goes Here........</div>
                            </td>
                        </tr>
                    </tbody>

                    <tfoot class="show-in-print page-break-after">
                        <tr>
                            <td>
                                <div style="height: 130px;"></div> // space for the respective footer
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>

示例页眉和页脚

      <div class="page-break-before header">
        <div>A long header content...</div>
      </div>

  
      <div class=" page-break-after footer">
        <p> A long footer content...</p>
      </div>

    .header {
     position : fixed;
     top: 0px;

     }

    .footer {
     position : fixed;
     bottom: 0px;

     }

【讨论】：

【解决方案2】：

将print-padding 类添加到重复标头之后的内容块中。

.header-logo {
    position: fixed;
    top: 0;
    display: block;
}
.print-top-padding {
    margin-top: 150px;
}

您可以通过添加 margin-bottom 来对页脚标签执行相同的操作。可以根据fix header或footer的高度给定margin。

【讨论】：

【解决方案3】：

包含一个带有您的自定义样式的样式表，以便使用media="print" as 进行打印

<link rel="stylesheet" href="yourpath/print.css" media="print"/>

或

使用媒体查询在 html 中嵌入样式

尝试position正文relative和.header-logofixed：

<style>
@media print {
   body {
        position: relative;
     }
     .header-logo {
        width:100%; 
        height:55px; 
        position:fixed; 
        z-index:100;
        display:block;
     }
}
</style>

或

使用<style>标签在html中嵌入样式

<style type="text/css" media="print">
    body {
        position: relative;
     }
     .header-logo {
        width:100%; 
        height:55px; 
        position:fixed; 
        z-index:100;
        display:block;
     }
</style>

【讨论】：

【解决方案4】：

    @media print{
       .header-logo{
         width:100%; 
         height:55px; 
         position:fixed; 
        z-index:100;
        display:block;
      }
    }

    function printDetail() {
    window.print();
}
     <button onclick="printDetail()">print</button>

【讨论】：