Incorporating CSS Styles in Dompdf Library for Codeigniter

Question

Incorporating CSS Styles in Dompdf Library for Codeigniter

Although I am able to generate a PDF file from the Codeigniter Framework using the Dompdf library, the generated PDF does not retain the styling I applied to the page. How can I ensure that CSS is rendered together with the HTML content in the PDF?

The function responsible for creating the PDF looks like this:

function generateReport($id = null){
 $this->load->library('pdf');

    $data['title'] = 'Student Report';
    $details = $this->student_model->get_single_student($id);
    $result = $this->student_model->get_single_student_result($id);
    $data['student'] = $details;
    $data['result'] = $result;
    $filename = $data['student']['admission_no'];
  $this->pdf->load_view('admin/mark/singleMarkShow', $data);
  $this->pdf->render();
  $this->pdf->stream($filename.".pdf");
 }

Here is an example of the PDF generated:

see PDF here

And this is the HTML page I created to export as a PDF:

view HTML page here

css codeigniter bootstrap-4 dompdf

Answer 1

Answer №1

//You can experiment with this code snippet to generate PDFs.

$pdfGenerator = new Dompdf();
$htmlContent = "<div>This is the content of your PDF...</div>";
$htmlContent .= '<link type="text/css" href="/path/to/pdffile.css" rel="stylesheet" />';
$pdfGenerator->loadHtml($htmlContent);

Answer 2

//You can experiment with this code snippet to generate PDFs.

$pdfGenerator = new Dompdf();
$htmlContent = "<div>This is the content of your PDF...</div>";
$htmlContent .= '<link type="text/css" href="/path/to/pdffile.css" rel="stylesheet" />';
$pdfGenerator->loadHtml($htmlContent);

Answer 3

Answer №2

Having faced challenges with DomPDF myself, I understand how daunting it can be.

Although you haven't shared the code for your view ('admin/mark/singleMarkShow'), if you require CSS styling, there are primarily two options:

1.- You can include a link to the CSS file in the view, similar to how you would in an HTML file (

<link rel="stylesheet" href="file.css">

). However, ensure that you provide a full absolute path to the CSS file instead of a relative one. Your href should look something like FCPATH./assets/css/style.css. It's important to note that using large CSS files like bootstrap may significantly slow down DomPDF (refer to this link for more information).

2.- Alternatively, you can inline the necessary styles directly into the view. Simply include the specific styles you need (to minimize overhead) as you would in any HTML file, for example:

<style>
body {
  font-size: 11px;
}

small {
  font-size: 65%;
}
(...)
</style>

While this approach can lead to faster rendering, it requires updating all views individually if there is a redesign.

Regardless of your choice, remember that domPDF expects absolute paths for everything. Even for images, ensure your src attributes use $_SERVER['DOCUMENT_ROOT'] or FCPATH, followed by the remaining route relative to the main index.php file.

Answer 4

Having faced challenges with DomPDF myself, I understand how daunting it can be.

Although you haven't shared the code for your view ('admin/mark/singleMarkShow'), if you require CSS styling, there are primarily two options:

1.- You can include a link to the CSS file in the view, similar to how you would in an HTML file (

<link rel="stylesheet" href="file.css">

). However, ensure that you provide a full absolute path to the CSS file instead of a relative one. Your href should look something like FCPATH./assets/css/style.css. It's important to note that using large CSS files like bootstrap may significantly slow down DomPDF (refer to this link for more information).

2.- Alternatively, you can inline the necessary styles directly into the view. Simply include the specific styles you need (to minimize overhead) as you would in any HTML file, for example:

<style>
body {
  font-size: 11px;
}

small {
  font-size: 65%;
}
(...)
</style>

While this approach can lead to faster rendering, it requires updating all views individually if there is a redesign.

Regardless of your choice, remember that domPDF expects absolute paths for everything. Even for images, ensure your src attributes use $_SERVER['DOCUMENT_ROOT'] or FCPATH, followed by the remaining route relative to the main index.php file.

Incorporating CSS Styles in Dompdf Library for Codeigniter

Answer №1

Answer №2

Similar questions

Execute a JavaScript transition upon clicking following the display block

Text overlapping image causing hover state interference

Disable the spinning animation of the Bootstrap spinner to keep it still and static

Having trouble loading styles in Vue after publishing to npm

Is there a way to personalize the appearance of a specific page title in my navigation menu?

Having trouble adding flexslider before a div element with jQuery

CSS background image not displaying in ReactJS with SCSS

Exploring Bootstrap 5: Utilizing flex columns for children elements with full width and equal height display

"Implementing a consistent body border design on all pages using CSS for print media

Creating two columns with the content in the left column aligned with the padding of the container and the second column extending the full width can easily be

What impact does zoom have on the width of the image?

CSS can create a semi-circle shape using borders and outlines

Tips for shrinking the circumference of a circle

Struggling to extract the values from a KendoDropDown using Selenium

In Firefox, right floated elements vanish when utilizing columns

Display a scrollbar for the offspring of an element with a flex-grow value of 1

Ensure the slider functions on all types of browsers

`CSS border issues`

The website is missing the display of Google Maps

combining: enhancing the value of the background-image property