打印动态内容的分页符

时间:2016-11-03 07:44:41

标签: jquery html css

我在打印屏幕页面上有数据。我希望将分割数据分成一个页面,然后在另一个页面上打印另一个数据。这意味着不应拆分数据。我的内容是动态的。这是我的问题截图...

正常页面

enter image description here

打印页面

enter image description here

这是我的演示代码..

<div class="row extra_bottom_border">
                <div class="col-lg-12">
                  <section class="panel">
                    <header class="panel-heading extrarextcss">
                        <?php echo $this->lang->line('requisition_data');?>
                    </header>
                    <div class="panel-body">
                      <div class="activity terques">
                        <div class="row activity-desk printcss_class">
                          <?php 
                          if(isset($farmer_ques_ans))
                          {
                          foreach ($farmer_ques_ans as $key => $value) { ?>
                            <div class="col-lg-6 print_css">
                              <div class="panel" style="width: 100%;">
                                  <div class="panel-body" style="padding-top: 7px;padding-bottom: 7px;">
                                      <div class="arrow"></div>
                                      <h4><?php echo $value['question']; ?></h4>
                                      <p><?php echo $value['answer']; ?></p>
                                  </div>
                              </div>
                            </div>
                          <?php } } ?>  
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              </div>

我也试过这个解决方案链接..

How to add Page Break dyanamically to Print page?

但是我的代码不能正常工作..

2 个答案:

答案 0 :(得分:0)

试试这个。这对我有用。第三部分应在第2页上打印。

style="page-break-after: always;"

如果每个段落都有相同的父级,我们就无法拆分段落。

<header class="panel-heading extrarextcss">
    Section 1
</header>
<div class="panel-body" style="page-break-after: always;">
    <div class="activity terques">
        <div class="row activity-desk printcss_class">
            <div class="col-lg-6 print_css" >
                <div class="panel" style="width: 100%;">
                    <div class="panel-body" style="padding-top: 7px;padding-bottom: 7px;">
                        <div class="arrow"></div>
                            <h4>Section 2</h4>
                            <p>description...</p>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 <div>
     Section 3
 </div>

答案 1 :(得分:0)

请尝试使用此代码:

的CSS

@media all {
    .page-break { display: none; }
}
@media print {
    .page-break { display: block; page-break-before: always; }
}

.HTML

<div class="page-break"></div>