Vanilla JavaScript Projects

Project 76, E-commerce and business

Invoice Generator

Make a proper invoice in a minute. Type straight onto the page, the totals work themselves out, and printing gives you a clean PDF with no buttons in it.

$1,240
Main API
window.print + print CSS
Save
localStorage
Dependencies
None
Your browser
Checking

Edit the invoice

Click any text to change it. Add or remove lines, change tax, discount and currency. Print or save as PDF when you are done.

Invoice

Rima Chowdhury Design
12 Mill Lane, Bristol BS1 4XX
hello@rimadesign.example
Invoice no. INV-0042
Issued
Due
Bill to
Harbour Coffee Ltd
Attn: Tom Price
3 Quay Street, Bristol
Project
New brand identity and menu design, September
DescriptionQtyRateAmountRemove
Subtotal
Discount %
Tax %
Total
Payment by bank transfer to Rima Chowdhury, sort code 00-00-00, account 12345678. Thank you for your business.

How it works

  1. Type on the pageNames, addresses and descriptions are contenteditable, so the invoice itself is the form. Numbers use small inputs.
  2. One calc functionEvery change runs calc(): line amounts, subtotal, discount, tax and total, then saves everything to localStorage.
  3. Print CSS hides the restA print media query hides the whole page except the invoice, and removes buttons and input borders, so Save as PDF looks clean.
function calc() {
  const sub = rows.reduce((a, r) => a + r.qty * r.rate, 0);
  const discount = sub * discountPct / 100;
  const tax = (sub - discount) * taxPct / 100;
  total.textContent = money(sub - discount + tax);
  localStorage.setItem("invoice", JSON.stringify(data));
}
/* print only the invoice */
@media print {
  body * { visibility: hidden; }
  .invoice, .invoice * { visibility: visible; }
}