打印 Bootstrap Modal 在末尾添加额外的空白页

Question

我正在使用 Bootstrap5 模式来创建发票功能。当我单击打印按钮时，window.print( ) 方法被触发。 但是，我注意到的问题是，在发票页面下方添加了一个额外的空白页面。

看看下面的截图和代码来理解这个场景，

1. admin-invoice-form-component.html

<div id="printThis">
<div class="modal fade" id="custInvoiceModal" tabindex="-1" aria-labelledby="custInvoiceLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
    <div class="modal-content">
        <div class="modal-header justify-content-center">
            <h5 class="modal-title" id="deleteCustLabel">INVOICE</h5>
        </div>
        <div class="modal-body">
            <!-- From row: Starts -->
            <div class="row">
                <div class="col m-1" style="background-color: rgb(247, 250, 255);">
                    <!-- From Card: Starts -->
                    <div class="card m-2" style="width: 18rem;">
                        <div class="card-body">
                            <label class="fw-bold">From</label>
                        </div>

                        <div class="card-body pt-0 biz-card">
                          <div class="row mb-2 common">
                              <div class="col biz-content"><span>Some Shop</span></div>
                          </div>
                          <div class="row mb-2 common">
                            <div class="col biz-content"><span>
                                3/2 Some Complex, Shop no 365,
                                Opp. Some Agency, Pune - 433223,
                                Maharashtra, India
                            </span></div>
                          </div>
                          <div class="row mb-2 common">
                            <div class="col biz-content"><span>someshop@gmail.com</span></div>
                          </div>
                          <div class="row mb-2 common">
                            <div class="col biz-content"><span>+91 9090909090</span></div>
                          </div>
                        </div>
                    </div>
                </div>
                <div class="col m-1" style="background-color: rgb(247, 250, 255);">
                     <!-- Invoice Details Card: Starts -->
                     <div class="card m-2" style="width: 18rem;">
                        <div class="card-body">
                            <label class="fw-bold">Invoice Details</label>
                        </div>

                        <div class="card-body pt-0 biz-card">
                          <div class="row mb-2 common">
                            <div class="col pe-0 biz-title"><span>Invoice No.</span></div>
                            <div class="col-7 ps-0 biz-content"><span>000001</span></div>
                          </div>
                          <div class="row mb-2 common">
                            <div class="col pe-0 biz-title"><span>Date</span></div>
                            <div class="col-7 ps-0 biz-content"><span>11/01/2022</span></div>
                          </div>
                        </div>
                    </div>
                    
                    <!-- To Details: Starts -->
                    <div class="card m-2" style="width: 18rem;">
                        <div class="card-body">
                            <label class="fw-bold">TO</label>
                        </div>

                        <div class="card-body pt-0 biz-card"> 
                          <div class="row mb-2 common">
                              <div class="col biz-content"><span>{{customer.firstName}} {{customer.lastName}}</span></div>
                          </div>
                          <div class="row mb-2 common">
                            <div class="col biz-content"><span>{{customer.city}}</span></div>
                          </div>
                          <div class="row mb-2 common">
                            <div class="col biz-content"><span>+91 {{customer.mobileNo}}</span></div>
                          </div>
                        </div>
                    </div>
                </div>
            </div>

           <!-- Items Table -->
            <div class="row">    
                <div class="items-table">  
                    <div class="row header">
                        <div class="col-1">&nbsp;</div>
                        <div class="col-5">Item Description</div>
                        <div class="col-2">Quantity</div>
                        <div class="col-2">Rate</div>
                        <div class="col-2 text-center">Amount</div>
                    </div>
    
                    <div class="row invoice-items" *ngFor="let item of items">
                        <div class="col-1 remove-item">
                            <a class="btn btn-danger" (click)="removeItem(item)">[X]</a>
                        </div>
                        <div class="col-5 input-container">
                            <input [(ngModel)]="item.description" name="itemDescription" id="item" type="text" placeholder="Item description" >
                        </div>
                        <div class="col-2 input-container-qty">
                            <input [(ngModel)]="item.quantity" name="quantity" type="number" placeholder="Quantity"/>
                        </div>
                        <div class="col-2 input-container-rate">
                            <input [(ngModel)]="item.rate" name="rate" type="number" placeholder="Rate"/>
                        </div>
                        <div class="col-2 text-center input-container">
                            {{ item.quantity * item.rate | currency:'INR':true }}
                        </div>
                    </div>
                    <div class="row invoice-item">
                        <div class="col add-item">
                          <a class="btn btn-primary" (click)="addItem()">[+]</a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-10 text-end">Sub Total:</div>
                        <div class="col-2 text-center">{{invoiceSubTotal() | currency:'INR':true}}</div>
                    </div>
                    <div class="row">
                        <div class="col-10 text-end">Discount(%): <input [(ngModel)]="invoice.discountRate" name="discount" type="number" style="border: 1px solid #ddd; width:50px"></div>
                        <div class="col-2 text-center">{{calculateDiscount() | currency:'INR':true}}</div>
                    </div>
                    <div class="row">
                        <div class="col-10 text-end">Grand Total:</div>
                        <div class="col-2 text-center">{{calculateGrandTotal() | currency: 'INR':true}}</div>
                      </div>
                </div>    
            </div> 

            <div class="row">
                <div class="row">
                    <section class="signature">
                        <div>
                            <p>For Online IT Shop</p>
                        </div>
                    </section>
                </div>
            </div>

            <div class="row">
                <div class="col-12 text-center footer">This is a computer generated invoice</div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-outline-secondary" (click)="print()">
                Print
            </button>
        </div>
    </div>
</div>
</div>
</div>

2。样式.css

@media print {
  body * {
    visibility:hidden;
  }

  #printThis, #printThis * {
    visibility:visible;
  }

  .remove-item > a, .add-item > a, .modal-footer {
    display: none;
  }

  .modal {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    overflow: visible!important;
  }
}

Answer 1

添加下面的代码解决了我的问题，

@media print {

    html, body {
      height:100vh; 
      margin: 0 !important; 
      padding: 0 !important;
      overflow: hidden;
    }

}