如何打印小票据收据jquery php

Question

当我试图打印一张小收据时，我遇到了打印问题。所有文档显示为print.when，打印后单击打印button.and按钮，也打印在页面上。我只需要在页面上打印收据，.i使用的是window.print()；用于打印。

 <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div class='print' style="border: 1px solid #a1a1a1; width: 300px; background: white; padding: 10px; margin: 0 auto; text-align: center;">

                    <div class="invoice-title" align="center">

                        <h1>Pepsi Cola</h1>
                    </div>

                    <div class="invoice-title" align="left">
                        Order #  &nbsp; &nbsp;<b> 11111</b>
                    </div>


                    <div class="invoice-title" align="right">
                        Invoice   <b>22344</b>
                    </div>
                    </br>
                    </br>

                    <div>
                        <div>
                            <table class="table table-condensed">
                                <thead>
                                <tr>
                                    <td class="text-center"><strong>No</strong></td>
                                    <td class="text-center"><strong>Pname</strong></td>
                                    <td class="text-center"><strong>Qty</strong></td>
                                    <td class="text-center"><strong>Price</strong></td>
                                    <td class="text-right"><strong>Total</strong></td>
                                </tr>
                                </thead>

                                <tr>
                                    <td class="text-center">
                                        1
                                    </td >
                                    <td class="text-center">
                                        Cake
                                    </td >
                                    <td class="text-center">
                                        2
                                    </td >
                                        <td class="text-center">120</td>
                                        <td class="text-right">240</td>
                                    </tr>
                            </table>
                        </div>
                    </div>
                    <div  align="right">
                        Sub Total &nbsp;&nbsp;<b>240</b>
                    </div>
                    <div align="right">
                        Pay  &nbsp;&nbsp; <b>220</b>
                    </div>
                    <div align="right">
                        Due &nbsp;&nbsp;   <b>20</b>
                    </div>
                    <input style="padding:5px;" value="Print Document" type="button" onclick="myFunction()"></input>
                </div>
                <div>
                    <div>
                    </div>

javascript

 <script>
        function myFunction()
        {
            window.print();
        }
    </script>

Answer 1

使用CSS @media打印

​

function myFunction()
{
    window.print();
}

@media print
{
  .button
  {
    display: none;
  }
}

<div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div class='print' style="border: 1px solid #a1a1a1; width: 300px; background: white; padding: 10px; margin: 0 auto; text-align: center;">

                    <div class="invoice-title" align="center">

                        <h1>Pepsi Cola</h1>
                    </div>

                    <div class="invoice-title" align="left">
                        Order #  &nbsp; &nbsp;<b> 11111</b>
                    </div>


                    <div class="invoice-title" align="right">
                        Invoice   <b>22344</b>
                    </div>
                    </br>
                    </br>

                    <div>
                        <div>
                            <table class="table table-condensed">
                                <thead>
                                <tr>
                                    <td class="text-center"><strong>No</strong></td>
                                    <td class="text-center"><strong>Pname</strong></td>
                                    <td class="text-center"><strong>Qty</strong></td>
                                    <td class="text-center"><strong>Price</strong></td>
                                    <td class="text-right"><strong>Total</strong></td>
                                </tr>
                                </thead>

                                <tr>
                                    <td class="text-center">
                                        1
                                    </td >
                                    <td class="text-center">
                                        Cake
                                    </td >
                                    <td class="text-center">
                                        2
                                    </td >
                                        <td class="text-center">120</td>
                                        <td class="text-right">240</td>
                                    </tr>
                            </table>
                        </div>
                    </div>
                    <div  align="right">
                        Sub Total &nbsp;&nbsp;<b>240</b>
                    </div>
                    <div align="right">
                        Pay  &nbsp;&nbsp; <b>220</b>
                    </div>
                    <div align="right">
                        Due &nbsp;&nbsp;   <b>20</b>
                    </div>
                    <input style="padding:5px;" value="Print Document" type="button" onclick="myFunction()" class="button"></input>
                </div>
                <div>
                    <div>
                    </div>

​