Question

我正在尝试打印类别，每个类别包含未知数量的元素。

每个页面都需要：

页眉和页脚。
尽可能包含类别

我尝试做＆＃34;位置：固定＆＃34;对于页眉和页脚，以及＆＃34; page-break-inside：避免＆＃34;对于类别容器。第一页看起来很好，但在其他页面中，类别从页面顶部开始，在标题后面。

问题是：

在媒体印刷中有一种方法吗？
如果没有，有什么方法可以呈现看起来像我不会的页面，只打印它？

这是一个例子：

＆＃13;

<style>
  @media print {
    .category {
      page-break-inside: avoid;
      padding: 10px;
    }
    .page {
      padding-top: 20px;
    }
  }
</style>


<body>
  <h1 style="position:fixed">this text hide the category in second page </h1>
  <div class="page">
    <div class="category">
      Category 1<br/>item<br/>item<br/>item<br/>
    </div>
    <div class="category">
      Category 2<br/>item<br/>item<br/>item<br/>item<br/>item<br/>
    </div>
    <div class="category">
      Category 3<br/>item<br/>item
    </div>

    <!--and so on  -->
  </div>
</body>

＆＃13;

Answer 1

最后，我计算每个类别的div高度，并在需要时始终添加分页符。

for (let cat of menu.categories) {
      mywindow.document.write('<div id="' + cat._id + '" class="content">');
      // Write category
      mywindow.document.write('</div>');  //end of content
  var currentPageDivHeight = mywindow.document.getElementById('A4').clientHeight - (1000 * pageNamber);
    console.log('currentPageDivHeight:' + currentPageDivHeight)
  if ( currentPageDivHeight > 750) {
    pageNamber++;
    mywindow.document.getElementById(cat._id).style.setProperty("page-break-before",  'always');
    mywindow.document.getElementById(cat._id).style.setProperty("padding-top",  '5cm');
  }
}

在每个页面打印中放置尽可能多的元素

1 个答案: