2017-02-20 105 views
-1

我试图打印一部分带有动态内容的PHP页面,因为这个部分在打印之后应该为空打印。经过这么多的尝试,我得到了铬的完美结果,但火灾并不像铬一样印刷。当使用jqueryprint.js打印时,firefox浏览器显示额外的1页内容

为什么firefox在添加额外页面之前?没有内容就没关系。但如果我添加任何内容或高度的div或保证金其添加额外的页面只打印标题。

打印的HTML代码stucture是

<section class="panel" id="payablePrint"> 
    <table> 
    <thead > 
     <tr> 
     <th style="width:100%"> 
      <div id="print_header"style="opacity: 0.001;"> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
      </div> 
     </th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td> 
      <table style="width:100%"> 
      <tr> 
       <th>Firstname</th> 
       <th>Lastname</th> 
       <th>Age</th> 
      </tr> 
      <tr> 
       <td>Jill</td> 
       <td>Smith</td> 
       <td>50</td> 
      </tr> 
      <tr> 
       <td>Eve</td> 
       <td>Jackson</td> 
       <td>94</td> 
      </tr> 
    </table> 
     </td> 
    </tr> 
    </tbody> 
    <tfoot> 
    <tr> 
     <td> 
      footer here....,. 
     </td> 
    </tr> 
    </tfoot> 
    </table> 
    </section> 
    <div class="row"> 
    <div class="col-lg-12 text-right"> 
    <button id="" onclick="printDiv('payablePrint')" class="btn btn-shadow btn-primary jdIconButton"><i class="fa fa-print"></i> Print Agreement</button> 
    </div> 
</div> 

和CSS这是

@media print{ 

#print_header{ 
    display: block; 
    } 
    #Footer{ 
    display: none !important; 
    margin-bottom: 0px; 
    margin-top: 0px; 
    } 
    #printFooter { 
    display: block; 
    position: fixed; 
    bottom: 0px; 
    left: 154px; 
    } 
.panel-footer{ 
    border-top: none !important; 
} 
/* *************** */ 
thead { display: block; page-break-after: avoid;page-break-before: avoid;} 
table { page-break-after:auto; } 
tr { page-break-inside:avoid; page-break-after:auto; } 
td { page-break-inside:avoid; page-break-after:auto; } 
thead { display:table-header-group; page-break-before: avoid;} 
tboby { display: table-row-group;page-break-after: avoid;page-break-before: avoid;} 
tfoot { display:table-footer-group;} 
/* *************** */ 

#footer { 
    display: block; 
    position: fixed; 
    bottom: 0; 
} 
#companyName{ 
    margin-top: -10px !important; 
} 
.panel-body{ 
    margin: -1mm 0mm 10mm 0mm !important; 

} 

.agreement_title{ 
    margin-top: -15px !important; 
} 
.margin_top{ 
    margin-top: -6px !important; 
} 

} 

为什么Firefox是前添加一个额外的页面?没有内容就没关系。但如果我添加任何内容或高度的div或保证金其额外的页面只添加标题。 任何形式的帮助都会很棒!

回答

0

根据需要使用colspan和rowspan。删除主表内的儿童桌。请检查下面的代码..

<section class="panel" id="payablePrint"> 
 
    <table> 
 
    <thead > 
 
     <tr> 
 
     <th style="width:100%"> 
 
      <div id="print_header"style="opacity: 0.001;"> 
 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
 
      </div> 
 
     </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
      content goes here ...... 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
    <tfoot> 
 
    <tr> 
 
     <td> 
 
      footer here....,. 
 
     </td> 
 
    </tr> 
 
    </tfoot> 
 
    </table> 
 
    </section> 
 
    <div class="row"> 
 
    <div class="col-lg-12 text-right"> 
 
     <button id="" onclick="printDiv('payablePrint')" class="btn btn-shadow btn-primary jdIconButton"><i class="fa fa-print"></i> Print Agreement</button> 
 
    </div> 
 
    </div>

相关问题