Question

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

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

我使用了插件，当我点击＆＃34;打印为PDF＆＃34;我修复过的div在其他div上的其他地方重叠。如何将div固定为pdf格式

Answer 1

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

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

您可以通过添加margin-bottom对页脚标记执行相同操作。边距可以根据修复页眉或页脚的高度来指定。

Answer 2

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

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

Answer 3

使用media="print"作为

包含您的自定义样式的样式表

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

或

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

尝试position正文relative和.header-logo fixed：

<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>

Answer 4

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

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

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

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

Div属性可能不同

根据页眉和页脚的大小（表包装在div中），用thead和tfoot将组件包装到表结构中

    <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;

     }

如何避免印刷中固定div的重叠为pdf？

4 个答案: