angular print printing a second blank page
<p>I'm trying to print an content of my html page.</p>

<p>I'm using this <a href="https://github.com/samwiseduzer/angularPrint" rel="nofollow">angularPrint</a> but the problem im having is that in the page preview i'm getting to pages. the first one has content and the second one is a blank page. I'm trying to get rid of the blank page.</p>

<p>this is my html</p>

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

<p>this is the directive that trigger the print action</p>

<pre><code>&lt;button type="button" print-btn=""&gt;Print&lt;/button&gt;
</code></pre>

<p>I want a solution it doesn't matter if I have to use plain javascript/jQuery or no directive at all. I just to be able to populate an invoice and print it. </p>

<p>Thank you in advance.</p>