0

I'm trying to generate a report filled with info from my DB, and I can show it correctly with HTML and boostrap, but when I try to render my html file, the bootstrap stops working.

<?php 
//this is my html:
ob_start(); 
?>

<!-- All my file goes here, including the <link></link> to the boostrap -->


<?php $html = ob_get_clean() ?>

Then, in another file (which i use to create the PDF) i did this:

<?php


require_once 'route/to/dompdf/autoload.inc.php';
use Dompdf\Dompdf;
$dompdf = new Dompdf();

include "firstFileWithHtml.php";
$options = $dompdf->getOptions();
$options->set(array('isRemoteEnabled' => true));
$dompdf->setOptions($options);

$dompdf->loadHtml($html);
$dompdf->setPaper("letter");

$dompdf->render();

$dompdf->stream("file_pdf", array("Attachment" =>false));


?>

And It generates the PDF preview, just without the boostrap.

is there an option i'm missing?

I tried downloading bootstrap, I tried with another versions (4.3.1, 5.0.2, 5.3.0), I tried using the CDN, but nothing is working.

I also tried the solutions in this answer, but putting the css in the same file didn't work, and the method set_base_path is deprecated.

5
  • I would bet that it can't follow the <link> tags. Are their href values relative links like /foo.css, or are they fully-qualified with a https://example.com/ at the start?
    – ceejayoz
    Commented Jul 20, 2023 at 17:35
  • Does this answer your question? How to apply bootstrap style in dompdf Commented Jul 20, 2023 at 17:35
  • this is the href: <link rel="stylesheet" href="../user/bootstrap-5.0.2-dist/css/bootstrap.min.css"> Commented Jul 20, 2023 at 17:43
  • i forgot to mention: I also put ALL the bootstrap in the same file as the html, I tried using the set_base_path, but it is now deprecated (and I don't really understand how that works :p) Commented Jul 20, 2023 at 17:45
  • There's very little to go on in your question. The code is minimal, and all we know about the problem is that PDF output is "without bootstrap" and "bootstrap stops working". Not sure what that means? My best guess is that you use a reasonably wide browser screen, > 1000px, whereas the PDF renders at somewhere below 900px. That might give the impression that the output looks quite different in the PDF. What you could do, to illustrate what the problem is, is upload 2 images, one of the page in the browser, and one of the PDF. Commented Jul 20, 2023 at 18:08

2 Answers 2

1

I found the solution, Thanks to @ceejayoz for the hint.

if I put the href like this:

<link rel="stylesheet" href=""../user/bootstrap-5.0.2-dist/css/bootstrap.min.css">

It didn't work. But if I use this instead:

<link rel="stylesheet" href="http://<?php echo $_SERVER['HTTP_HOST']; ?>/PROJECT/user/bootstrap-5.0.2-dist/css/bootstrap.min.css">

it works like a charm.

1

I was able to make bootstrap 5 work. I am doing a laravel project and kind of needed dompdf.

first, get the content of the minified version of bootstrap 5

$bootstrap5 = file_get_contents(public_path() . '/css/bootstrap.min.css');

Then pass "$bootstrap5" into the $data variable

$data = [
'professions' => $professions,
'logo' => $imageLogo,
'css' => $bootstrap5,
];

Then load the PDF with $data

$pdf = Pdf::setPaper('letter', 'portrait')->setOptions(['dpi' => 100, 
'defaultFont' => 'Nunito, sans-serif', 'isHtml5ParserEnabled' => true, 
'isRemoteEnabled' => true, 'isJavascriptEnabled' => true])
->loadView('reports.staffing-report', $data);

In my staffing-report.php I added a style tag inside the and echoed "css" from the $data:

<style> {{ $css }} </style>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.