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

Question

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

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

我使用了一个插件，当我点击“打印为PDF”时，我修复的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>