"Invoice html convert PDF"
Bootstrap 4.1.1 Snippet by imsachin

<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 ----------> <style> body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 1.5; color: #212529; text-align: left; background-color: #fff; } .first-table div { line-height: 2; } table { width: 100%; border-collapse: collapse; } table tr td { padding-left: 10px; } .line-items-container { margin: 70px 0; } .line-items-container th { text-align: center; } .line-items-container td { text-align: center; } table, th, td { padding: 10px; border: 1px solid black; border-collapse: collapse; } .line-items-container td { padding: 15px 0; } .line-items-container tbody tr:first-child td { padding-top: 25px; } .footer { margin-top: 100px; } .footer p { margin-top: 0px; margin-bottom: 5px; } td { font-size: 16px; font-weight: 400; line-height: 1.2; color: #212529; } </style> <table width="100%" cellpadding="0" cellspacing="0"> <tbody> <tr style="padding-left:10px;"> <td width="50" style="text-align: left;padding-left: 10px;"> <div><strong>Billing & Shipping Details</strong></div> </td> </tr> </tbody> </table> <table width="100%" cellpadding="0" cellspacing="0"> <tbody> <tr class="first-table" style="border: 1px solid #000;"> <td width="80"> <div> <strong>Invoice Date :</strong> </div> <div> <strong>Invoice No.:</strong> </div> <div> <strong>Customer Name :</strong> </div> <div> <strong>Customer GSTIN :</strong> </div> <div> <strong>Shipping Address :</strong> </div> <div> <strong>Billing Address :</strong> </div> <div> <strong>Email :</strong> </div> <div> <strong>Mob. No :</strong> </div> </td> <td width="250" style="text-align: left;"> <div> <div> 03-09-20 </div> <div> AB052545 </div> <div> ABC Pvt.Ltd. </div> <div> 09AAACE1390E1ZX </div> <div> Sector-62, Noida – 201301 (UP) </div> <div> c/o Sachin Singh, B-14, Sector-57, Noida-201301 (U.P.) </div> <div> <a href="#">abc@gmail.com</a> </div> <div> +91-999999999 </div> </div> </td> </tr> </tbody> </table> <table style="margin-top: 30px;"> <thead> <tr> <th style="text-align: left;">Payment Method:</th> <th style="text-align: left;">Shipping Method:</th> </tr> </thead> <tbody> <tr> <td style="text-align: left;"><strong>Online:</strong> (Payment Charges Rs. 0)</td> <td style=" text-align: left; "><strong>Shipping:</strong> Lockdown Express delivery (Total Shipping Charges Rs. 0)</td> </tr> </tbody> </table> <table class="line-items-container "> <thead> <tr> <th></th> <th>Brand</th> <th>Product</th> <th>SKUCode</th> <th>MRP(Rs.)</th> <th>Rate</th> <th>Qty</th> <th>Gross(Rs.)</th> <th>Disc%</th> <th>Disc.(Rs.)</th> <th>Taxable Value</th> <th>CGST</th> <th>Amt</th> <th>SGST</th> <th>Amt</th> <th>Net(Rs.)</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Orijen</td> <td>Six Fish 6kg</td> <td>BM060C</td> <td>5,099</td> <td>4,321</td> <td>4</td> <td>17,284</td> <td>13%</td> <td>2247</td> <td>15,038</td> <td>18%</td> <td>3,111</td> <td>9%</td> <td>1,111</td> <td>18,149</td> </tr> </tbody> </table> <!--footer-upper-section--> <div style="margin-top:20px;width: 100%;line-height:24px;text-align:right; "> <div> <strong>Sub-total: Rs. 35,171.6 </strong> </div> <div> <strong>GST Amount: Rs. 6,735.4 </strong> </div> <div> <strong>Shipping & Handling Charges: Rs. 0 </strong> </div> <div> <strong>Grand Total: Rs. 41,907 </strong> </div> </div> <!--footer section--> <div class="footer" style="margin-top: 100px;margin-bottom:20px;text-align:center; "> <div class="col-sm-12 text-center "> <h4 style="margin-top: 3px;margin-bottom: 3px;font-size: 30px;margin-top:3px;margin-bottom:3px; "><strong>ABC INDIA PRIVATE LIMITED </strong></h4> <p><b>REGD OFF: </b> D 303, 3RD FLOOR, SECTOR 3, Tilak Nagar NEW DELHI - 110078 </p> <p><strong>GSTIN:</strong> gffjgjfgdfgdfgfdgfgfgfg</p> <p><strong>CONTACT NO:</strong> +91-9999999999 </p> <p><strong>EMAIL ID:</strong> abc@gmail.com</p> </div> </div>

Related: See More


Questions / Comments: