Ionic app PDF generation - PDF UI

invoice.component.html

<ion-header>
  <ion-toolbar color="danger">
    <ion-buttons (click)="closeModal()" slot="start">
      <ion-button slot="icon">
        <ion-icon class="icon" name="arrow-back-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title class="title-ios ion-text-capitalize">Order Invoice</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div id="PrintInvoice" class="invoice-box"
    style="max-width: 800px;margin: auto;padding: 30px;border: 1px solid #eee;box-shadow: 0 0 10px rgba(0, 0, 0, .15);font-size: 16px;line-height: 24px;font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;color: #555;">
    <table cellpadding="0" cellspacing="0" style="width: 100%;line-height: inherit;text-align: left;">
      <tr class="top">
        <td colspan="2" style="padding: 5px;vertical-align: top;">
          <table style="width: 100%;line-height: inherit;text-align: left;">
            <tr>
              <td class="title"
                style="padding: 5px;vertical-align: top;padding-bottom: 20px;font-size: 45px;line-height: 45px;color: #333;">
                <img src="../../../assets/enappd.png" style="width:100%; max-width:300px;">
              </td>

              <td style="padding: 5px;vertical-align: top;text-align: right;padding-bottom: 20px;">
                Invoice #<br>
                Created: {{order.createdAt}}<br>
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <tr class="information">
        <td colspan="2" style="padding: 5px;vertical-align: top;">
          <table style="width: 100%;line-height: inherit;text-align: left;">
            <tr>
              <td style="padding: 5px;vertical-align: top;padding-bottom: 40px;">
                Address:<br>
                {{order.address.flatNumber}}<br>
                {{order.address.street}}, {{order.address.locality}}
              </td>

              <td style="padding: 5px;vertical-align: top;text-align: right;padding-bottom: 40px;">
                Username:<br>
                {{order.address.name}}<br>
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <tr class="heading">
        <td style="padding: 5px;vertical-align: top;background: #eee;border-bottom: 1px solid #ddd;font-weight: bold;">
          Payment Method
        </td>

        <td
          style="padding: 5px;vertical-align: top;text-align: right;background: #eee;border-bottom: 1px solid #ddd;font-weight: bold;">
          Payment ID
        </td>
      </tr>

      <tr class="details">
        <td style="padding: 5px;vertical-align: top;padding-bottom: 20px;">
          Card
        </td>

        <td style="padding: 5px;vertical-align: top;text-align: right;padding-bottom: 20px;">
          {{order.paymentId}}
        </td>
      </tr>

      <tr class="heading">
        <td style="padding: 5px;vertical-align: top;background: #eee;border-bottom: 1px solid #ddd;font-weight: bold;">
          Item
        </td>

        <td
          style="padding: 5px;vertical-align: top;text-align: right;background: #eee;border-bottom: 1px solid #ddd;font-weight: bold;">
          Price
        </td>
      </tr>

      <tr *ngFor="let product of order.products" class="item">
        <td style="padding: 5px;vertical-align: top;border-bottom: 1px solid #eee;">
          {{product.name}}
        </td>

        <td style="padding: 5px;vertical-align: top;text-align: right;border-bottom: 1px solid #eee;">
          ${{product.salePrice | number : '1.2-2'}}
        </td>
      </tr>

      <tr class="total">
        <td style="padding: 5px;vertical-align: top;"></td>

        <td style="padding: 5px;vertical-align: top;text-align: right;border-top: 2px solid #eee;font-weight: bold;">
          Total: ${{order.grandTotal}}
        </td>
      </tr>
    </table>
  </div>
</ion-content>

<ion-footer (click)="downloadInvoice()">
  <ion-toolbar color="success" class="ion-padding-horizontal">
    <div class="ion-text-center">
      <h4 class="ion-no-margin">Download Invoice</h4>
    </div>
  </ion-toolbar>
</ion-footer>