Question

我正在尝试打印html页面的内容。

我正在使用此angularPrint但我遇到的问题是在页面预览中我正在访问页面。第一个是内容，第二个是空白页面。我正试图摆脱空白页。

这是我的HTML

    <div id="invoice" print-section="" print-only="">
  <div class="invoice">
    <div class="invoice-company">{{user.store.name}}</div>
    <div class="invoice-header">
      <div class="invoice-from"><small>from</small>
        <address class="m-t-5 m-b-5"><strong>{{user.store.name}}.</strong><br/>{{user.store.address.street}}<br/>{{user.store.address.city}}, {{user.store.address.zipCode}}<br/>Phone: {{user.store.phone}}</address>
      </div>
      <div class="invoice-date">
        <div class="date m-t-5">{{saleDate | date:'MM/dd/yyyy'}}</div>
        <div class="invoice-detail"># {{saleId}}<br/>Cashier {{user.firstName}}</div>
      </div>
    </div>
    <div class="invoice-content">
      <div class="table-responsive">
        <table class="table table-invoice">
          <thead>
            <tr>
              <th>Item</th>
              <th>Price</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="item in sale.items">
              <td>{{item.name}} {{item.size}}</td>
              <td>{{item.price | currency}}</td>
            </tr>
            <tr ng-repeat="discount in sale.discounts">
              <td>{{discount.name}}</td>
              <td>- {{discount.price | currency}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="invoice-price">
        <div class="invoice-price-left">
          <div class="invoice-price-row">
            <div class="sub-price"><small>SUBTOTAL</small>{{sale.subtotal | currency}}</div>
            <div class="sub-price"><i class="fa fa-plus"></i></div>
            <div class="sub-price"><small>TAX</small>{{sale.tax}}</div>
          </div>
        </div>
        <div class="invoice-price-right"><small>TOTAL</small>{{sale.total | currency}}</div>
      </div>
    </div>
    <div class="invoice-footer text-muted">
      <p class="text-center m-b-5">Thank you for coming.<br/>We hope you'll visit again.</p>
    </div>
  </div>
</div>

这是触发打印操作的指令

<button type="button" print-btn="">Print</button>

我想要一个解决方案，如果我必须使用普通的javascript / jQuery或者根本没有指令那么无关紧要。我只是能够填写发票并打印出来。

提前谢谢。

Answer 1

你可以添加

#invoice:last-child {
    page-break-after: auto;
}

删除最后一页

注意：IE

不支持

角度打印打印第二个空白页

1 个答案: