Make an Editable/Printable HTML Invoice

Avatar of Chris Coyier
Chris Coyier on (Updated on )

I always like how in FreshBooks to edit invoices you literally just click and interact directly with a web page that looks like an invoice. I got to thinking it would be a kinda cool idea to create an editable HTML invoice of my own. This of course can’t do nearly all the awesome stuff FreshBooks can do, but it might be useful to some of you with extremely lightweight invoicing needs.

View Demo   Download Files

A bunch of <textarea>s

You can pre-set values of textarea elements in HTML just by putting text in between the opening and closing tag. So all it takes to make editable elements on a web page is use textareas. There are a additional bonuses to using textareas. For one, they are real form elements, so you could theoretically wrap this thing in form tag, put a submit button on it, and write some PHP to process it and do other stuff with it. For another, browsers tend to save the values of form elements. So if you, say, accidentally refreshed the page while working on it, the values you changed so far would be fine.

Why the heck would you do this with HTML and not with regular desktop software that is built for this kind of thing?

Good point, voice in my head. Well for one thing, this requires zero software other than your browser. If you put this up on a secret place on your website, you could theoretically access it from any computer in the world with internet access and a printer and spit out an invoice.

It’s pretty trivial to print to PDF these days, so ultimately while you are printing it, you could alternatively save to PDF which gives you a real document for emailing or archiving or whatever. It’s just a little hard to edit after the fact.

Clean Prints

If you want to get a totally clean print of this thing, check out these print options from Firefox:

Basically, turn off all the header/footer stuff and turn on the background color printing.

Update

Jon Neal has a version of this he updated to his liking as well.

You can use:

-webkit-print-color-adjust: exact;

In WebKit browsers to force, for instance, the black bar to print as seen on screen instead of it going white with gray letters.