2017-02-20 104 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>

相關問題