Created
October 7, 2021 12:07
-
-
Save ChromeOrange/d9a9b2d6a22104c6951f107184857f23 to your computer and use it in GitHub Desktop.
Example PDF Invoice HTML
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <style> | |
| body { | |
| font-family: "DejaVu Sans", "DejaVu Sans Mono", "DejaVu", sans-serif, monospace; | |
| font-size: 11px; | |
| } | |
| @page { | |
| margin: 480px 50px 100px 50px; | |
| } | |
| #header { | |
| position: fixed; | |
| left: 0px; | |
| top: -460px; | |
| right: 0px; | |
| height: 480px; | |
| text-align: center; | |
| } | |
| #footer { | |
| position: fixed; | |
| left: 0px; | |
| bottom: -150px; | |
| right: 0px; | |
| height: 100px; | |
| font-size:11px; | |
| text-align: center; | |
| } | |
| #content { | |
| font-size:10px; | |
| } | |
| #logo img { | |
| max-width:340px; | |
| } | |
| .barcode { | |
| text-align:center; | |
| width: 50%; | |
| } | |
| .page_break { | |
| page-break-before: always; | |
| } | |
| .shop_table { | |
| } | |
| .orderdetails { | |
| } | |
| .ordercontent { | |
| } | |
| .pdf_table_row { | |
| } | |
| .pdf_table_cell { | |
| } | |
| .pdf_table_row_title { | |
| } | |
| .pdf_table_cell_title { | |
| } | |
| .pdf_table_row_heading { | |
| } | |
| .pdf_table_cell_heading { | |
| } | |
| .pdf_table_row_odd { | |
| } | |
| .pdf_table_row_even { | |
| } | |
| .pdf_table_cell_odd { | |
| } | |
| .pdf_table_cell_even { | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="header"> | |
| <table table width="100%"> | |
| <tr> | |
| <td valign="top" width="50%" id="logo"><img src="/var/www/woocommerce-opayo.com/html/wp-content/uploads/2021/08/logo-1.png" /></td> | |
| <td valign="top" width="50%" id="company-info">Billy's Bits and Bobs<br /><br /></td> | |
| </tr> | |
| </table> | |
| <table table width="100%"> | |
| <tr> | |
| <td width="20%" valign="top" id="invoicenumberheading">Invoice No.</td> | |
| <td width="30%" valign="top" id="invoicenumber">BBB-00167-WEB</td> | |
| <td width="20%" valign="top" id="ordernumberheading">Order No.</td> | |
| <td width="30%" valign="top" id="ordernumber">663</td> | |
| </tr> | |
| <tr> | |
| <td valign="top" id="invoicedateheading">Invoice Date</td> | |
| <td valign="top" id="invoicedate">07 Oct 2021</td> | |
| <td valign="top" id="orderdateheading">Order Date</td> | |
| <td valign="top" id="orderdate">07 Oct 2021</td> | |
| </tr> | |
| <tr> | |
| <td valign="top" id="paymethodheading">Payment Method</td> | |
| <td valign="top" id="paymethod">Credit Card Via Opayo</td> | |
| <td valign="top" id="shipmethodheading"></td> | |
| <td valign="top" id="shipmethod"></td> | |
| </tr> | |
| <tr> | |
| <td valign="top" colspan="2" id="billingdetails"> | |
| <h3>Billing Details</h3> | |
| Test First Name Test Last Name<br/>88 Test Street<br/>Townville<br/>Test County<br/>ST41 2PQ<br /> | |
| 01234 565656<br /> | |
| andrew@chromeorange.co.uk | |
| </td> | |
| <td valign="top" colspan="2" id="shippingdetails"> | |
| <h3>Shipping Details</h3> | |
| Test First Name Test Last Name<br/>88 Test Street<br/>Townville<br/>Test County<br/>ST41 2PQ | |
| </td> | |
| </tr> | |
| </table> | |
| </div> | |
| <div id="footer"> | |
| <div class="copyright">Registered Name : Billy's Bits and Bobs </div> | |
| <div class="copyright">Company Number : 0123456789 VAT Number : 9876543210</div> | |
| </div> | |
| <div id="content"> | |
| <table class="shop_table orderdetails" width="100%"> | |
| <thead> | |
| <tr class="pdf_table_row pdf_table_row_title"> | |
| <th colspan="7" align="left" class="pdf_table_cell pdf_table_cell_title"> | |
| <h2>Order Details</h2> | |
| </th> | |
| </tr> | |
| <tr class="pdf_table_row pdf_table_row_heading"> | |
| <th class="pdf_table_cell pdf_table_cell_heading" width="5%" valign="top" align="right">Qty</th> | |
| <th class="pdf_table_cell pdf_table_cell_heading" width="50%" valign="top" align="left">Product</th> | |
| <th class="pdf_table_cell pdf_table_cell_heading" width="9%" valign="top" align="right">Price Ex</th> | |
| <th class="pdf_table_cell pdf_table_cell_heading" width="9%" valign="top" align="right">Total Ex.</th> | |
| <th class="pdf_table_cell pdf_table_cell_heading" width="7%" valign="top" align="right">Tax</th> | |
| <th class="pdf_table_cell pdf_table_cell_heading" width="10%" valign="top" align="right">Price Inc</th> | |
| <th class="pdf_table_cell pdf_table_cell_heading" width="10%" valign="top" align="right">Total Inc</th> | |
| </tr> | |
| </thead> | |
| </table> | |
| <table width="100%" class="shop_table ordercontent"> | |
| <tbody> | |
| <tr class="pdf_table_row pdf_table_row_odd"> | |
| <td class="pdf_table_cell pdf_table_cell_odd" valign="top" width="5%" align="right">1 x</td> | |
| <td class="pdf_table_cell pdf_table_cell_odd" valign="top" width="50%">Subscription</td> | |
| <td class="pdf_table_cell pdf_table_cell_odd" valign="top" width="9%" align="right"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">£</span>5.00</bdi></span></td> | |
| <td class="pdf_table_cell pdf_table_cell_odd" valign="top" width="9%" align="right"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">£</span>5.00</bdi></span></td> | |
| <td class="pdf_table_cell pdf_table_cell_odd" valign="top" width="7%" align="right"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">£</span>1.00</bdi></span></td> | |
| <td class="pdf_table_cell pdf_table_cell_odd" valign="top" width="10%" align="right"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">£</span>6.00</bdi></span></td> | |
| <td class="pdf_table_cell pdf_table_cell_odd" valign="top" width="10%" align="right"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">£</span>6.00</bdi></span></td> | |
| </tr></tbody></table> | |
| <div class="barcode"></div> | |
| <table width="100%"> | |
| <tr> | |
| <td width="60%" valign="top" id="ordernotes"> | |
| </td> | |
| <td width="40%" valign="top" align="right"> | |
| <table width="100%" id="ordertotals"> | |
| <tr class="pdfordertotals_row"> | |
| <td align="right" class="pdfordertotals_cell"><strong>Subtotal:</strong></td> | |
| <td align="right" class="pdfordertotals_cell"><strong><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">£</span>5.00</bdi></span></strong></td> | |
| </tr> | |
| <tr class="pdfordertotals_row"> | |
| <td align="right" class="pdfordertotals_cell"><strong>VAT:</strong></td> | |
| <td align="right" class="pdfordertotals_cell"><strong><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">£</span>1.00</bdi></span></strong></td> | |
| </tr> | |
| <tr class="pdfordertotals_row"> | |
| <td align="right" class="pdfordertotals_cell"><strong>Total:</strong></td> | |
| <td align="right" class="pdfordertotals_cell"><strong><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">£</span>6.00</bdi></span></strong></td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| </table> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment