html - 打印网页时的不同结果

单击打印时出现问题。打印出来的logo之前看起来很整齐，但是打印出来的时候就变得凌乱了点击打印前:

在我点击打印之后:

如何解决？我的代码如下:

 #invoice{
    padding: 30px;
}

.invoice {
    position: relative;
    background-color: #FFF;
    min-height: 680px;
    padding: 15px
}

#tengah{
	text-align: center;
	background: red;
}

.invoice header {
    padding: 10px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #3989c6
}

.invoice .company-details .logo{
text-align: left;
}

.invoice .company-details {
    text-align: left
}

.invoice .company-details .name {
    margin-top: 0;
    margin-bottom: 0
}

.invoice .contacts {
    margin-bottom: 20px
}

.invoice .invoice-to {
    text-align: left
}

.invoice .invoice-to .to {
    margin-top: 0;
    margin-bottom: 0
}

.invoice .invoice-details {
    text-align: right
}

.invoice .invoice-details .invoice-id {
    margin-top: 0;

}
.invoice .invoice-details .asoi {
	    color: black;
    background: #fff8a6
}

.invoice main {
    padding-bottom: 50px
}

.invoice main .thanks {
    margin-top: -100px;
    font-size: 2em;
    margin-bottom: 50px
}

.invoice main .notices {
    padding-left: 6px;
    border-left: 6px solid #3989c6;
    float: left;
}

.invoice main .notices .notice {
    font-size: 1.2em
}

.invoice main .ttd {
    padding-left: 6px;
   text-align: right;
   float: right;
}

.invoice main .ttd .ttd {
    font-size: 1.2em
}

.invoice table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 20px
}

.invoice table td,.invoice table th {
    padding: 15px;
    background: #eee;
    border-bottom: 1px solid #fff
}

.invoice table th {
    white-space: nowrap;
    font-weight: 400;
    font-size: 16px
}

.invoice table td h3 {
    margin: 0;
    font-weight: 400;
    color: #3989c6;
    font-size: 1.2em
}

.invoice table .qty,.invoice table .total,.invoice table .unit {
    text-align: right;
    font-size: 1.2em
}

.invoice table .no {
    color: #fff;
    font-size: 1.6em;
    background: #3989c6
}

.invoice table .totals {
    color: black;
    font-size: 1em;
    background: #eadea6;
    text-align: right;
}

.invoice table .unit {
    background: #ddd
}

.invoice table .total {
    background: #3989c6;
    color: #fff
}

.invoice table tbody tr:last-child td {
    border: none;
}

.invoice table tfoot td {
    background: 0 0;
    border-bottom: none;
    white-space: nowrap;
    text-align: right;
    padding: 10px 20px;
    font-size: 1.2em;
    border-top: 1px solid #aaa
}

.invoice table tfoot tr:first-child td {
    border-top: none
}

.invoice table tfoot tr:last-child td {
    color: #3989c6;
    font-size: 1.4em;
    border-top: 1px solid #3989c6
}

.invoice table tfoot tr td:first-child {
    border: none
}

.invoice footer {
    width: 100%;
    text-align: center;
    color: #777;
    border-top: 1px solid #aaa;
    padding: 8px 0
}

#border {
border: 1px solid black;
  padding: 5px;
  border-radius: 20px 20px; 
}

@media print {
    .invoice {
        font-size: 11px!important;
        overflow: hidden!important
    }

    .invoice footer {
        position: absolute;
        bottom: 10px;
        page-break-after: always
    }

    .invoice>div:last-child {
        page-break-before: always
    }
}
img {
  float: right;
  position: relative;
    bottom: 30px;
}

<body onload="">
<div id="border">
<div id="invoice" >
        <div class="text-right">
           <button id="printInvoice" class="btn btn-info" onclick="window.print()"><i class="fa fa-print"></i> Print</button>
             <h1 style="text-align: center; background: #ff8080; color: white;">INVOICE</h1>
        </div>
    <div class="invoice overflow-auto">
            <header>
                <div class="row">
                    <div class="col company-details">
                        <div class="clearfix">
                        <img src="<?php echo base_url(); ?>production/upload/logo/ajp4.png" data-holder-rendered="true" width="120" />
                        <h2 class="name">
                           Agro Jaya Prima
                        </h2>
                        <div>Jalan Galumpit No. 100 Cileunyi</div>
                        <div>Bandung, Jawa Barat 40622</div>
                        <div>0822-9500-6686</div>
                        <div>www.jualdombakiloan.com</div>
                    </div>
                    </div>
                </div>
            </header>
            <main>
                <div class="row contacts">
                    <div class="col invoice-to">
                        <div class="text-gray-light">INVOICE TO:</div>
                        <h2 class="to">Muslim</h2>
                     
                    </div>
                    <div class="col invoice-details">
                        <h1 class="invoice-id"><span class="asoi">INVOICE 1.300.000</span></h1>
                        <div class="date">Tanggal Invoice: 27/10/2019</div>
                        <div class="date">Invoice#       : 103-MUSLIM</div>
                    </div>
                </div>
                <table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap" border="0" cellspacing="0" cellpadding="0">
                    <thead style="background: red;">
                        <tr>
                            <th>No</th>
                            <th >Tanggal Potong</th>
                            <th >Nama Konsumen</th>
                            <th >Betina</th>
                            <th >Qty</th>
                            <th >Jantan</th>
                            <th >Qty</th>
                            <th >Harga</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="">
                            <td class="no">1</td>
                            <td >27 Oktober 2019</td>
                            <td >ARSYILLA/DR.DANI</td>
                            <td class="unit"></td>
                            <td class="qty"></td>
                            <td class="unit">C</td>
                            <td class="qty">1</td>
                            <td class="total">1.300.000</td>
                        </tr>
                           <tr class="totals">
                            <td colspan="3" class="pull-left totals">Total</td>
                            <td class="totals">&nbsp;</td>
                            <td class="totals">0</td>
                            <td class="totals">&nbsp;</td>
                            <td class="totals">1</td>
                            <td class="totals">1.300.000</td>
                        </tr>
                    </tbody>
                    <tfoot>

                        <tr>
                            <td colspan="7">Uang Potong Pagi/Malam</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td colspan="7">Ongkir</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td colspan="7">Sudah Dibayar</td>
                            <td>-</td>
                        </tr>
                           <tr>
                            <td colspan="7">Sisa Invoice</td>
                            <td>Rp 1.300.000</td>
                        </tr>
                    </tfoot>
                </table>
                
                <div class="notices">
                    <div><b>Pembayaran dapat dilakukan melalui:</b></div>
                    <p>Bank BCA 283-1801-150 an. Mochamad Arief Hidayat Putra Sanjaya</p>
                    <p>Bank Mandiri 131-0016-398-796 a.n. Mochamad Arief Hidayat Putra Sanjaya
                    </div>
                    <br>
                    <div class="ttd">
                      <p>Hormat kami,</p>
                        <br>
                    
                      <p>Agro Jaya Prima</p>
                    </div>
            </main>
         
        </div>
        <!--DO NOT DELETE THIS div. IT is responsible for showing footer always at the bottom-->
        <div></div>
    </div>
</div>
</body>

我希望有人能帮助我。我已经尝试了所有方法，但结果仍然相同，如果有人对此有一些提示，请告诉我

最佳答案

使用以下代码更新您的 header 代码。

<header>
   <div class="row">
      <div class="col company-details">
         <div class="clearfix" style="display: flex;flex-direction: row-reverse;">
            <img src="<?php echo base_url(); ?>production/upload/logo/ajp4.png" data-holder-rendered="true" width="120" " data-holder-rendered="true" width="120" />
            <div style="width: 100%;">
               <h2 class="name">Agro Jaya Prima</h2>
               <div>Jalan Galumpit No. 100 Cileunyi</div>
               <div>Bandung, Jawa Barat 40622</div>
               <div>0822-9500-6686</div>
               <div>www.jualdombakiloan.com</div>
            </div>
         </div>
      </div>
   </div>
   </div>
</header>

关于html - 打印网页时的不同结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58724326/

html - 打印网页时的不同结果

上一篇：html - 为表格中的单元格之间的空间着色

下一篇：css - 使用 renderPlot() 删除 R Shiny ggplot 中 geom_sf() 对象周围的白边