2017-08-13 82 views
2

因此,我正在尝试构建一个网站,让用户可以下载打印输出的PDF文件。我在另一个线程中建议创建一个“新”页面,在其中放置我想要的信息,然后从中打印出“Print to PDF”,因为这是将内容转换为PDF的最简单方式。溢出时将内容移动到另一个div

因此,我制作了一个网格,其网格正好是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纸如果它导致前网格溢出?

+0

获取'A4'纸张的默认高度,然后使用'jQuery',检查'teams'类容器的偏移值并相应地移动它们。 – Shiladitya

回答

2

添加它从我的理解。您只需确保所有网格都适合A4尺寸的纸张,并且没有网格破损。

您可以使用的打印介质的查询和分页符做到这一点: https://www.w3schools.com/cssref/pr_print_pagebi.asp

用途:

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

然后,不管一个.team DIV有多大,只要它比A4更小,它总是适合在页面上。

-1

很抱歉之前的答案: 您可以使用@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; 
} 
+0

注意在原始问题中的分组不一定每个团队10 ...您的解决方案需要更加动态 –

+0

我不知道我理解这一个。就我所见,在你的小提琴中,所有球队现在都有10个成员(尽管一个只应该有7个,另外还有13个),其中一些甚至被排序很奇怪。而且,据我所知,如果有更多的团队,溢出仍然在发生。 –

+0

@Patrick Roberts @Patrick Roberts我可能会误会这个问题对不起, –

相关问题