Custom sales invoice

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<table style="width: 100%">
  <tr>
    <td style="padding: 20px; vertical-align: top">
      <img data-bind="attr: { src: SellerLogoUrl }" src="#" style="max-height: 80px;
    max-width: 300px;" />
    </td>
    <td style="text-align: right; color: #666; vertical-align: top">
      <div data-bind="text: Seller" style="font-weight: bold"></div>
      <div data-bind="foreach: SellerContactDetails">
        <div data-bind="text: $data"></div>
      </div>
    </td>
  </tr>
</table>
<table style="width: 100%; border-bottom: 2px solid #ccc; margin-top: 20px">
  <tr>
    <td colspan="4" style="padding: 20px; padding-left: 0px; font-size: 24px; font-weight: bold">This is your <span style="border-bottom: 3px solid gold">invoice</span>

    </td>
    <td style="text-align: right">
      <div style="font-weight: bold; font-size: 14px">Total</div>
      <div>
        <div style="font-size: 32px; font-weight: bold">$<span data-bind="text: Total"></span>

        </div>
      </div>
    </td>
  </tr>
</table>
<table style="width: 100%; margin-top: 20px">
  <tr>
    <td style="padding: 20px; padding-left: 0px; vertical-align: top; width: 25%">
      <div data-bind="text: Customer" style="font-weight: bold"></div>
      <div data-bind="foreach: CustomerAddressLines">
        <div data-bind="text: $data"></div>
      </div>
    </td>
    <td style="width: 25%; padding: 10px">
      <div style="padding: 20px; border: 2px solid #ccc; text-align: center">
        <div style="color: #666; font-weight: bold">Invoice No.</div><div data-bind="text: Number" style="font-weight: bold; color: darkgreen; padding-top: 10px; font-size: 18px"></div>
      </div>
    </td>
    <td style="width: 25%; padding: 10px">
      <div style="padding: 20px; border: 2px solid #ccc; text-align: center">
        <div style="color:...

JavaScript

ko.applyBindings({
  Seller: 'ACME Corporation',
  SellerContactDetails: ['1313 Webfoot Walk', 'Duckburg', 'Calisota'],
  SellerLogoUrl: 'business-logo?FileID=c6545179-0ba4-4cda-81a2-f07874f81a1e',
  DueDate: '24/07/2014',
  IssueDate: '27/06/2014',
  Number: '1001',
  Customer: 'Brilliant Industries',
  CustomerAddressLines: ['1 York Street', 'Metropolis'],
  Summary: 'Professional services',
  Notes: ['Please by due date.', 'Thank you for your business.'],
  LineItems: [{
    Description: ['Financial planning'],
    Qty: '4',
    UnitPrice: '100.00',
    Discount: '',
    Tax: 'VAT 10%',
    LineTotal: '400.00'
  }, {
    Description: ['Tax consulting'],
    Qty: '2',
    UnitPrice: '120.00',
    Discount: '',
    Tax: 'VAT 10%',
    LineTotal: '240.00'
  }],
  LineItemsIncludeTax: false,
  Subtotal: '640.00',
  TaxComponents: [{
    Name: 'VAT 10%',
    Amount: '64.00'
  }],
  Total: '704.00'
});