Magento Free Extension

Customiseable, Printable, HTML Invoice for Magento – FREE Magento Extension

created June 11, 2012, last updated August 27, 2015.

.
closeThis post was last updated 5 years 5 months 13 days ago, some of the information contained here may no longer be actual and any referenced software versions may have been updated!

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) was not very flexible and did not meet my requirements.

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.

I have also developed a standalone invoice management solution that can run externally to magento. Click here for more.

DOWNLOAD (github)

Tested with Magento CE 1.3 -> 1.9.x

download here

 

WISHLIST

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

Installation

Modman

modman clone https://github.com/gaiterjones/magento-htmlinvoice

Manual

Download and extract the source files and copy to your Magento root folder.

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.

HTML Invoice for Magento
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
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 parts of the code used in this solution.

Comments

  1. Patrice Bois says:

    Hi,

    I just installed your Customiseable, Printable, HTML Invoice for Magento – FREE Magento Extension is there a way to display in the invoice preview the detailed taxes, here in canada we have two taxes…

    I want to display :

    Taxes 1 :
    Taxes 2 :

    Thanks

    • PAJ says:

      The invoice is easily customised with whatever information you want, if you have some experience with Magento and PHP you can edit the admin invoice template phtml file to add the values you require.

    • PAJ says:

      I don’t have a copy of the enterprise edition so I have not tested any of my modules with it, try it and let me know!

  2. alexander says:

    Very nice extension but i noticed a detail fault. On the invoice it say’s “invoice number” but actually i see and it is the order number.

    Invoice number: is ordernumber

    hope we can change that?

  3. alexander says:

    i am sorry that i was not clear to you, the change is ok (text), but i meant to retrieve the invoice number (value) instead of the ordernummer (value).
    i hope that you can do that? if you have the code to put it under the ordernumber or instead of the ordernumber that is okay too, i can put it in the invoice.phtml.
    at least super for your quick support.

  4. leo says:

    Hello PAJ!
    Your extension – simple and beautiful!
    Some trouble with multiple invoices for one order. It shows only latest invoice number, but I think it should be two different invoices.

      • leo says:

        I didn’t use multiple invoices. But I found it when did a small test for your extension. May be Invoice detail page should have your “Print” button too?

  5. Andrey says:

    Man, you’re great! I was too lazy to do it by myself and was waiting for somebody to do this for me! By the way, i recomend to publich it to magento connect and create paypal account for donations 😉

  6. jim says:

    I have to find a way to add images

    $imageCollection = Mage::getModel(‘catalog/product’)->load($item_id);
    foreach ($imageCollection->getMediaGalleryImages() as $_image);

    helper(‘catalog/image’)->init($imageCollection, ‘small_image’, $_image->getFile())->resize(100).'” />

    • PAJ says:

      I will add this to the wishlist, it should be fairly easy to achieve so that a product image appears next to each line of the invoice if required.

    • Luiz says:

      I put the pictures of the products as follows: (invoice.phtml)

      Add to the table header the following line:
      Imagem

      Look for the code in the file:

         foreach($_items as $_item) {

      if ($_item->getParentItem()) continue;

      Just below enter the following code:


      // ********************* inserir imagem ************************
      $item_id= $_item->getProductId();
      $image = Mage::getModel('catalog/product')->load($item_id);
      $imagePath = Mage::helper('catalog/image')->init($image, 'image')
      ->keepAspectRatio(true)
      ->keepFrame(false)
      ->resize(80,80)
      ->__toString();
      // *****************************************************************

      And just below the “echo” of table rows look for:


      echo ' ' . "\n" .
      </code
      and add below:

       ''."\n".

      Works Great!!
      I hope I have helped!

      • Luiz says:

        ops! the code did not show up! I’m sorry!

        In the picture are:

          Image

        the echo is:

          echo ‘ ‘. “\ n”.

        and below is:

        ‘ ‘. “\ n”.

      • Luiz says:

        oh no! not appeared again!
        I’ll take the ” tags to display the code. Sorry!

        In the picture are:

          td class = “dataTableHeadingContent”> Image ‘. “\ n”.

        and below is:

        ‘Td class = “dataTableContent” valign = “top”> ‘. “\ n”.

  7. Steve Parr says:

    I need to move the placement of the fields around to utilize my integrated labels stationery. Is this possible, if so, how would I do it?

    Thanks

    • PAJ says:

      The html code for the printable invoice is in the adminhtml template file paj/htmlinvoice/invoice.phtml. Simply edit the html to your requirements.

  8. Bassem says:

    Hi,
    Great extension.
    but print the order not the invoice!
    I need this extension to work for order and invoice also, Ho can I do that?

    Thanks

    • PAJ says:

      The invoice.phtml file can be edited to format the data however you wish, if you have some html skills this should be relatively easy for you. If not, give me an idea as to how you want to display the order on the printout, i.e. the same as the order confirmation email?

      • Bassem says:

        Hi PAJ,
        Thank you for your support & time 🙂
        I want to show “Print HTML” button on the invoice page and I need the printable version to be like the invoice email please
        Thanks,
        Bassem

      • Andreas says:

        Hi, today I installed your extension and it’s realy cool but I get a 404 error when I try visiting the configuration page. I already cleared the cache and relogged into the adminpanel, I don’t use a custom admin template.
        Can you please help me with this?
        Greetings
        Andreas

      • Andreas says:

        Okay, now it works. I cleared the cache but didn’t refreshed it. So after refreshing all works fine.

  9. delta says:

    Will it replace the default pdf invoice system of magento?
    will this html invoice be sent to customer in email or the default pdf invoice?
    email attachment to email will be html or pdf?

    • PAJ says:

      This module does not replace any of the inbuilt Magneto invoice creation methods, it simply adds a new button to each order view that creates an html based invoice that can be easily customised and printed.

  10. Kirby Bayles says:

    I love this extension! I have two things on my wishlist for it, though:
    1 – Do you have a way for it to show the invoice number AND the order number?
    2 – Do you have a way to mark the invoice with a PAID graphic if it’s been paid?

    • PAJ says:

      Yes I think it is straight forward to show both invoice and order number. The stamp graphic can be whatever you want it to be, so if the invoice has been paid just click the button to show the stamp…

    • PAJ says:

      Make sure you have refreshed your Magento configuration cache and logged out and back into admin, then you should see the button if you have installed the module correctly.

  11. Thom says:

    Thank you very much! This is awesome and easy customizable solution for invoices.
    Can i use this for Credit Memo somehow?

    Have nice day and thank you again! 🙂

      • Bary says:

        I cannot answer your comment below so I answer mine 🙂 So yes..like you print an invoice, you can print a credit memo. It would be designable as invoice. If a credit memo exist, then other printing button for this memo in admin area would be nice.

  12. Mark says:

    Hi!

    Very nice extension, works perfect for me. Now i got this i want more!

    invoice.phtml is very easy to customize.

    So i want a second invoice.php with some other option in it!

    So i get invoice.phtml and invoice_bb.phtml. And on the order 2 buttons: Print and Print BB.

    Is that possible?

    • PAJ says:

      Everything is possible. You will need to add the second button by editing the module configuration and template code. I will take a look.

      • Luiz says:

        I did it, it’s pretty simple. I created a second button to print the messages gifts. I made a template with a background of gift card and put messages inside. It was very good!

        Steps I performed:
        – Duplicate file “invoice.phtml” with another name and configure how you want.
        – I created a second section in the file adminhtml.xml
        – Added the second section in system.xml file with the necessary options (to display in admin)
        – Added the second button in the view.php file (folder Block)
        – Created the second file invoice.php pointing to the template phtml. (Block paste)
        – Add a second function within the file IndexController.php. Duplicate function invoiceAction under another name (same as used in file view.php) to call the new Block.

        I think that was it!

  13. Mark says:

    That would be great!
    I try it myself… but its not working.

    When it try to duplicate the button in the view.php. It only shows only the button that i duplicate.

    I hope you can help me!

  14. Ryan says:

    Firstly Thanks,
    This is a great extension!

    We would like to add a location and barcode field to the printable invoice we have added the heading but can’t get the content to display can you tell us how to do this please. The below is what we have added

    ‘ ‘ . $_item->getlocation() . ” . “\n” .
    ‘ ‘ . $_item->getbarcode() . ” . “\n” .

    We are also using Delivery Notes extension from here http://www.magentocommerce.com/magento-connect/delivery-instructions.html? on checkout is there a way to add this to the invoice too?

    Thanks

  15. paresh says:

    first of all thans for this.
    but my problem is how can i apply this format in frontend side to view pdf invoice after order complete.

    please help me

  16. Luiz says:

    My friend, your blog is very good. High tips!

    This module was simply perfect.

    I put a first column with the image of the product and also added a column before the column of the price with gift mensages.

    It was very good.
    Now I’m putting another button in order to print the messages of gifts in a personalized card.

    Modifying the file, the possibilities for customization are endless. Very useful this module. Congratulations again!

  17. PAJ says:

    I have updated the code to include the option to show images on the invoice, this also loads the product into the invoice view so that other product attributes can be extracted as required.

    • Alessandro says:

      Dear Paj,
      your module is very interesting.
      I installed a previous version, specifically v.0.0.3.
      How can I safely upgrade to the new version 0.1? I just simply need to overwrite the files?

      Thanks in advance,
      Alessandro

  18. ahmet says:

    Your extension – simple and beautiful! but I have a question?
    Now, I got an order. (of 5 products) and I refunded a product and print button is clicked. I can see, I have canceled items have been added.

    what should I do?

    Thank you

  19. Asher says:

    Hi I am getting the following error ?

    Trace:
    #0 /opt/lampp/htdocs/magento/app/code/core/Mage/Catalog/Helper/Image.php(83): Mage_Catalog_Model_Product_Image->setBaseFile(‘no_selection’)
    #1 /opt/lampp/htdocs/magento/app/design/adminhtml/default/default/template/paj/htmlinvoice/invoice.phtml(325): Mage_Catalog_Helper_Image->init(Object(Mage_Catalog_Model_Product), ‘small_image’)
    #2 /opt/lampp/htdocs/magento/app/code/core/Mage/Core/Block/Template.php(241): include(‘/opt/lampp/htdo…’)
    #3 /opt/lampp/htdocs/magento/app/code/core/Mage/Core/Block/Template.php(272): Mage_Core_Block_Template->fetchView(‘adminhtml/defau…’)
    #4 /opt/lampp/htdocs/magento/app/code/core/Mage/Core/Block/Template.php(286): Mage_Core_Block_Template->renderView()
    #5 /opt/lampp/htdocs/magento/app/code/core/Mage/Adminhtml/Block/Template.php(81): Mage_Core_Block_Template->_toHtml()
    #6 /opt/lampp/htdocs/magento/app/code/core/Mage/Core/Block/Abstract.php(863): Mage_Adminhtml_Block_Template->_toHtml()
    #7 /opt/lampp/htdocs/magento/app/code/local/PAJ/HTMLinvoice/controllers/IndexController.php(26): Mage_Core_Block_Abstract->toHtml()
    #8 /opt/lampp/htdocs/magento/app/code/core/Mage/Core/Controller/Varien/Action.php(420): PAJ_HTMLinvoice_IndexController->invoiceAction()
    #9 /opt/lampp/htdocs/magento/app/code/core/Mage/Core/Controller/Varien/Router/Standard.php(250): Mage_Core_Controller_Varien_Action->dispatch(‘invoice’)
    #10 /opt/lampp/htdocs/magento/app/code/core/Mage/Core/Controller/Varien/Front.php(176): Mage_Core_Controller_Varien_Router_Standard->match(Object(Mage_Core_Controller_Request_Http))
    #11 /opt/lampp/htdocs/magento/app/code/core/Mage/Core/Model/App.php(349): Mage_Core_Controller_Varien_Front->dispatch()
    #12 /opt/lampp/htdocs/magento/app/Mage.php(640): Mage_Core_Model_App->run(Array)
    #13 /opt/lampp/htdocs/magento/index.php(80): Mage::run(”, ‘store’)
    #14 {main}

  20. Ryan says:

    Hi, Thanks again for making this extension free and updating it.

    We have a multi-store setup is there a way to have different templates for the wholesale and retail stores?
    e.g. a basic list for the wholesale stores and an image one with a big cut off address section at the top for the retail stores

    • PAJ says:

      Yes this is easy to achieve, we would get the customer group from the order to identify the group the order belongs to – wholesale/retail and then style the invoice html as required.

  21. Huzan says:

    Hey:
    In the row total I want the price to be shown inclusive of Tax. I want the look & feel similar to the invoice I can take from the frontend of the website.

    Please suggest.

      • Andre says:

        I want something similar. But where to take including VAT from ? For sum and for any of the items per row in the list?

        Including VAT (this is kind of standard in Germany, BTW)…. is what I am asking for in my posting from today also.
        The info ” You can style CSS and HTML in the file” is apparently not enough, I am sorry….
        How exactly?

        Thanks in advance.
        Cheers. Andre

  22. Tan says:

    Hi, I installed. When I click the Print button the browser display “Service is unavailable”. Browser error message:

    Error: The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.

    Any idea how I can get it resolved. Thanks

    • PAJ says:

      edit invoice.phtml and add the character coding declaration that you need in the heading. Google ‘Declaring character encodings in HTML’ for more info.

  23. Mike says:

    Hi,

    I am getting this error, after installing the files and running a test.. any help would be great.

    Error:
    Image file was not found.

    Trace:
    #0 /var/www/html/magento/app/code/core/Mage/Catalog/Helper/Image.php(83): Mage_Catalog_Model_Product_Image->setBaseFile(”)
    #1 /var/www/html/magento/app/design/adminhtml/default/default/template/paj/htmlinvoice/invoice.phtml(325): Mage_Catalog_Helper_Image->init(Object(Mage_Catalog_Model_Product), ‘small_image’)
    #2 /var/www/html/magento/app/code/core/Mage/Core/Block/Template.php(235): include(‘/var/www/html/m…’)
    #3 /var/www/html/magento/app/code/core/Mage/Core/Block/Template.php(266): Mage_Core_Block_Template->fetchView(‘adminhtml/defau…’)
    #4 /var/www/html/magento/app/code/core/Mage/Core/Block/Template.php(280): Mage_Core_Block_Template->renderView()
    #5 /var/www/html/magento/app/code/core/Mage/Adminhtml/Block/Template.php(81): Mage_Core_Block_Template->_toHtml()
    #6 /var/www/html/magento/app/code/core/Mage/Core/Block/Abstract.php(758): Mage_Adminhtml_Block_Template->_toHtml()
    #7 /var/www/html/magento/app/code/local/PAJ/HTMLinvoice/controllers/IndexController.php(26): Mage_Core_Block_Abstract->toHtml()
    #8 /var/www/html/magento/app/code/core/Mage/Core/Controller/Varien/Action.php(420): PAJ_HTMLinvoice_IndexController->invoiceAction()
    #9 /var/www/html/magento/app/code/core/Mage/Core/Controller/Varien/Router/Standard.php(253): Mage_Core_Controller_Varien_Action->dispatch(‘invoice’)
    #10 /var/www/html/magento/app/code/core/Mage/Core/Controller/Varien/Front.php(176): Mage_Core_Controller_Varien_Router_Standard->match(Object(Mage_Core_Controller_Request_Http))
    #11 /var/www/html/magento/app/code/core/Mage/Core/Model/App.php(340): Mage_Core_Controller_Varien_Front->dispatch()
    #12 /var/www/html/magento/app/Mage.php(627): Mage_Core_Model_App->run(Array)
    #13 /var/www/html/magento/index.php(80): Mage::run(”, ‘store’)
    #14 {main}

  24. Andre says:

    Hi,
    I would like to show the product prices in gross (including VAT) in the list and then below, show them in sum including vat and then below this the VAT excluively (like it is now, basically already).

    Thats because the products are shown including VAT in the shop also and when the customers see them including VAT and then exclusive VAT in the invoice they get irritated (client has had lots of complaints about the “wrong”prices…
    How can I achieve this?
    Cheers.
    Andre

    • Andre says:

      Hi,
      still no success. I tried to check the settings in magento. They are set up that prices in invoices are shown incl. of VAT (19%). But HTML invoice doesnt take over the standard setting from Magento. Sadly.
      Which would be the php code snippets from magento that show the price including VAT? so that I could change it in the according file of HTML invoice…

      Please can anybody tell me how to do it?
      Thanks in adavance….

      (BTW, I guess this is a good extension, and thanks for providing it to the community)
      P.S.: Making it rely on tax settings of magento would be a good idea, wouldnt it?

      • PAJ says:

        Hey, the tax rules in magento are quite complicated! I have update the code to allow you to manually enable VAT and set the VAT rate. The options are in the config, set add vat to yes and then enter an integer for the VAT rate, i.e for 19% enter 19

        I have tested it quickly seems to work, the latest files are in the GIT hub, get them from there and update your code. Let me know how you get on. I have also added a check to try and fix the missing image problem too.

  25. Vips says:

    This is great Extension. Thanks…

    Can we have bulk (mass action) generation / printing of invoices in near future?

    • PAJ says:

      I am developing an external invoice maanager, I think this would be more achievable with that. Check out the work in progress from my latest blog post.

  26. Danny says:

    Hi, this is a great extension and have been using it since we launched our site with Magento. There is one feature I would like though. Would it be possible to select orders on the main orders page, and then print off multiple order invoices, rather than going into each individual order to print? Previously we used Opencart and it had this feature (it would simply just string all the invoices together into one html page, like looping the html code for each order)?

    Thanks
    Dan

  27. Danny says:

    Is there a way to output bundle item options? At the minute if someone orders a bundle product, on the invoice all that appears is the product title, and not the options. How would I go about adding this to the template?

    Regards
    Dan

    • PAJ says:

      I have actually never worked with bundled items in Magento, it will be possible you just need to detect a bundled item in the code and then display it the way you want on the invoice.

  28. Pankaj Sharma says:

    Beautiful extension….
    But I want to display print button inside Invoce. Plz help…
    I tried to add this code
    $this->_addButton(‘order_reorder’, array(
    ‘label’ => Mage::helper(‘sales’)->__(‘Print’),
    ‘onclick’ => ‘window.open(\” . $this->getUrl(‘htmlinvoice/index/invoice’) . ‘\’)’,
    ));
    inside
    app/code/core/mage/Adminhtml/Block/sales/Order/Invoice/View.php.
    then click print button gives 404 error….
    Plz help…

  29. Danny says:

    Hi, Is there a possibility to get this extension to print in bulk? I’ve tried your other extension which is very good but we have multiple users that need to use it and keeping it one place would be more ideal.

  30. mau says:

    Hello,

    Thank you very much for sharing your extension, it’s working for me on 1.8. Just wondering… Is there any way to get printing page on a pop-up window instead of a new tab?

    • PAJ says:

      If it opens in a popup you will not be able to print it, as the browser print function will print the popup and parts of the page behind it. My standalone app shows the order in a popup, and allows you to print with one click.

  31. Troy says:

    Fatal error: Call to a member function toHtml() on a non-object in /home/user/public_html/app/code/community/PAJ/HTMLinvoice/controllers/IndexController.php on line 20

  32. mau says:

    Great extension! Do you think this kind of functionality could be applied to reports? In order to get a print button in sales reports.

    Thank you.

  33. Siobhan says:

    ACCESS DENIED

    When one of my managers or staff members tries to use the print button, it gives them an ACCESS DENIED error. We tried giving them configuration access in the user roles, but that didn’t work.

    What setting in the permissions will give them access to using this module?

    – Siobhan

  34. Nicole says:

    Hi

    Great module. However when print i get an empty space up at the top before the company header area. How can i close the gap ?

  35. Elena De Cristofaro says:

    Hi
    great extension. I have two questions: is it possibile to add paypal transaction ID (i’ve tried in different ways to call this data but I can’t make it work. Second and last question: is it possibile to send via email with this invoice instead of the default magento ones? Thank you.
    Best regards,
    Elena

    • PAJ says:

      To get the paypal transaction id you can add

      echo $_order->getPayment()->getLastTransId();

      around about line 306 in invoice.phtml. You may want to check this returns a value, or you might want to detect paypal payment methods if you just want to show the paypal transaction id.

      If you want to replace the default invoice email you would be better off looking at customising the email templates to achieve what you want. If you want to be able to email this invoice from the admin page then that is also possible, but would require further dev work.

  36. Kinshuk says:

    Hi,
    we have use the extension for a change in invoice. All are done except the tax part as we have two forms of tax class which need to be shown in Invoice. Please help us how to call two taxes by using this extension.

    Thanks…..