Difference between revisions of "PDF Invoice Customisation"

From WHMCS Documentation

m (Question Marks: Typo)
m
Line 1: Line 1:
There are 2 invoice templates. One is for the client area invoice ('''viewinvoice.tpl'''). The other is for the PDF version of an invoice ('''invoicepdf.tpl'''). The templates are found in the active WHMCS template folder.
+
There are two invoice templates. One is for the client area invoice ('''viewinvoice.tpl'''). The other is for the PDF version of an invoice ('''invoicepdf.tpl'''). The templates are in the active WHMCS template folder.
  
 
==Modifying the Logo==
 
==Modifying the Logo==
  
The logo displayed on the PDF invoices is in the '''/assets/img/''' folder.  To change this logo, upload the required logo to the /assets/img/ folder. The name of the file should be "logo.jpg" or "logo.png".
+
The logo on the PDF invoices is in the '''/assets/img/''' folder.  To change this logo, upload the required logo to the '''/assets/img/''' folder. The name of the file should be "logo.jpg" or "logo.png".
  
The width of the logo image can be changed in the invoicepdf.tpl template file. On line 10, adjust the last number "75" before the closing bracket );. This variable defines the image width. A developer can then experiment increasing and decreasing it until happy.
+
You can change the width of the logo image in the '''invoicepdf.tpl''' template file. On line 10, adjust the last number, "75," before the closing bracket (<tt>);</tt>). This variable defines the image width. A developer can then increase or decrease this.
  
 
==Header & Footer==
 
==Header & Footer==
  
<div class="docs-alert-info"><i class="fa fa-info-circle"></i> This section describes a feature available in version 7.0 and above</div>
+
<div class="docs-alert-info"><i class="fa fa-info-circle"></i> This section describes a feature available in version 7.0 and above.</div>
  
It is possible to have a header and/or footer automatically repeat on every page of a multi-page PDF invoice.
+
It is possible to cause a header or footer to automatically repeat on every page of a multi-page PDF invoice.
The following template files, if present in your theme, will be automatically included for every rendered PDF page:
+
If they are present in your theme, the system will include the following template files for every rendered PDF page:
  
 
*invoicepdfheader.tpl
 
*invoicepdfheader.tpl
Line 18: Line 18:
 
*invoicepdffooter.tpl
 
*invoicepdffooter.tpl
  
Only the respective header or footer file is required. For example, if you just want a customized footer on each page, you only need to create invoicepdffooter.tpl. These files must be located in the same directory as the invoicepdf.tpl template file.
+
The system only requires the respective header or footer files. For example, for a customized footer on each page, create a invoicepdffooter.tpl file. You must store these files in the same directory as the invoicepdf.tpl template file.
 
During template processing, Smarty will provide each of these template files the same variables as invoicepdf.tpl.
 
During template processing, Smarty will provide each of these template files the same variables as invoicepdf.tpl.
  
 
==Editing Text & Content==
 
==Editing Text & Content==
  
A developer can customise the PDF invoices. This includes adding or removing text, altering the layout or adding further images & formatting.  Do this by editing the template file '''invoicepdf.tpl''' in the active template folder. The file contains all the code relating to the layout and display of the invoice in its PDF format. A basic working knowledge of PHP coding to understand and modify the file.
+
A developer can customise the PDF invoices. This includes adding or removing text, altering the layout, or adding further images and formatting.  Do this by editing the template file '''invoicepdf.tpl''' in the active template folder. The file contains all the code relating to the layout and display of the invoice in its PDF format. You will need a basic working knowledge of PHP coding to understand and modify the file.
  
<div class="docs-related-pages">PDF's generate using TCPDF. A full list of functions to help you build the template is available at https://tcpdf.org/docs/srcdoc/TCPDF/class-TCPDF/</div>
+
<div class="docs-related-pages">The system generates PDFs using TCPDF. A full list of functions to help you build the template is [https://tcpdf.org/docs/srcdoc/TCPDF/class-TCPDF/ available].</div>
  
 
==Displaying Custom Fields==
 
==Displaying Custom Fields==
  
It is possible to display Custom fields on printable and PDF invoices. Do this by ticking the '''Setup > Custom Client Fields > Show on Invoice''' option.
+
It is possible to display custom fields on printable and PDF invoices. To do this, select the '''Setup > Custom Client Fields > Show on Invoice''' option.
  
 
The following variables are available for use in the invoicepdf.tpl file. Obtain further data by running SQL queries from within the PHP template.
 
The following variables are available for use in the invoicepdf.tpl file. Obtain further data by running SQL queries from within the PHP template.
  
*$invoiceid - The ID of the invoice
+
*$invoiceid The ID of the invoice.
*$invoicenum - The custom number of the invoice (only set when proforma or sequential invoicing is enabled)
+
*$invoicenum The custom number of the invoice (only set this when you have enabled proforma or sequential invoicing).
*$datecreated - Creation Date of the invoice
+
*$datecreated — The creation date of the invoice.
*$duedate - Due date of the invoice
+
*$duedate — The due date of the invoice.
*$datepaid - Shows paid date/time if invoice status is Paid
+
*$datepaid — The paid date and time, if invoice status is Paid.
*$userid - Client ID Number
+
*$userid — The client ID number.
*$clientsdetails["firstname"] - Client Info First Name
+
*$clientsdetails["firstname"] — The client information First Name.
*$clientsdetails["lastname"] - Client Info Last Name
+
*$clientsdetails["lastname"] — The client information Last Name.
*$clientsdetails["companyname"] - Client Info Company Name
+
*$clientsdetails["companyname"] — The client information Company Name.
*$clientsdetails["fieldname"] - etc...
+
*$clientsdetails["fieldname"] — Other client information values, where <tt>fieldname</tt> is that item's name.
*$customfields - An array of Client Custom Fields (e.g. $customfields['Custom Field Name']) - See [[Easy Translation]] for dynamically translating Custom Field Names.
+
*$customfields An array of Client Custom Fields (for example, $customfields['Custom Field Name']). See [[Easy Translation]] for help with dynamically translating Custom Field Names.
 
*$subtotal
 
*$subtotal
 
*$tax
 
*$tax
Line 49: Line 49:
 
*$credit
 
*$credit
 
*$total
 
*$total
*$status - Paid, Unpaid or Cancelled
+
*$status Paid, unpaid or cancelled.
 
*$paymentmethod
 
*$paymentmethod
 
*$notes
 
*$notes
*$companyname - The Company Name
+
*$companyname The Company Name.
*$companyurl - The Default Website URL
+
*$companyurl The Default Website URL.
*$companyaddress - The Company Address
+
*$companyaddress The Company Address.
*$invoiceitems - Array of invoice items
+
*$invoiceitems — An array of invoice items.
  
 
==Changing/Translating Filename==
 
==Changing/Translating Filename==
The default filename for invoices is Invoice-xxx. For quotes, this is Quote-xxx. For both, xxx is the ID of the invoice or quote. It may be desirable to change the filenames the clients see or translate into other languages. Achieve this in the same way as any text within WHMCS, by using the [[Language Files]]. Look for the strings:
+
 
 +
The default filename for invoices is Invoice-xxx. For quotes, this is Quote-xxx. For both, xxx is the ID of the invoice or quote. It may be desirable to change the filenames the clients see or translate into other languages. Achieve this in the same way as any text within WHMCS, by using the [[Language Files]]. Look for these strings:
  
 
  $_LANG['invoicefilename'] = "Invoice-";
 
  $_LANG['invoicefilename'] = "Invoice-";
 
  $_LANG['quotefilename'] = "Quote-";
 
  $_LANG['quotefilename'] = "Quote-";
  
==Reducing the Filesize of PDFs==
+
==Reducing the File Size of PDFs==
  
The bulk of the file size for PDFs generated by WHMCS come from the embedded font files for UTF-8. Because the UTF-8 charset has a large range of supported characters, this means it takes up more space than say the iso-8859-1 charset. Unlike UTF-8, iso-8859-1, only supports A-Z 0-9 and other standard characters.
+
The bulk of the file size for PDFs that WHMCS generates come from the embedded font files for UTF-8. Because the UTF-8 charset has a large range of supported characters, this means it takes up more space than, for example, the ISO-8859-1 character set. Unlike UTF-8, ISO-8859-1 only supports A-Z, 0-9, and other standard characters.
  
If no clients are using special characters in their names/addresses then UTF-8 is not required. It is then possible to reduce the filesize of PDF's by changing the font. To do that, go to '''Setup > General Settings > Invoices > PDF Font Family'''. Once there, change the selection from "Freesans" to "Helvetica".
+
If no clients are using special characters in their names or addresses, the system does not require UTF-8. It is then possible to reduce the size of PDF files by changing the font. To do that, go to '''Setup > General Settings > Invoices > PDF Font Family'''. Then, change the selection from "Freesans" to "Helvetica".
  
 
==Additional Fonts==
 
==Additional Fonts==
  
The use of certain special characters may not be available in the standard font. So, WHMCS supply an alternative font type that supports Czech, Russian, Arabic & Persian among others.
+
The use of certain special characters may not be available in the standard font. So, WHMCS supplies an alternative font type that supports Czech, Russian, Arabic, and Persian, among others.
  
 
===Version 7.7 and later===
 
===Version 7.7 and later===
No additional files are required:
+
 
# Navigate to '''Setup > General Settings > Invoices tab'''
+
In version 7.7 and later, the system doesn't require any additional files.
# Select the "Dejavusans" option in the ''PDF Font Family'' setting
+
 
# Click Save Changes
+
To make this change:
 +
# Navigate to '''Setup > General Settings > Invoices tab'''.
 +
# Select the "Dejavusans" option for the ''PDF Font Family'' setting.
 +
# Click Save Changes.
 +
 
 
===Version 7.6 and earlier===
 
===Version 7.6 and earlier===
To install:
+
 
 +
To make this change:
 
# Download the font files from the URL below.
 
# Download the font files from the URL below.
 
# Upload into the '''/vendor/tecnickcom/tcpdf/fonts/''' folder.
 
# Upload into the '''/vendor/tecnickcom/tcpdf/fonts/''' folder.
Line 87: Line 93:
  
 
==Troubleshooting==
 
==Troubleshooting==
 +
 
===Accented Characters===
 
===Accented Characters===
Due to a PHP limitation, the translations of the "Paid" and "Unpaid" text on the PDF Invoices may not display upper-case accented characters.
+
 
<div class="docs-related-pages">To resolve this please refer to http://forum.whmcs.com/showthread.php?t=45594</div>
+
Due to a PHP limitation, the translations of the "Paid" and "Unpaid" text on the PDF Invoices may not display uppercase accented characters.
 +
 
 +
<div class="docs-related-pages">To resolve this, see [http://forum.whmcs.com/showthread.php?t=45594 this forum thread].</div>
  
 
===Question Marks===
 
===Question Marks===
Sometimes, question marks appear in the PDF files in place of non-Latin or accented characters. This can suggest the character is not supported by the font. The first thing to try is setting the font to "Freesans" in '''Setup > General Settings > Invoices'''.
 
  
If the problem persists, please download and install "dejavusans" as described above [[#Additional_Fonts|Additional Fonts]]. This font pack contains more characters than standard ones so stands the best chance of working with these characters.
+
Sometimes, question marks appear in the PDF files in place of non-Latin or accented characters. This can suggest that the font doesn't support the character. The first thing to try is setting the font to "Freesans" in '''Setup > General Settings > Invoices'''.
 +
 
 +
If the problem persists, download and install "dejavusans" using the steps in [[#Additional_Fonts|Additional Fonts]]. This font pack contains more characters than standard ones, so it is likely to work with these characters.
  
 
===TCPDF error: Missing or incorrect image file===
 
===TCPDF error: Missing or incorrect image file===
This means the logo.png or logo.jpg file in your /assets/img/ folder is missing or is not a valid image file. This is the image used when creating the pdf invoice. Please re-save the image file and re-upload to the /assets/img directory.
+
 
 +
This means the logo.png or logo.jpg file in your /assets/img/ folder is missing or is not a valid image file. This is the image that the system uses when creating the PDF invoice. Save the image file again and reupload it to the /assets/img directory.

Revision as of 13:59, 30 April 2020

There are two invoice templates. One is for the client area invoice (viewinvoice.tpl). The other is for the PDF version of an invoice (invoicepdf.tpl). The templates are in the active WHMCS template folder.

The logo on the PDF invoices is in the /assets/img/ folder. To change this logo, upload the required logo to the /assets/img/ folder. The name of the file should be "logo.jpg" or "logo.png".

You can change the width of the logo image in the invoicepdf.tpl template file. On line 10, adjust the last number, "75," before the closing bracket ();). This variable defines the image width. A developer can then increase or decrease this.

Header & Footer

This section describes a feature available in version 7.0 and above.

It is possible to cause a header or footer to automatically repeat on every page of a multi-page PDF invoice. If they are present in your theme, the system will include the following template files for every rendered PDF page:

  • invoicepdfheader.tpl
  • invoicepdffooter.tpl

The system only requires the respective header or footer files. For example, for a customized footer on each page, create a invoicepdffooter.tpl file. You must store these files in the same directory as the invoicepdf.tpl template file. During template processing, Smarty will provide each of these template files the same variables as invoicepdf.tpl.

Editing Text & Content

A developer can customise the PDF invoices. This includes adding or removing text, altering the layout, or adding further images and formatting. Do this by editing the template file invoicepdf.tpl in the active template folder. The file contains all the code relating to the layout and display of the invoice in its PDF format. You will need a basic working knowledge of PHP coding to understand and modify the file.

Displaying Custom Fields

It is possible to display custom fields on printable and PDF invoices. To do this, select the Setup > Custom Client Fields > Show on Invoice option.

The following variables are available for use in the invoicepdf.tpl file. Obtain further data by running SQL queries from within the PHP template.

  • $invoiceid — The ID of the invoice.
  • $invoicenum — The custom number of the invoice (only set this when you have enabled proforma or sequential invoicing).
  • $datecreated — The creation date of the invoice.
  • $duedate — The due date of the invoice.
  • $datepaid — The paid date and time, if invoice status is Paid.
  • $userid — The client ID number.
  • $clientsdetails["firstname"] — The client information First Name.
  • $clientsdetails["lastname"] — The client information Last Name.
  • $clientsdetails["companyname"] — The client information Company Name.
  • $clientsdetails["fieldname"] — Other client information values, where fieldname is that item's name.
  • $customfields — An array of Client Custom Fields (for example, $customfields['Custom Field Name']). See Easy Translation for help with dynamically translating Custom Field Names.
  • $subtotal
  • $tax
  • $taxrate
  • $credit
  • $total
  • $status — Paid, unpaid or cancelled.
  • $paymentmethod
  • $notes
  • $companyname — The Company Name.
  • $companyurl — The Default Website URL.
  • $companyaddress — The Company Address.
  • $invoiceitems — An array of invoice items.

Changing/Translating Filename

The default filename for invoices is Invoice-xxx. For quotes, this is Quote-xxx. For both, xxx is the ID of the invoice or quote. It may be desirable to change the filenames the clients see or translate into other languages. Achieve this in the same way as any text within WHMCS, by using the Language Files. Look for these strings:

$_LANG['invoicefilename'] = "Invoice-";
$_LANG['quotefilename'] = "Quote-";

Reducing the File Size of PDFs

The bulk of the file size for PDFs that WHMCS generates come from the embedded font files for UTF-8. Because the UTF-8 charset has a large range of supported characters, this means it takes up more space than, for example, the ISO-8859-1 character set. Unlike UTF-8, ISO-8859-1 only supports A-Z, 0-9, and other standard characters.

If no clients are using special characters in their names or addresses, the system does not require UTF-8. It is then possible to reduce the size of PDF files by changing the font. To do that, go to Setup > General Settings > Invoices > PDF Font Family. Then, change the selection from "Freesans" to "Helvetica".

Additional Fonts

The use of certain special characters may not be available in the standard font. So, WHMCS supplies an alternative font type that supports Czech, Russian, Arabic, and Persian, among others.

Version 7.7 and later

In version 7.7 and later, the system doesn't require any additional files.

To make this change:

  1. Navigate to Setup > General Settings > Invoices tab.
  2. Select the "Dejavusans" option for the PDF Font Family setting.
  3. Click Save Changes.

Version 7.6 and earlier

To make this change:

  1. Download the font files from the URL below.
  2. Upload into the /vendor/tecnickcom/tcpdf/fonts/ folder.
  3. Specify the custom font name dejavusans in Setup > General Settings > Invoices > PDF Font Family.

Troubleshooting

Accented Characters

Due to a PHP limitation, the translations of the "Paid" and "Unpaid" text on the PDF Invoices may not display uppercase accented characters.

Question Marks

Sometimes, question marks appear in the PDF files in place of non-Latin or accented characters. This can suggest that the font doesn't support the character. The first thing to try is setting the font to "Freesans" in Setup > General Settings > Invoices.

If the problem persists, download and install "dejavusans" using the steps in Additional Fonts. This font pack contains more characters than standard ones, so it is likely to work with these characters.

TCPDF error: Missing or incorrect image file

This means the logo.png or logo.jpg file in your /assets/img/ folder is missing or is not a valid image file. This is the image that the system uses when creating the PDF invoice. Save the image file again and reupload it to the /assets/img directory.