Question

所以我正在尝试建立一个人们可以下载PDF文件进行打印输出的网站。我在另一个帖子中建议我创建一个“新”页面，在其中放置我想要的信息，然后从中创建一个“打印到PDF”，因为这将是将内容转换为PDF的最简单方法。

所以我制作了一个网格，页面正好是A4纸的宽度和高度。因此，如果打印，内容应该完全适合。

但是，我现在的问题是，网格内的内容会根据人们的输入而改变。

所以现在我可能会遇到以下情况：

CSS：

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .grid {
        display: grid;
        grid-template-columns: 1fr;
        width: 21cm;
        height: 29.7cm;
        border: 1px red solid;
        align-content: start;
        grid-row-gap: 10px;
        background: black;
    }

    .teams {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
        "teamNumber roundScore";
        background: #ffffff;
        margin: 10px;
        padding: 10px;
        border-radius: 5px;     
    }

    .teamMember {
        border-bottom: 2px #474340 solid;
        padding: 5px 0px 5px 5px;
        margin: 5px;
    }

    .teamNumber {
        grid-area: teamNumber;
        text-align: left;
        grid-column: 1 / -1;
        padding-left: 5px;
        justify-self: start;
    }
</style>

HTML：

<div class="grid">
    <div class="teams">
        <p class="teamNumber">Team 1</p>
        <div class="teamMember">1.</div>
        <div class="teamMember">2.</div>
        <div class="teamMember">3.</div>
        <div class="teamMember">4.</div>
        <div class="teamMember">5.</div>
        <div class="teamMember">6.</div>
        <div class="teamMember">7.</div>
    </div>
    <div class="teams">
        <p class="teamNumber">Team 2</p>
        <div class="teamMember">1.</div>
        <div class="teamMember">2.</div>
        <div class="teamMember">3.</div>
        <div class="teamMember">4.</div>
        <div class="teamMember">5.</div>
        <div class="teamMember">6.</div>
        <div class="teamMember">7.</div>
        <div class="teamMember">8.</div>
        <div class="teamMember">9.</div>
        <div class="teamMember">10.</div>
    </div>
    <div class="teams">
        <p class="teamNumber">Team 3</p>
        <div class="teamMember">1.</div>
        <div class="teamMember">2.</div>
        <div class="teamMember">3.</div>
        <div class="teamMember">4.</div>
        <div class="teamMember">5.</div>
        <div class="teamMember">6.</div>
        <div class="teamMember">7.</div>
        <div class="teamMember">8.</div>
        <div class="teamMember">9.</div>
        <div class="teamMember">10.</div>
        <div class="teamMember">11.</div>
        <div class="teamMember">12.</div>
        <div class="teamMember">13.</div>
    </div>
    <div class="teams">
        <p class="teamNumber">Team 4</p>
        <div class="teamMember">1.</div>
        <div class="teamMember">2.</div>
        <div class="teamMember">3.</div>
        <div class="teamMember">4.</div>
        <div class="teamMember">5.</div>
        <div class="teamMember">6.</div>
        <div class="teamMember">7.</div>
        <div class="teamMember">8.</div>
        <div class="teamMember">9.</div>
        <div class="teamMember">10.</div>
    </div>
    <div class="teams">
        <p class="teamNumber">Team 5</p>
        <div class="teamMember">1.</div>
        <div class="teamMember">2.</div>
        <div class="teamMember">3.</div>
        <div class="teamMember">4.</div>
        <div class="teamMember">5.</div>
        <div class="teamMember">6.</div>
        <div class="teamMember">7.</div>
        <div class="teamMember">8.</div>
        <div class="teamMember">9.</div>
        <div class="teamMember">10.</div>
    </div>
</div>

的jsfiddle： https://jsfiddle.net/kfeer7f8/

所以在进入此页面之前，有人告诉我的系统/网站应该有5个团队，50个人，然后将这些人分成5个团队。正如你可以看到的结果，至少从我为这个例子使用的格式中看，一切都按照它应该排列，但是最后团队溢出了A4网格的尺寸。显然这是随机的。有时它可能只有2个团队和20个人，很容易适应这个网格。但有时它甚至可能远远超过这使得溢出更加糟糕。

所以我的问题是：有没有办法，通过javascript / jquery，或其他任何东西，我可以告诉它将/继续团队放到另一个网格/ A4纸上，如果它导致前一个网格溢出？< / p>

Answer 1

从我的理解。您只需确保所有网格都适合A4尺寸的纸张，并且没有网格损坏。

您可以使用打印介质查询和分页符来执行此操作： https://www.w3schools.com/cssref/pr_print_pagebi.asp

使用：

  @media print {
          .teams { 
                page-break-inside: avoid;
          }
    }

然后，无论.team div有多大，只要它小于A4，它就会始终适合页面。

Answer 2

对不起前面的答案：您可以将@media print类用于css并将其动态添加到html中。 https://jsfiddle.net/s7fjLt8e/6/

@media print {
    .pageBreakClass{
      page-break-before: always;
    }
  }

用于动态添加动态的Javascript代码

var teamArray = []
$('.teamMember').each(function(){
    teamArray.push($(this));
});
var i = 30;
while(teamArray[i]){
    teamArray[i].parent().after("<div class='pageBreakClass'>Page Breaks Here</div>");
  i += 30;
}

溢出时将内容移动到另一个div

2 个答案: