firefox和chrome實現頁面打印自動分頁


  在Firefox和chrome中直接調用打印功能的js方法是

    

window.print();

但是如果頁面很長,那么就需要分頁,這時只需要在頁面中添加css屬性即可,如果想自動分頁,則如下所示

<style type="text/css" media="print">
    div {
          page-break-after:auto;
          page-break-inside:auto;
          page-break-before:auto;
     }
</style>

這里的三個屬性可以根據需要添加。

需要注意的是,在Firefox和chrome中,如果想實現打印可以自動分頁,不要使用table來組織頁面,兩個瀏覽器對於用table組織的頁面沒有很好的支持自動分頁,需要使用div,如果有表格,可以把表格包含在div中,也會自動分頁打印。

如果沒有可以添加css,例如

<style type="text/css" media="print">
    table {
          page-break-after:auto;
          page-break-inside:auto;
          page-break-before:auto;
     }
    tr {
          page-break-after:auto;
          page-break-inside:auto;
          page-break-before:auto;
     }
</style>

最后,可以把需要打印的內容單獨成立一頁,添加上一個打印按鈕使用css控制該按鈕不會被打印出來:

<style media="print">
.Noprint {display:none;}
</style>


<table id="printCtrl" class="Noprint">
     <tbody>
         <tr>
            <td align="center">
                 <input id="printBtn" type="button" onclick="print()" value="打印">
                 <br>
                  <hr align="center" width="90%"  size="1"  noshade="">
            </td>
         </tr>
     </tbody>
</table>

后面可以添加上需要打印的內容即可  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM