<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="invoice"> <div class="invoice overflow-auto"> <div style="min-width: 600px"> <header> <div class="row"> <div class="col"> <a target="_blank" href="https://hm-electronics.nl"> <img src="https://test8.8pikseli.pl/web/images/logo.svg" data-holder-rendered="true" /> </a> </div> <div class="col company-details"> <h2 class="name"> <a target="_blank" href="https://hm-electronics.nl"> HM-Electronics </a> </h2> <div>Kostverlorenstraat 122</div> <div>2042PL Zandvoort, Nederland</div> <div>info@hm-electronics.nl</div> </div> </div> </header> <main> <div class="row contacts"> <div class="col invoice-to"> <div class="text-gray-light">Verkocht aan:</div> <h2 class="to">Rit Hai</h2> <div class="address">Galileostraat 176<br> 8721GV Amsterdam<br> Nederland</div> <div class="email"><a href="mailto:john@example.com">john@example.com</a></div> <div class="phone">0639654522</div><br> </div> <div class="row contacts"> <div class="col invoice-to"> <div class="text-gray-light">Verzend naar:</div> <h2 class="to">Rit Hai</h2> <div class="address">Koststraat 32<br> 9832XC Rotterdam<br> Nederland</div> </div> <div class="col invoice-details"> <h1 class="invoice-id">Factuurnummer: 290/2020</h1> <div class="order-id">Bestelling nummer: 2020/02/7295</div> <div class="date">Orderdatum: 24/02/2020</div> </div> </div> <table border="0" cellspacing="0" cellpadding="0"> <thead> <tr> <th class="text-center">Aantal</th> <th class="text-center">Productnaam</th> <th class="text-center">Artikelnummer</th> <th class="text-center">Prijs per stuk<br>(excel. BTW)</th> <th class="text-center">BTW</th> <th class="text-center">Totaal<br>(excl. BTW)</th> <th class="text-center">Totaal<br>(BTW)</th> <th class="text-center">Totaal<br>(incl. BTW)</th> </tr> </thead> <tbody> <tr> <td class="qty">2 stuks</td> <td class="product-name"><h3> CAT bouwmachine - graafmachine sleutel contactsleutel (003) </h3> </td> <td class="product id">SBC03</td> <td class="brutto one">€ 8.26</td> <td class="vat">21%</td> <td class="brutto-price-for-all">€ 16.52</td> <td class="vat">21%</td> <td class="total">$0.00</td> </tr> </tbody> <tfoot> <tr> <td colspan="3"></td> <td colspan="2">SUBTOTAL</td> <td>€ 16.52</td> <td>€</td> <td>$5,200.00</td> </tr> <tr> <td colspan="3"></td> <td colspan="2">Verzending en Verwerking PostNL Briefpost - Nederland</td> <td>€ 1.65</td> <td>€ 0.35</td> <td>€ 2.00</td> </tr> <tr> <td colspan="3"></td> <td colspan="2">GRAND TOTAL</td> <td>$6,500.00</td> <td>$6,500.00</td> <td>$6,500.00</td> </tr> </tfoot> </table> <div class="thanks">Thank you!</div> <div class="notices"> <div>NOTICE:</div> <div class="notice">A finance charge of 1.5% will be made on unpaid balances after 30 days.</div> </div> </main> <footer> Invoice was created on a computer and is valid without the signature and seal. </footer> </div> <!--DO NOT DELETE THIS div. IT is responsible for showing footer always at the bottom--> <div></div> </div> </div>

#invoice{ padding: 30px; } .invoice { position: relative; background-color: #FFF; min-height: 680px; padding: 15px } .invoice header { padding: 10px 0; margin-bottom: 20px; border-bottom: 1px solid #3989c6 } .invoice .company-details { text-align: right } .invoice .company-details .name { margin-top: 0; margin-bottom: 0 } .invoice .contacts { margin-bottom: 20px } .invoice .invoice-to { text-align: left } .invoice .invoice-to .to { margin-top: 0; margin-bottom: 0 } .invoice .invoice-details { text-align: right } .invoice .invoice-details .invoice-id { margin-top: 0; color: #3989c6 } .invoice main { padding-bottom: 50px } .invoice main .thanks { margin-top: -100px; font-size: 2em; margin-bottom: 50px } .invoice main .notices { padding-left: 6px; border-left: 6px solid #3989c6 } .invoice main .notices .notice { font-size: 1.2em } .invoice table { width: 100%; border-collapse: collapse; border-spacing: 0; margin-bottom: 20px } .invoice table td,.invoice table th { padding: 15px; background: #eee; border-bottom: 1px solid #fff } .invoice table th { white-space: nowrap; font-weight: 400; font-size: 16px } .invoice table td h3 { margin: 0; font-weight: 400; color: #3989c6; font-size: 1.2em } .invoice table .qty,.invoice table .total,.invoice table .unit { text-align: center; font-size: 1.2em } .product id { text-align: center; } .invoice table .no { color: #fff; font-size: 1.6em; background: #3989c6 } .invoice table .unit { background: #ddd } .invoice table .total { background: #3989c6; color: #fff } .invoice table tbody tr:last-child td { border: none } .invoice table tfoot td { background: 0 0; border-bottom: none; white-space: nowrap; text-align: right; padding: 10px 20px; font-size: 1.2em; border-top: 1px solid #aaa } .invoice table tfoot tr:first-child td { border-top: none } .invoice table tfoot tr:last-child td { color: #3989c6; font-size: 1.4em; border-top: 1px solid #3989c6 } .invoice table tfoot tr td:first-child { border: none } .invoice footer { width: 100%; text-align: center; color: #777; border-top: 1px solid #aaa; padding: 8px 0 } @media print { .invoice { font-size: 11px!important; overflow: hidden!important } .invoice footer { position: absolute; bottom: 10px; page-break-after: always } .invoice>div:last-child { page-break-before: always } }

$('#printInvoice').click(function(){ Popup($('.invoice')[0].outerHTML); function Popup(data) { window.print(); return true; } });