HTML打印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在您的page.here中打印特定的分区--我们使用的是原始内容与特定division.if之间的简单交换逻辑--您想要整个页面，传递整个页面划分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