{"id":604,"date":"2020-11-21T09:13:13","date_gmt":"2020-11-21T09:13:13","guid":{"rendered":"https:\/\/www.gyanipandit.com\/en\/?page_id=604"},"modified":"2020-11-21T10:02:32","modified_gmt":"2020-11-21T10:02:32","slug":"invoice-generator","status":"publish","type":"page","link":"https:\/\/gyanipandit.com\/en\/invoice-generator\/","title":{"rendered":"Invoice generator"},"content":{"rendered":"\n<p>Invoice Generator<\/p>\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n<title>Invoice Generator<\/title>\n<meta charset=utf-8>\n<meta content='text\/html; charset=UTF-8' http-equiv='Content-Type'\/>\n<meta name=viewport content=\"width=device-width, initial-scale=1\">\n<link rel=stylesheet href=https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.0\/css\/bootstrap.min.css>\n<script src=https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js><\/script>\n<script src=https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.16.0\/umd\/popper.min.js><\/script>\n<script src=https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.0\/js\/bootstrap.min.js><\/script>\n<script src=https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js><\/script>\n<script src=https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.1\/jquery.min.js><\/script>\n<script src=https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/0.4.1\/html2canvas.js><\/script>\n<script src=https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/1.0.272\/jspdf.debug.js><\/script>\n<style type=text\/css>*{padding:0;margin:0}body{font-family:sans-serif}.container{width:100%}#invoicecontainet{border:1px solid gray;background-color:#80808021;padding:15px;box-shadow:5px 10px #888}#btnline{width:958px;height:3px;background-color:blue}input{border-top-style:hidden;border-right-style:hidden;border-left-style:hidden;border-bottom-style:hidden}#printable{display:block}@media print{#non-printable{display:none}#printable{display:block}}@media print{body *{visibility:show;-webkit-print-color-adjust:exact!important;color-adjust:exact}#section-to-print,#section-to-print *{visibility:visible}#section-to-print{position:relative;left:0;top:0}}<\/style>\n<\/head>\n<body oncontextmenu=\"return false\">\n<div class=invoice-data-container>\n<div class=container>\n<div id=invoicecontainet>\n<div id=non-printable>\n<div id=header-btn class=\"pt-2 pl-2\">\n<div class=\"btn-group btn-group-edit\" role=group aria-label=\"view edit Invoice\">\n<button type=button onclick=window.print() class=\"btn-btn-view btn-lg\">Preview<\/button>\n<a href=invoice.html><button type=button class=\"btn-btn-edit btn-lg active\">Edit<\/button><\/a>\n<\/div>\n<\/div>\n<\/div>\n<div id=printable>\n<form name=invoicefrom action method=post id=invoicefrom>\n<div class=row>\n<p id=btnline><\/p>\n<div class=col-md-10>\n<div id=invoice-title-contain>\n<div class=left-div style=float:left>\n<div id=\"invoice-title p-5\">\n<input type=text id=invoice-title name=invoice-title placeholder=Invoice value=Invoice style=height:50px class=pl-5>\n<\/div>\n<\/div>\n<div class=right-div style=float:right>\n<div class=invoice-logo>\n<div class=photo-drop style=\"border:1px solid black;width:200px;height:100px\">\n<div class=photo-drop-zone>\n<img id=blah src=# alt=\"your image\"\/>\n<div id=non-printable>\n<input type=file class=inputfile name=myfile id=myfile accept=image\/* onchange=readURL(this) \/>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"row mt-2\">\n<div class=col-md-6>\n<div class=\"invoice-from-div mt-3 mp-3\">\n<div id=left-from-content>\n<h2>From<\/h2>\n<div class=input-wrapper-div>\n<label for=invoice-compuny-name>Name<\/label>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n<input type=text id=invoice-compuny-name name=invoice-compuny-name placeholder=\"Business Name\" value=\"Business Name\">\n<\/div>\n<div class=input-wrapper-div>\n<label for=invoice-compuny-email>Email<\/label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n<input type=email id=invoice-compuny-email name=invoice-compuny-email placeholder=name@business.com value=name@business.com>\n<\/div>\n<div class=input-wrapper-div>\n<label for=invoice-compuny-address>Address<\/label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n<input type=text id=invoice-compuny-address name=invoice-compuny-address placeholder=Street value=Street>\n<\/div>\n<div class=input-wrapper-div>\n<label for=invoice-compuny-phone>Phone<\/label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n<input type=tel id=invoice-compuny-phone name=invoice-compuny-phone placeholder=\"            \" value=\"             \">\n<\/div>\n<div class=input-wrapper-div>\n<label for=invoice-compuny-businessno>Buisness NO<\/label>\n<input type=text id=invoice-compuny-businessno name=invoice-compuny-businessno placeholder=\"e.g 123-45-6584\" value=\"e.g 123-45-6584\">\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=col-md-6>\n<div class=\"invoice-bill-div mt-3 mp-3\">\n<div id=right-bill-content>\n<h2>Bill To<\/h2>\n<div class=input-wrapper-div>\n<label for=invoice-client-name>Name<\/label>\n&nbsp;&nbsp;\n<input type=text id=invoice-client-name name=invoice-client-name placeholder=\"Client Name\" value=\"Clien Name\">\n<\/div>\n<div class=input-wrapper-div>\n<label for=invoice-clien-email>Email<\/label>\n&nbsp;&nbsp;&nbsp;\n<input type=email id=invoice-client-email name=invoice-client-email placeholder=name@client.com value=name@client.com>\n<\/div>\n<div class=input-wrapper-div>\n<label for=invoice-client-address>Address<\/label>\n<input type=text id=invoice-client-address name=invoice-client-address placeholder=Street value=Street>\n<\/div>\n<div class=input-wrapper-div>\n<label for=invoice-client-phone>Phone<\/label>\n&nbsp;&nbsp;\n<input type=tel id=invoice-compuny-phone name=invoice-client-phone placeholder=\"98 3652 1478\" value=\"98 3652 1478\">\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr>\n<div class=row>\n<div class=col-md-10>\n<div id=thirdsection class=mt-2>\n<div class=\"invoice-detail-terms content-block mp-3\">\n<div class=\"input-wrapper-div mp-3\">\n<label for=invoice-number>Number<\/label>\n&nbsp;\n<input type=text id=invoice-number name=invoice-number value=INV0000 placeholder=INV0000 maxlength=16 autocomplete=off>\n<\/div>\n<div class=\"input-wrapper-div mp-3\">\n<label for=invoice-date>Date<\/label>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n<input type=text id=invoice-date name=invoice-date class=invoice-detail-date value>\n<\/div>\n<div class=\"input-wrapper-div form-group mp-3\">\n<label for=invoice-terms>Terms<\/label>\n&nbsp;&nbsp;&nbsp;&nbsp;\n<input type=text name=invoice-terms id=invoice-terms placeholder=2days onkeyup=balancedue()>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"row item-table-title\">\n<div class=\"col-md-6 bg-dark\">\n<div class=invoce-item-summary>\n<input type=text name=item-summaryone id=item-summary value=Item class=\"input-label form-control bg-dark\" style=color:white>\n<\/div>\n<\/div>\n<div class=\"col-md-6 bg-dark\">\n<div class=invoce-rate-summary>\n<input type=text name=rate-summaryone id=rate-summary value=Rate class=\"input-label form-control bg-dark\" style=width:140px;float:left;color:white>\n<\/div>\n<div class=invoce-quantity-summary>\n<input type=text name=quantity-summaryone id=quantity-summary value=Quantity class=\"input-label form-control bg-dark\" style=width:140px;float:left;color:white>\n<\/div>\n<div class=invoce-amount-summary>\n<input type=text name=amount-summaryone id=amount-summary value=Amount class=\"input-label form-control bg-dark\" style=width:140px;float:left;color:white>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"row item-row-add\" id=item-add-row>\n<div class=col-md-6>\n<div class=item-left-col id=item-left-col>\n<div class=invoce-item-summary>\n<input type=text name=item-summary id=item-summary placeholder=\"Item Description\" class=\"input-label form-control\">\n<\/div>\n<\/div>\n<div id=left-col-copy name=copydiv><\/div>\n<\/div>\n<div class=\"col-md-6 item-right-col\" id=item-right-col>\n<div class=invoce-rate-summary>\n<div class=right-col-1 id=right-col-1>\n<input type=text name=rate-summary id=rate-summary placeholder=50.00 class=\"input-label form-control\" style=width:140px;float:left>\n<\/div>\n<\/div>\n<div class=invoce-quantity-summary>\n<div class=right-col-2 id=right-col-2>\n<input type=text name=quantity-summary id=quantity-summary placeholder=5 class=\"input-label form-control\" style=width:140px;float:left>\n<\/div>\n<\/div>\n<div class=invoce-amount-summary>\n<div class=right-col-3 id=right-col-3>\n<input type=text name=amount-summary id=amount-summary class=\"input-label form-control amountadd\" placeholder=250.00 onkeyup=amountsum() style=width:140px;float:left>\n<\/div>\n<\/div>\n<div id=right1-col-copy name=right1-col-copy style=float:left><\/div>\n<\/div>\n<div id=non-printable>\n<div class=\"add-button ml-3 p-3\">\n<button type=button id=invoice-add-btn onclick=duplicate()>+AddMore<\/button>\n<button type=button class=remove>-DeleteOne<\/button>\n<\/div>\n<\/div>\n<\/div>\n<div class=row>\n<div class=col-md-6>\n<\/div>\n<div class=col-md-6>\n<div class=\"invoice-bill-show p-3 mt-3\">\n<div class=invoice-subtotal>\n<label for=subtotal-show>Subtotal<\/label>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n<input type=text placeholder=250.00 name=subtotal-show id=subtotal-show>\n<\/div>\n<div class=invoice-tax>\n<label for=tax-show>Tax<\/label>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n<input type=text name=tax-show id=tax-show placeholder=18>\n<\/div>\n<div class=invoice-total>\n<label for=total-show>Total<\/label>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n<input type=text name=total-show id=total-show placeholder=0.00>\n<\/div>\n<div class=invoice-due>\n<label for=due-show>Balance Due<\/label>\n&nbsp;\n<input type=text name=due-show id=due-show placeholder=0.00>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div id=non-printable>\n<div class=\"row mt-5\">\n<div class=col-md-4>\n<div id=tax-invoice>\n<h3>Tax<\/h3>\n<hr style=\"border:1px solid black\">\n<div id=invoice-type-div class=p-1>\n<label for=invoice-type>Type<\/label>&nbsp;\n<select id=invoice-type class=p-1>\n<option value=1>None<\/option>\n<option value=2>Per item<\/option>\n<option value=3>Deducted<\/option>\n<option value=4>Ontotal<\/option>\n<\/select>\n<\/div>\n<div id=invoice-label-div class=p-1>\n<label for=invoice-label>Label<\/label>\n<input type=text name=invoice-label id=invoice-label value=Tax placeholder=Tax style=width:100px>\n<\/div>\n<div id=invoice-rate-div class=p-1>\n<label for=invoice-rate>Rate<\/label>&nbsp;\n<input type=number id=invoice-rate name=invoice-rate placeholder=0.00 style=width:100px onkeyup=taxrate()>\n<\/div>\n<div id=invoice-select-div class=p-1>\n<button type=button class=btnadd onclick=buttonsHandler(this) style=width:50px;font-size:10px>Inclusive<\/button>\n<button type=button class=btnadd onclick=buttonsHandler(this) style=width:50px;font-size:10px>Exclusive<\/button>\n<\/div>\n<\/div>\n<\/div>\n<div class=col-md-4>\n<h3>DISCOUNT<\/h3>\n<hr style=\"border:1px solid black\">\n<div id=invoice-discount-div class=p-1>\n<label for=invoice-discount-type>Type<\/label>\n<select id=invoice-discount-type class=p-1>\n<option value=1>None<\/option>\n<option value=2>Per item<\/option>\n<option value=3>Deducted<\/option>\n<option value=4>Ontotal<\/option>\n<\/select>\n<\/div>\n<\/div>\n<div class=col-md-4>\n<h3>CURRENCY<\/h3>\n<hr style=\"border:1px solid black\">\n<div id=invoice-currency-div class=p-1>\n<select id=invoice-currency-type style=width:200px class=p-2>\n<option value=1>India<\/option>\n<option value=2>US<\/option>\n<option value=3>UK<\/option>\n<option value=4>Other<\/option>\n<\/select>\n<\/div>\n<\/div>\n<\/div>\n<div class=row id=hiderow>\n<div class=col-md-12>\n<div id=btn style=text-align:center>\n<input type=button id=hidebtn value=CreateInvoice>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"row p-3\" id=showrow style=display:none>\n<div class=col-md-6>\n<div style=float:right>\n<p><pre>\n      If You Want to Save Data In PDF Format.\n      Step1: click on print Invoice.\n      Step2: Click on Destination.\n      Step3: Select Option Save As PDF.\n      Step4: Click On Save Button.\n    <\/pre><\/p>\n<\/div>\n<\/div>\n<div class=col-md-4>\n<div style=float:left>\n<button type=button id=printbtn onclick=printpage() class=\"btn-block btn-sm\">Print Invoice<\/button>\n<\/div>\n<\/div>\n<\/div>\n<\/form>\n<\/div>\n<\/div>\n<a id=gyanipandit href=https:\/\/www.gyanipandit.com\/>&#169;<\/a>\n<\/div>\n<\/div>\n<script type=text\/javascript>function printpage(){window.print();}\n$('#saveaspdf').click(function(){let doc=new jsPDF('p','pt','a4');doc.addHTML(document.body,function(){doc.save('invoice.pdf');});})\nn=new Date();y=n.getFullYear();m=n.getMonth()+1;d=n.getDate();var date=d+\"\/\"+m+\"\/\"+y;document.getElementById(\"invoice-date\").value=date;function balancedue()\n{var due=getElementById('invoice-terms').value;var showdue=due;document.getElementById('due-show').value=showdue;}\nfunction amountsum()\n{var sum=0;var array_field=document.getElementsByClassName('amountadd');for(var i=0;i<array_field.length;i++)\n{var value=Number(array_field[i].value);if(!isNaN(value))sum+=value;}\ndocument.getElementById(\"subtotal-show\").value=sum;}\nfunction readURL(input){if(input.files&#038;&#038;input.files[0]){var reader=new FileReader();reader.onload=function(e){$('#blah').attr('src',e.target.result).width(200).height(100);};reader.readAsDataURL(input.files[0]);}}\nvar i=0;var leftitemcol=document.getElementById('item-left-col');var copyleft=document.getElementById('left-col-copy');var rcol1=document.getElementById('right-col-1');var copyr1=document.getElementById('right1-col-copy');var rcol2=document.getElementById('right-col-2');var copyr2=document.getElementById('right2-copy');var rcol3=document.getElementById('right-col-3');var copyr3=document.getElementById('right3-copy');function duplicate()\n{var cloneleft=leftitemcol.cloneNode(true);cloneleft.class=\"item-left-col\"+i\ncopyleft.appendChild(cloneleft);var cloner1=rcol1.cloneNode(true);cloner1.class=\"right-col-1\"+i\ncloner1.setAttribute(\"style\",'float:left');copyr1.appendChild(cloner1);var cloner2=rcol2.cloneNode(true);cloner2.class=\"right-col-2\"+i\ncloner2.setAttribute(\"style\",'float:left');copyr1.appendChild(cloner2);var cloner3=rcol3.cloneNode(true);cloner3.class=\"right-col-3\"+i\ncloner3.setAttribute(\"style\",'float:left');copyr1.appendChild(cloner3);}\n$('.item-row-add').on('click','.remove',function()\n{$('.remove').closest('.item-row-add').find('.item-left-col').not(':first').last().remove();$('.remove').closest('.item-row-add').find('.right-col-1').not(':first').last().remove();$('.remove').closest('.item-row-add').find('.right-col-2').not(':first').last().remove();$('.remove').closest('.item-row-add').find('.right-col-3').not(':first').last().remove();});function buttonsHandler(evt)\n{if(evt.textContent==\"Inclusive\")\n{let amount1=parseFloat(document.getElementById('subtotal-show').value);let gstval1=parseFloat(document.getElementById('invoice-rate').value);let gross_amount1=amount1;let net_amount1=(100*amount1)\/(100.0+parseFloat(gstval1));let gst_amount1=parseFloat(gross_amount1)-parseFloat(net_amount1);document.getElementById('tax-show').value=gst_amount1;document.getElementById('total-show').value=gross_amount1;}\nelse if(evt.textContent==\"Exclusive\")\n{let amount=parseFloat(document.getElementById('subtotal-show').value);let gstval=parseFloat(document.getElementById('invoice-rate').value);let net_amount=amount;let gst_amount=(amount*gstval)\/100;let gross_amount=parseFloat(net_amount)+parseFloat(gst_amount);document.getElementById('tax-show').value=gst_amount;document.getElementById('total-show').value=gross_amount;}}\n$(document).ready(function()\n{$(\"#printbtn\").click(function(e)\n{if($(\"#gyanipandit\").href=\"https:\/\/www.gyanipandit.com\/\"===\"https:\/\/www.gyanipandit.com\/\")\n{$(\"#showrow\").show();$(\"#hiderow\").hide();}\nelse\n{$(\"#showrow\").hide();$(\"#hidebtn\").show();$(\"#hidebtn\").text(\"opppss Something Missing\").show().fadeOut(1000);}});});$(document).ready(function()\n{$(\"#hidebtn\").click(function(e)\n{if(document.getElementById('gyanipandit'))\n{$(\"#showrow\").show();$(\"#hiderow\").hide();}\nelse\n{$(\"#showrow\").hide();$(\"#hidebtn\").show();$(\"#hidebtn\").text(\"opppss Something Missing\").show().fadeOut(1000);}});});document.addEventListener(\"keydown\",function(e)\n{if(e.ctrlKey||e.keyCode==123&#038;&#038;(e.keyCode===67||e.keyCode===86||e.keyCode===85||e.keyCode===117)){e.stopPropagation();e.preventDefault();}});<\/script>\n<\/body>\n<\/html>\n\n\n\n<p>Thanks<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Invoice Generator Invoice Generator Preview Edit From Name &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Email&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Address&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Phone&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Buisness NO Bill To Name &nbsp;&nbsp; Email &nbsp;&nbsp;&nbsp; Address Phone &nbsp;&nbsp; Number &nbsp; Date &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Terms &nbsp;&nbsp;&nbsp;&nbsp; +AddMore -DeleteOne Subtotal &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Tax &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Total &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Balance Due &nbsp; Tax Type&nbsp; NonePer itemDeductedOntotal Label Rate&nbsp; Inclusive Exclusive DISCOUNT Type NonePer itemDeductedOntotal CURRENCY IndiaUSUKOther [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-604","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/gyanipandit.com\/en\/wp-json\/wp\/v2\/pages\/604","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gyanipandit.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gyanipandit.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/en\/wp-json\/wp\/v2\/comments?post=604"}],"version-history":[{"count":3,"href":"https:\/\/gyanipandit.com\/en\/wp-json\/wp\/v2\/pages\/604\/revisions"}],"predecessor-version":[{"id":611,"href":"https:\/\/gyanipandit.com\/en\/wp-json\/wp\/v2\/pages\/604\/revisions\/611"}],"wp:attachment":[{"href":"https:\/\/gyanipandit.com\/en\/wp-json\/wp\/v2\/media?parent=604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}