Search code examples
phplaravelpdf-generationlaravel-dompdfbarryvdh

problem with barryvdh/laravel-dompdf can´t use bootstrap styles

Library it´s:

composer require barryvdh/laravel-dompdf

i´m trying to create pdf in my app with laravel 10.20. I created my blade and all content it´s ok.

enter image description here

I have any rows, columns, etc and all my content when i access to route that i can show my blade, it´s ok.

In my controller i have this code:

$pdf = PDF::loadView('Pdfs.precontract', ['precontrato' => $personalDataPrecontract])
                            ->setPaper('a4', 'landscape')
                            ->setOption('zoom', 1.2)
                            ->setOption('footer-center', '')
                            ->setOption('footer-font-size', 5);
            $pdf->set_base_path("/public/css/");

            $path = public_path('/storage/pruebas');
            $fileName =  'precontrato.pdf' ;
            $pdf->save($path . '/' . $fileName);
            $pdf->download($fileName);

My problem, it´s when i create my pdf with controller, not load my head styles. In my blade, i haver any includes (head, footer, etc) in my head, i have this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link type="text/css" media="all" rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/style_pdf_pre.css') }}">
</head>
<body>
    <header>
        <div class="row justify-content-center align-items-center w-100 mt-3">

My bootstrap version it´s in PDFs, v4.6.2 i trayed with 3.3.7, but i have same problem.

When generate my pdf, i can show it so.

enter image description here

I haven´t got rows.. columns...

Anybody can say me that i´m doing wrong? Thanks for readme and sorry for my bad english

Solution

  • By default barryvdh/laravel-dompdf does not support boostrap yet and it supports CSS 2.1 selector syntaxes. You can find the dompdf supported CSS selector syntaxes here.

    But if insist on using bootstrap you may try:

    $pdf->setBasePath(public_path());

    Then in you HTML use:

    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="all">

    But then you're likely to encounter another issue that is col-md-12 will result in a div outside the pdf sheet. And to fix that you need to set the DPI in the following format:

    $pdf = new \Dompdf\Options();
$pdf->setDpi(150);
$dompdf = new \Dompdf($pdf);

    However, for PDF's with little design that can be pulled through small amount of CSS I prefer to do the design manually. You may take some idea from the this repository that I've created for simple invoices and often use it.