CSS How to use external CSS in TCPPDF PDF generation

In this article, we will introduce how to use external CSS. TCPDF is a PHP library for generating PDF documents, which allows us to generate PDF files with rich styles. Using an external CSS file to define the style helps separate the style from the content, making the code easier to maintain and reuse.

Read more: CSS Tutorial

1. Importing an External CSS File

First, we need to import the external CSS file into the generated code of TCPDF. In TCPDF, we can use the setCSS method to import external CSS files:

$pdf->setCSS(file_get_contents('styles.css')); 

The setCSS method in the above code will read the CSS styles from the styles.css file and apply them to the generated PDF file. Ensure that the path to the styles.css file is correct and that the file permissions are set correctly.

2. Setting Style Class Names

In an external CSS file, we can set style class names and apply them to the generated PDF file. For example, we can define a .header class to style the header:

.header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}

Then, in the TCPDF-generated code, use the writeHTML method to insert the HTML code and apply the .header class name to the corresponding HTML element:

$html = '<div class="header">This is the header</div>';
$pdf->writeHTML($html);

In the above code, the $html variable contains a div element with the .header class. When the writeHTML method is executed, the style class name is parsed and applied to the corresponding HTML element.

3. Style Priority

Note that in TCPDF, style priorities can vary. When multiple styles are applied to the same element, styles with higher priorities will override those with lower priorities.

Here are some style precedence rules:

• Inline styles > Internal styles > External styles
• ID selector > Class selector > Tag Selector
• Specified Element > Adjacent Elements > Descendant Elements

4. Example

To better understand how to use external CSS in TCPPDF, let’s look at a simple example. Suppose we need to generate a PDF file containing a header, body, and footer, and want to apply different styles to each section.

First, we need to create an external CSS file styles.css and define the styles for the header, body, and footer. The sample code is as follows:

.title {
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}

.content {
font-size: 12px;
line-height: 1.5;
margin-bottom: 10px;
}

.footer {
font-size: 10px;
color: #666;
text-align: center;
margin-top: 20px;
}

Then, we need to import the external CSS file in the tcpdf generated code and apply the corresponding style class names to the generated PDF. The sample code is as follows:

$pdf = new TCPDF();

// Import external CSS file
$pdf->setCSS(file_get_contents('styles.css'));

// Insert title
$html = '<div class="title">This is the title</div>';
$pdf->writeHTML($html);

// Insert body
$html = '<div class="content">This is the content</div>';
$pdf->writeHTML($html);

// Insert footer
$html = '<div class="footer">This is the footer</div>';
$pdf->writeHTML($html);

// Output PDF file
$pdf->output('example.pdf', 'D');

In the above code, $pdf->output('example.pdf', 'D') is used to output the generated PDF file and download it with the file name 'example.pdf'. You can modify the file name and storage location as needed.

Summary

Through the above examples, we’ve learned how to use external CSS with TCPDF PDF generation. By importing an external CSS file and setting style class names, we can easily define and apply styles, giving the generated PDF file rich visual effects. Furthermore, by separating styles from content, the code becomes easier to maintain and reuse. I hope this article helps you generate PDF files with TCPDF!