Invoice Generator: Build a Compliant PDF Invoice in the Browser

By Sandeep · Tokyo, Japan

An invoice is a request for payment, and it fails for boring reasons: a missing invoice number, a due date that contradicts the contract, a tax line calculated on the wrong base. This invoice generator keeps those four panels in one place: the invoice header, the two address blocks, the item table, and the totals. You fill the fields, the arithmetic runs on every keystroke, and a PDF leaves the browser in the layout you picked. This guide covers what the tool does, how the math works, and where the limits sit.

What a browser invoice generator actually does

Three tabs, one document. The Details tab holds the invoice number, the issue date, the due date, and the currency selector, plus a company block and a client block with name, email, address, city, state, ZIP code, phone, and tax ID. The logo field accepts an image and stores it as a data URL, so it travels inside the saved record rather than pointing at a file on disk.

The Items tab is a table of description, quantity, and rate. Each row computes its own amount, and rows can be added or removed without touching the totals by hand. Below the table sit a discount field and a tax rate field, both applied to the running subtotal.

The Export tab picks a page size (A4 or Letter) and a layout (Classic, Modern, or Compact), then renders the PDF with jsPDF on the device. The file is named invoice-<invoiceNumber>.pdf.

Nothing leaves the machine. There is no account, no upload endpoint, and no server-side copy, which is the part that matters when the document carries a client's billing address and tax number.

The fields every invoice needs, and what each one is for

A complete business invoice carries nine elements, and the missing one is usually the reason a payment stalls while the client asks for the rest. The table maps them to the tool.

Two of these are structural rather than informational. A document without a unique number cannot be referenced, and a document without a due date has no deadline to miss. Both are editable fields here rather than derived values, so the numbering scheme stays under your control.

The arithmetic behind every total

The chain is short and every link is visible on screen.

Line amount equals quantity multiplied by rate. The subtotal is the sum of line amounts. The discount is a flat amount subtracted from the subtotal, not a percentage. Tax is charged on the discounted subtotal. The grand total is the subtotal minus the discount plus the tax.

Take an invoice with three lines: 12 hours at 150.00, 8 hours at 150.00, and 4 hours at 150.00. The amounts are 1800.00, 1200.00, and 600.00, so the subtotal is 3600.00. A discount of 200.00 leaves a taxable base of 3400.00. At 19 percent the tax is 646.00 and the total comes to 4046.00.

The ordering is not cosmetic. Apply tax to the gross subtotal and then subtract the discount, and the same invoice reports 684.00 of tax instead of 646.00 for an identical amount collected. Most tax authorities require the discount to reduce the taxable value, because the reduced figure is what the buyer actually paid for the goods or services. The generator applies tax after the discount for this reason.

Rounding deserves one sentence, because it compounds. Round each line amount to the currency's minor unit, sum the rounded values, and calculate tax once on the rounded base. A five-cent discrepancy on one invoice becomes sixty cents across a year of monthly billing, and the kind of error that makes a bookkeeper open a spreadsheet.

Numbering that survives an audit

A sequence is the cheapest control an invoice system has. The format carries three pieces of information: a prefix that says what the document is, a year or client tag, and a counter that never repeats.

INV-2026-0042 is the plain version. BLOOM-001 is the per-client series that suits a freelancer with three long-term accounts, because the client can see at a glance how many documents belong to them. Whichever scheme you pick, two rules hold: never reuse a number, and do not skip numbers without a note explaining the gap.

The tool keeps the number as a plain text field, which means the sequence lives in your process, not in a database counter. Keep the last number in a note, or set the default in the browser's saved copy and edit it forward. What the field guarantees is that the number printed on the PDF, the number in the saved record, and the number in the file name all match.

In the United States there is no federal invoice format, but there is a reporting threshold that changed for 2026: a client that pays 2000 dollars or more for services generally files Form 1099-NEC, up from 600 dollars for earlier payments. The invoice number is how that payment gets matched to your record, which is a second reason to keep the sequence clean.

One currency per document, always an ISO code

The currency selector lists 153 active ISO 4217 codes, sorted alphabetically from AED to ZWG. The default is USD, and the choice is stored as a preference, so the next invoice opens on the same code without a second visit to the list.

Print the three-letter code, never a bare symbol. A dollar sign is ambiguous across the United States, Canada, Australia, and a dozen other jurisdictions, and the client's accounting system reads the code, not the glyph. The PDF prints the code next to every amount, and the formatting follows the currency's own convention: JPY has no minor unit and shows no decimals, while KWD, BHD, and OMR carry three.

Multi-currency invoicing is a different problem, and this tool does not solve it. There is one code per document and no exchange rate field. If you bill in EUR and get paid in USD, the conversion belongs in your accounting records, and the gain or loss is taxable in most jurisdictions. Issue the invoice in the currency named in the contract, and record the settlement separately.

Discounts and tax: what a single rate can and cannot express

One flat discount and one tax percentage cover a large share of freelance and small-business billing, and they are exactly what this generator offers. The limits are worth naming, because they decide whether the tool fits the job.

A single tax rate cannot express a mixed-rate invoice. Germany taxes standard goods at 19 percent and books at 7 percent; an invoice that carries both needs per-line rates, and this one will not produce the split. The same applies to India's central and state GST, which must appear as separate heads, and to Canadian federal GST plus provincial tax.

A flat discount cannot express a percentage discount without arithmetic on your side. Five percent of a 5000.00 subtotal is 250.00, and that is the figure to type into the discount field. Line-level discounts are not supported either: the discount applies to the invoice, after the item table.

What the tool does handle cleanly is the ordinary case: services taxed at one rate, with a negotiated reduction. For a reverse-charge invoice inside the EU, set the tax rate to zero and print the wording in the notes field, including both VAT numbers in the two address blocks. For an export of services, the same zero rate with "Export of services, not subject to VAT" in the notes. A zero tax line with a stated reason is a better document than a silent omission, because the client's auditor can see the reasoning.

A4 or Letter: the page size decides the margins

A4 measures 210 by 297 millimetres; Letter measures 215.9 by 279.4 millimetres, which is wider and shorter. The difference looks trivial until a table with eight columns is printed, or until a client in another country opens the file and the bottom three lines land on a second page.

Both sizes are available in the export panel, and the PDF is generated at the selected size rather than scaled from the other. Text margins are set in the layout itself, so the totals block and the notes stay inside the printable area on both. If the invoice is for a client in the United States or Canada, Letter is the safer default; for Europe and most of the rest of the world, A4.

One practical note about printing: print at 100 percent scale, not "fit to page". Browsers and print drivers scale PDFs to fit the paper in the tray, and a Letter document printed on A4 with fit-to-page enabled comes out with margins that no longer match the layout.

Three layouts, one data model

Classic is the conventional arrangement: company block on the left, invoice metadata on the right, the item table across the middle, and the totals block underneath. Modern adds a coloured header band and right-aligns the totals so the eye lands on the amount due. Compact drops the logo box and tightens the type, which fits more lines on a single page.

All three render the same saved record. Switching layouts does not change a number on the invoice, and the PDF is generated fresh from the current state each time you export. The choice is about how much space the item table needs and how formal the client expects the document to look.

Where the invoices live, and what that costs you

Saved invoices are stored in IndexedDB under the key invoice-storage. The manager view lists them with a search box that matches the invoice number, the company, or the client, and a sort control for last modified, invoice number, or total. Each record can be duplicated, which is how a recurring monthly invoice gets its next number, and deleted after a confirmation step. A small stat strip counts invoices, sums their totals, and flags the ones whose due date has passed.

The trade is explicit: browser storage is not a backup. Clearing site data, using a private window, or switching machines ends the list. The PDF is the durable artifact. Download it when the invoice is final and keep it in a folder organised by year and client, because the retention rules are measured in years: at least three years in the United States under IRS guidance, five years after the filing deadline for UK sole traders, and six years for UK VAT records.

Worked example: from an empty form to a finished PDF

A freelance developer bills a client for a two-week sprint. Open the tool, click New Invoice, and the manager gives way to the form.

In Details: invoice number INV-2026-0042, issue date 2 November 2026, due date 16 November 2026 (Net 14), currency EUR. Company block: name, address, email, VAT number. Client block: company name, billing address, VAT number.

In Items: two rows. "Frontend sprint, week 1" with 40 hours at 85.00 gives 3400.00. "Frontend sprint, week 2" with 40 hours at 85.00 gives another 3400.00. Subtotal 6800.00. A goodwill discount of 300.00 leaves 6500.00 taxable. VAT at 20 percent adds 1300.00, and the total is 7800.00.

In Export: A4, Classic. The PDF downloads as invoice-INV-2026-0042.pdf with both address blocks, the two line items, the discount, the tax line labelled with its rate, and the total. Attach it to an email the same day the sprint ends, because payment terms run from the issue date and every day of delay adds a day to the wait.

Sandeep

Tokyo, Japan · SO reputation 19932 · Badges: 18🥇74🥈115🥉 · SO member since 2011