I needed to create a custom invoice that was easily printable for a Magento store. The built in PDF generation system (at least in earlier versions of Magento) is not very flexible and did not meet my requirements. After some searching about I found some code contributed by another Magento user which I modified to meet my requirements and present here as a free Magento module for anyone looking for a similar solution.

The solution looks great – see example below and contains some nice touches including the option to create a watermark graphic on the invoice and a comments box.

DOWNLOAD (github)

Tested with Magento CE 1.3.3 and 1.7.0.0

download version 0.13 (last updated 26-07-2013) of the extension here

16.08.2012 – fixed to show invoice number if one exists
07.11.2012 – Added option to show images. Product loaded in invoice.phtml to enable extraction of other product attributes to show on invoice.

26.07.2013 – Add VAT to invoice price option

WISHLIST

• Add an Email button to email the HTML invoice directly to the customer.

Installation

To install, simply download and extract the source files and copy to your Magento root folder. If you use a customised admin template be sure to change the path for the adminhtml design templates to match your installation, the default path is app/design/adminhtml/default/default/template.

Refresh your Magento system cache, log out and back into admin to enable the module and confguration area.

Configuration

The extension is configurable under system > configuration > my extensions > html invoice. The configuration consists of some options to help customise the html invoice.

LOGO URL
Enter the URL to an image to use as a logo to appear on the invoice. Default if blank is no logo.

WATERMARK URL
Enter the URL to a watermark image if you want to use one. Default if left blank is no watermark image.

HEADER TEXT
Enter the text (or html) you want to appear at in the header of the invoice, your company name and address for example. Default is no header

SHOW COMMENTS BOX
Select Yes to enable the comments box on the invoice, this lets you type a short comment that will appear on the printed invoice.

FOOTER TEXT
Enter the text (or html)  you want to appear on the bottom of the invoice. Default is no footer text.

ADD VAT / TAX TO PRICING
Set this to YES and then specify your VAT rate as an integer i.e. 19 for 19% VAT, this will add VAT to the invoice pricing at the rate you specify.

Save any options you have changed and goto an order in Sales > Orders. Select an order to view and you should see a new PRINT button on the top right hand side of the order view screen.

New Print button in Sales > Orders > Order view

Clicking the print button will open the HTML invoice for this order in a new browser tab. An invoice example is below.

Customiseable, Printable HTML Invoice for Magento

To customise the invoice further just take a look at the code in

app/design/adminhtml/default/default/template/paj/htmlinvoice/invoice.phtml

This contains all the formatting for the invoice and is fairly easy to modify for your exact requirements.

To extract individual product information to display on the invoice insert the following within the foreach loop

$_product = Mage::getModel('catalog/product')->load($_item->getProductId());

Now you can echo out product information e.g. custom attributes

$_product->getMy_custom_attribute();

Acknowledgments again to the original developer for the bulk of the code used in this solution.