Question

我正在尝试使用动态内容打印HTML页面的一部分，并使用大空格作为标题，因为在打印后打印其他内容时该部分应为空。经过这么多尝试后，我得到了完美的镀铬效果，但火不像铬那样打印。

为什么firefox之前会添加额外的页面？没有内容，没关系。但如果我为div或margin添加任何内容或高度，则只需打印标题即可添加额外的页面。

用于打印的HTML代码结构是

    <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或margin添加任何内容或高度，则仅添加带有标题的额外页面。任何形式的帮助都会很棒！

firefox浏览器在使用jqueryprint.js打印时在内容之前显示额外的1页

0 个答案: