HTML to print pdf CSS

Question

我有一个简单的HTML页面，我想转换为pdf(打印模式)。我让标题在每个页面重复，但我注意到标题覆盖了第二页的内容。有人知道怎么避免吗?

注意:我正在使用Bootstrap，但是我注释掉了它，所以我可以使用我自己的样式。

SCSS:

@media print{
header{
  position: fixed;
  top: 0;
  border: none;
}
main{
  margin-top: 2cm;
}
footer{
  position: fixed;
  bottom: 0;
}
@page {
  size: auto;
  //margin: 6.35mm;
}
}

查找HTML: https://jsfiddle.net/u1oy0ehj/

谢谢!

Answer 1

@media print只执行打印模式下的代码。因此，在正常的浏览器模式下，您在其中包含的任何内容都不会受到影响。所以你可以在标题中去掉position: fixed;，只有在打印模式中，所以即使在打印模式下，它也不会这样做。

固定定位将元素从文档流中取出，因此无需对元素进行任何操作。

JSFiddle更新

如果您想要position: fixed，那么您所能做的就是将<main>内容按下，仅用于打印模式。

main{ margin-top: 5cm; } //probably more than what you had given '2cm'

即使这样也帮不了你，因为在第二页，因为你已经固定了标题(它在文档流之外)，溢出的内容会认为标题不存在，并像往常一样继续给你一个重叠的效果。

Answer 2

<div id="list${MACRO}TopDivRow" class="row">
        
<style>
    @media print{
        body *:not(#list${MACRO}TopDivRow):not(#list${MACRO}TopDivRow *){
            visibility: hidden;
        }
        #list${MACRO}TopDivRow {
            visibility : visible;
            position: absolute;
            left: 0;
            top: 0;
        }
    }
</style>
<button onclick="window.print();">
    print
</button>

 ---------------------Explanation-------------------------------- 
    @media print is useful to print a page. 
    #list${MACRO}TopDivRow    - this is the division id which you want to print. 
in the entire body of page, first iam hidding the content which is not belongs to my perticular division.so i have written **visibility : hidden** there. In the second code snippet, iam printing required division, so i have placed **visibility : visible there**.
window.print()    - useful to print the content of window.

Answer 3

您可以完全使用JavaScript在页面中打印特定的除法。在这里，我们使用简单的交换逻辑在原始内容和特定的划分之间。如果需要整个页面，则传递整个页面划分id。

<script type="text/javascript">
    function printContent() {
 var printContents = document.getElementById("list${MACRO}TopDiv").innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
    }
</script>
list${MACRO}TopDiv - this is your division which you want to print