CSS not loading on generated PDF

[Marcos Zotti]

• PHP: 7.3;
• Laravel: 7.29;
• knplabs/knp-snappy: 1.4;

Hello,

There's some issue ocurring when snappy creates the PDF, and the CSS supose to load on the view is not working.

This is the view with the correct CSS:

And this is the generated PDF:

The snappy code is configured this way:

public function createWithMultipleKits(Collection $kits, $disk = "local")
{
    $base_path = self::BASE_PATH . "/many";
    $size = ['100mm', '80mm'];
    $snappy = $this->configHtmlToPdf($size);
    $filename = 'etiquetas_internas_' . Str::random('6');
    $fileFullLocation = $base_path . "/{$filename}.pdf";
    $renderTicketHtml = view("pdfs.kit.ticket.index", ["kits" => $kits->map(function ($kit) {
        return [
            "id" => $kit->id,
            "number" => $kit->number,
            "type" => $kit->kit_type->name,
            "batch" => $kit->batch,
            "qrcode" => QrCode::generate(env("APP_FRONTEND_URL") . "/cadastrar-kit?kit_number=" . $kit->number)
        ];
    })->toArray()]);
    if (Storage::disk('local')->exists($fileFullLocation)) {
        Storage::disk('local')->delete($fileFullLocation);
    }
    $snappy->generateFromHtml($renderTicketHtml, storage_path("app") . "/" . $fileFullLocation, ['encoding' => 'UTF8']);
    return [$fileFullLocation, "$filename.pdf"];
}

private function configHtmlToPdf($size = ['100mm', '100mm'])
{
    list ($heigth, $width) = $size;

    $snappy = new Pdf('wkhtmltopdf');
    $snappy->setOption('header-spacing', '0');
    $snappy->setOption('enable-local-file-access', true);
    $snappy->setOption('margin-top', '0mm');
    $snappy->setOption('margin-bottom', '0mm');
    $snappy->setOption('margin-left', '0cm');
    $snappy->setOption('margin-right', '0cm');
    $snappy->setOption('header-font-size', '3');
    $snappy->setOption('footer-spacing', '5');
    $snappy->setOption('footer-line', true);
    $snappy->setOption('footer-font-size', '3');
    $snappy->setOption('page-height', $heigth);
    $snappy->setOption('page-width', $width);

    return $snappy;
}

The CSS is coded directly on the view file (inside the head tag).

[nikolinmajmari]

Could it be because wkhtml2pdf has some issues with flexbox.
If so check here for more info https://stackoverflow.com/questions/57020675/using-flex-css-with-wkhtmltopdf

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.