Difference between revisions of "PDF Invoice Customisation"

From WHMCS Documentation

(Editing Text & Content)
 
(14 intermediate revisions by 7 users not shown)
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.
+
You can customize invoice and quote PDF files using a template file system. You can find these files in the <tt>templates</tt> directory of the active WHMCS system theme.
  
==Modifying the Logo==
+
== Template Files ==
  
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".
+
You can customize the following templates:
  
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.
+
* <tt>templates/viewinvoice.tpl</tt> controls the system theme invoice template.
 +
* <tt>templates/invoicepdf.tpl</tt> controls the PDF version of the invoice.
 +
* <tt>templates/quotepdf.tpl</tt> controls quote PDFs.
  
==Header & Footer==
+
== Header and 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">
 +
We added this feature in WHMCS 7.0.
 +
</div>
  
It is possible to have a header and/or footer automatically repeat on every page of a multi-page PDF invoice.
+
You can cause a header or footer to automatically repeat on every page of a multi-page PDF invoice or quote by updating the header and footer templates.
The following template files, if present in your theme, will be automatically included for every rendered PDF page:
 
  
*invoicepdfheader.tpl
+
=== Invoice Header and Footer ===
  
*invoicepdffooter.tpl
+
If they exist in your theme, the system will include the following system theme template files on every rendered PDF page:
 +
 +
* <tt>invoicepdfheader.tpl</tt>
 +
* <tt>invoicepdffooter.tpl</tt>
 +
 +
The system only requires the respective header or footer files. For example, for a customized footer on each page, create the <tt>invoicepdffooter.tpl</tt> file. You must store these files in the same directory as the <tt>invoicepdf.tpl</tt> system theme template file.
 +
 +
During template processing, Smarty will provide each of these files with the same variables that it provides to <tt>invoicepdf.tpl</tt>.
  
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.
+
===Quote Header and Footer===
During template processing, Smarty will provide each of these template files the same variables as invoicepdf.tpl.
 
  
==Editing Text & Content==
+
If they exist in your theme, the system will include the following template files for every rendered PDF page:
  
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.
+
* <tt>quotepdfheader.tpl</tt>
 +
* <tt>quotepdffooter.tpl</tt>
  
<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>
+
The system only requires the respective header or footer files. For example, for a customized footer on each page, create the <tt>quotepdffooter.tpl</tt> file. You must store these files in the same directory as the <tt>quotepdf.tpl</tt> template file.
  
==Displaying Custom Fields==
+
During template processing, Smarty will provide each of these files with the same variables that it provides to <tt>quotepdf.tpl</tt>.
 +
 +
== Modifying the Logo ==
 +
 +
The logo on PDF invoices and quotes is in the <tt>/assets/img/</tt> folder. To change this logo, upload the required logo to the <tt>/assets/img/</tt> folder. The name of the file should be <tt>logo.jpg</tt> or <tt>logo.png</tt>.
 +
 +
You can change the width of the logo image in the <tt>invoicepdf.tpl</tt> template file. On line <tt>10</tt>, adjust the last number (<tt>75</tt>) before the closing bracket (<tt>);</tt>). This variable defines the image width.
  
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.
+
== Editing Text and Content ==
 +
 +
You can customise the contents of PDF invoices and quotes by adding or removing text, altering the layout, or adding images and formatting. To do this, edit the <tt>invoicepdf.tpl</tt> or <tt>quotepdf.tpl</tt> system theme template files in the active template folder. These files contain all of the code relating to the layout and display in the PDF file.  
  
The following variables are available for use in the invoicepdf.tpl file. Obtain further data by running SQL queries from within the PHP template.
+
You will need a basic working knowledge of PHP coding to understand and modify the file.
 +
 +
<div class="docs-alert-success">
 +
The system generates PDFs using TCPDF. For more information, see the [https://tcpdf.org/ TCPDF website].
 +
</div>
  
*$invoiceid - The ID of the invoice
+
===Adding Custom Fields===
*$invoicenum - The custom number of the invoice (only set when proforma or sequential invoicing is enabled)
+
*$datecreated - Creation Date of the invoice
+
To display custom fields on printable and PDF invoices, go to '''Configuration (<i class="fa fa-wrench" aria-hidden="true"></i>) > System Settings > [[Custom Fields]]''' or, prior to WHMCS 8.0, '''Setup > Custom Client Fields'''. Then, select '''Show on Invoice'''.
*$duedate - Due date of the invoice
+
*$datepaid - Shows paid date/time if invoice status is Paid
+
The following variables are available for use in the <tt>invoicepdf.tpl</tt> file:
*$userid - Client ID Number
 
*$clientsdetails["firstname"] - Client Info First Name
 
*$clientsdetails["lastname"] - Client Info Last Name
 
*$clientsdetails["companyname"] - Client Info Company Name
 
*$clientsdetails["fieldname"] - etc...
 
*$clientsdetails["customfields1"] - Client Info Custom Field #1
 
*$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 - Array of invoice items
 
  
==Changing/Translating Filename==
+
* <tt>$invoiceid</tt> — The ID of the invoice.
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:
+
* <tt>$invoicenum</tt> — The custom number of the invoice. Only set this when you have enabled proforma or sequential invoicing.
 +
* <tt>$datecreated</tt> — The creation date of the invoice.
 +
* <tt>$duedate</tt> — The due date of the invoice.
 +
* <tt>$datepaid</tt> — The paid date and time, if invoice status is '''Paid'''.
 +
* <tt>$userid</tt> — The client ID number.
 +
* <tt>$clientsdetails["firstname"]</tt> — The client information '''First Name'''.
 +
* <tt>$clientsdetails["lastname"]</tt> — The client information '''Last Name'''.
 +
* <tt>$clientsdetails["companyname"]</tt> — The client information '''Company Name'''.
 +
* <tt>$clientsdetails["fieldname"]</tt> — Other client information values, where <tt>fieldname</tt> is that item's name.
 +
* <tt>$customfields</tt> — An array of '''Client Custom Fields''' (for example, $customfields['Custom Field Name']). See [[Easy Translation]] for help with dynamically translating '''Custom Field Names'''.
 +
* <tt>$subtotal</tt>
 +
* <tt>$tax</tt>
 +
* <tt>$taxrate</tt>
 +
* <tt>$credit</tt>
 +
* <tt>$total</tt>
 +
* <tt>$status</tt> — Paid, unpaid, or cancelled.
 +
* <tt>$paymentmethod</tt>
 +
* <tt>$notes</tt>
 +
* <tt>$companyname</tt> — The '''Company Name'''.
 +
* <tt>$companyurl</tt> — The '''Default Website URL'''.
 +
* <tt>$companyaddress</tt> — The '''Company Address'''.
 +
* <tt>$invoiceitems</tt> — An array of invoice items.
 +
 +
You can retrieve more data by running SQL queries from within the PHP template.
 +
 +
== Changing or Translating Filenames ==
  
$_LANG['invoicefilename'] = "Invoice-";
+
Invoices and quotes have default generated filename formats:
$_LANG['quotefilename'] = "Quote-";
 
  
==Reducing the Filesize of PDFs==
+
* The default filename for invoices is <tt>Invoice-xxx</tt>.
 +
* The default filename for quotes is <tt>Quote-xxx</tt>.
  
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.
+
In both of these filenames, <tt>xxx</tt> is the ID of the invoice or quote.  
  
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 > TCPDF Font'''. Once there, change the selection from "Freesans" to "Helvetica".
+
To change or translate these, use the WHMCS [[Language Files|language files]]. When you do this, look for these lines:
 +
 +
<div class="source-cli">
 +
$_LANG['invoicefilename'] = "Invoice-";
 +
<br/>$_LANG['quotefilename'] = "Quote-";
 +
</div>
 +
 +
== 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, these files are larger than, for example, files that use the ISO-8859-1 character set. Unlike UTF-8, ISO-8859-1 only supports <tt>A-Z</tt>, <tt>a-z</tt>, <tt>0-9</tt>, and other standard characters.
 +
 +
If no clients are using special characters in their names or addresses, the system does not require UTF-8. You can then reduce the size of PDF files by changing the font.  
  
==Additional Fonts==
+
To do this, change '''PDF Font Family''' to ''Helvetica'' in the '''[[Invoice Tab|Invoices]]''' tab at '''Configuration (<i class="fa fa-wrench" aria-hidden="true"></i>) > System Settings > General Settings''' or, prior to WHMCS 8.0, '''Setup > General Settings'''.
 +
 +
== Additional Fonts ==
 +
 +
The standard font may not support certain special characters. WHMCS supplies an alternative font type that supports languages that require these characters (for example, Czech, Russian, Arabic, and Persian).
  
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. To install:
+
WHMCS 7.6 and earlier requires you to download additional files in order to change to the alternate font. In WHMCS 7.7 and later, WHMCS ships with all required files.
# Download the font files from the URL below.
+
# Upload into the '''/vendor/tecnick.com/tcpdf/fonts/''' (if you are using WHMCS 6.0 or 6.1) or '''/vendor/tecnickcom/tcpdf/fonts/''' (if you are using WHMCS 6.2 or newer) folder.
+
=== WHMCS 7.7 and later ===
# Specify the custom font name '''dejavusans''' in '''Setup > General Settings > Invoices > TCPDF Font'''.
+
 +
To change to the alternate font in WHMCS 7.7 and later:
  
<div class="docs-related-pages">http://www.whmcs.com/download/106/dejavusans_tcpdf_font</div>
+
# Go to '''Configuration (<i class="fa fa-wrench" aria-hidden="true"></i>) > System Settings > [[General Settings]]''' or, prior to WHMCS 8.0, '''Setup > General Settings'''.
 +
# Select the '''[[Invoice Tab|Invoices]]''' tab.
 +
# Select ''Dejavusans'' for '''PDF Font Family'''.
 +
# Click '''Save Changes'''.
 +
 +
=== WHMCS 7.6 and earlier ===
 +
 +
To change to the alternate font in WHMCS 7.6 and earlier:
  
==Troubleshooting==
+
# [https://www.whmcs.com/download/106/dejavusans_tcpdf_font Download the font files.]
===Accented Characters===
+
# Upload the font files to the <tt>/vendor/tecnickcom/tcpdf/fonts/</tt> folder.
Due to a PHP limitation, the translations of the "Paid" and "Unpaid" text on the PDF Invoices may not display upper-case accented characters.
+
# Go to'''Setup > General Settings'''.
<div class="docs-related-pages">To resolve this please refer to http://forum.whmcs.com/showthread.php?t=45594</div>
+
# Select the '''[[Invoice Tab|Invoices]]''' tab.
 +
# Select ''dejavusans'' for '''PDF Font Family'''.
 +
# Click '''Save Changes'''.
 +
 +
== Troubleshooting ==
 +
 +
=== Accented Characters ===
 +
 +
Due to a limitation in PHP, the translations of the '''Paid''' and '''Unpaid''' text on the PDF Invoices may not display uppercase accented characters.
 +
 +
To resolve this, see [http://forum.whmcs.com/showthread.php?t=45594 this forum thread].
 +
 +
=== Question Marks ===
 +
 +
Sometimes, question marks appear in the PDF files in place of non-Latin or accented characters. This can indicate that the character is unsupported in the current font.
  
===Question Marks===
+
To resolve this:
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 > Invoicing'''.
 
  
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.
+
# Go to '''Configuration (<i class="fa fa-wrench" aria-hidden="true"></i>) > System Settings > [[General Settings]]''' or, prior to WHMCS 8.0, '''Setup > General Settings'''.
 +
# Select the '''[[Invoice Tab|Invoices]]''' tab.
 +
# Select ''Freesans'' for '''PDF Font Family'''.
 +
# Click '''Save Changes'''.
 +
 +
If the problem persists, download and install "dejavusans" using the steps [[#Additional_Fonts|above]]. The ''dejavusans'' font pack includes additional characters and is more likely to contain the characters you need.
 +
 +
===TCPDF error: Missing or incorrect image file===
 +
 +
This error indicates that the <tt>logo.png</tt> or <tt>logo.jpg</tt> file in the <tt>/assets/img/</tt> directory is missing or is not a valid image file. The system uses this image when creating the PDF invoice.
  
===TCPDF error: Missing or incorrect image file===
+
To resolve this, save the image file again and reupload it to the <tt>/assets/img</tt> 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 used when creating the pdf invoice. Please re-save the image file and re-upload to the /assets/img directory.
 

Latest revision as of 17:41, 27 April 2022

You can customize invoice and quote PDF files using a template file system. You can find these files in the templates directory of the active WHMCS system theme.

Template Files

You can customize the following templates:

  • templates/viewinvoice.tpl controls the system theme invoice template.
  • templates/invoicepdf.tpl controls the PDF version of the invoice.
  • templates/quotepdf.tpl controls quote PDFs.

Header and Footer

We added this feature in WHMCS 7.0.

You can cause a header or footer to automatically repeat on every page of a multi-page PDF invoice or quote by updating the header and footer templates.

Invoice Header and Footer

If they exist in your theme, the system will include the following system theme template files on 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 the invoicepdffooter.tpl file. You must store these files in the same directory as the invoicepdf.tpl system theme template file.

During template processing, Smarty will provide each of these files with the same variables that it provides to invoicepdf.tpl.

Quote Header and Footer

If they exist in your theme, the system will include the following template files for every rendered PDF page:

  • quotepdfheader.tpl
  • quotepdffooter.tpl

The system only requires the respective header or footer files. For example, for a customized footer on each page, create the quotepdffooter.tpl file. You must store these files in the same directory as the quotepdf.tpl template file.

During template processing, Smarty will provide each of these files with the same variables that it provides to quotepdf.tpl.

The logo on PDF invoices and quotes 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.

Editing Text and Content

You can customise the contents of PDF invoices and quotes by adding or removing text, altering the layout, or adding images and formatting. To do this, edit the invoicepdf.tpl or quotepdf.tpl system theme template files in the active template folder. These files contain all of the code relating to the layout and display in the PDF file.

You will need a basic working knowledge of PHP coding to understand and modify the file.

The system generates PDFs using TCPDF. For more information, see the TCPDF website.

Adding Custom Fields

To display custom fields on printable and PDF invoices, go to Configuration () > System Settings > Custom Fields or, prior to WHMCS 8.0, Setup > Custom Client Fields. Then, select Show on Invoice.

The following variables are available for use in the invoicepdf.tpl file:

  • $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.

You can retrieve more data by running SQL queries from within the PHP template.

Changing or Translating Filenames

Invoices and quotes have default generated filename formats:

  • The default filename for invoices is Invoice-xxx.
  • The default filename for quotes is Quote-xxx.

In both of these filenames, xxx is the ID of the invoice or quote.

To change or translate these, use the WHMCS language files. When you do this, look for these lines:

$_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, these files are larger than, for example, files that use the ISO-8859-1 character set. Unlike UTF-8, ISO-8859-1 only supports A-Z, 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. You can then reduce the size of PDF files by changing the font.

To do this, change PDF Font Family to Helvetica in the Invoices tab at Configuration () > System Settings > General Settings or, prior to WHMCS 8.0, Setup > General Settings.

Additional Fonts

The standard font may not support certain special characters. WHMCS supplies an alternative font type that supports languages that require these characters (for example, Czech, Russian, Arabic, and Persian).

WHMCS 7.6 and earlier requires you to download additional files in order to change to the alternate font. In WHMCS 7.7 and later, WHMCS ships with all required files.

WHMCS 7.7 and later

To change to the alternate font in WHMCS 7.7 and later:

  1. Go to Configuration () > System Settings > General Settings or, prior to WHMCS 8.0, Setup > General Settings.
  2. Select the Invoices tab.
  3. Select Dejavusans for PDF Font Family.
  4. Click Save Changes.

WHMCS 7.6 and earlier

To change to the alternate font in WHMCS 7.6 and earlier:

  1. Download the font files.
  2. Upload the font files to the /vendor/tecnickcom/tcpdf/fonts/ folder.
  3. Go toSetup > General Settings.
  4. Select the Invoices tab.
  5. Select dejavusans for PDF Font Family.
  6. Click Save Changes.

Troubleshooting

Accented Characters

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

To resolve this, see this forum thread.

Question Marks

Sometimes, question marks appear in the PDF files in place of non-Latin or accented characters. This can indicate that the character is unsupported in the current font.

To resolve this:

  1. Go to Configuration () > System Settings > General Settings or, prior to WHMCS 8.0, Setup > General Settings.
  2. Select the Invoices tab.
  3. Select Freesans for PDF Font Family.
  4. Click Save Changes.

If the problem persists, download and install "dejavusans" using the steps above. The dejavusans font pack includes additional characters and is more likely to contain the characters you need.

TCPDF error: Missing or incorrect image file

This error indicates that the logo.png or logo.jpg file in the /assets/img/ directory is missing or is not a valid image file. The system uses this image when creating the PDF invoice.

To resolve this, save the image file again and reupload it to the /assets/img directory.