为什么生成的 pdf 不是 CSS 样式的？答案

【问题标题】：Why the generated pdf doesn't is not CSS styled?为什么生成的 pdf 不是 CSS 样式的？
【发布时间】：2021-11-08 22:06:42
【问题描述】：

我有一个这样的headear视图welcome.blade.php：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Blog</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet" media="print">
    <link href="{{ asset('css/example.css') }}" rel="stylesheet" media="print">
    <link rel="preconnect" href="https://fonts.gstatic.com">
</head>

<body class="font-sans antialiased w-full">

....

我正在使用tailwindcss，这个页面有一个响应式布局，有很多颜色、svgs 等。它工作正常，但是我正在尝试用 barryvdh/laravel-dompdf 生成这个页面的 pdf。但是下载下来的pdf没有任何样式，没有颜色，有衬线字体，而且布局也很乱。

pdf 功能的路径：

Route::get('/', [PDFController::class, 'generatePDF']);

PDF控制器：

use Illuminate\Http\Request;
use PDF;

class PDFController extends Controller
{
    public function generatePDF()
    {
        $data = [
          'title' => 'PDF Title',
          'author' => 'Author'
        ];

        $pdf = PDF::loadView('welcome', $data);
        return $pdf->download('test.pdf');
    }
}

你知道可能是什么问题吗？

【问题讨论】：

标签： css laravel pdf tailwind-css dompdf

【解决方案1】：

样式和视图不会自动继承，domPdf 需要输入特定的视图和 css 才能正常工作。

看看这里：

How to include the external style sheet in dom pdf

这是关于如何实现这一目标的非常详细的指南：

https://www.positronx.io/laravel-pdf-tutorial-generate-pdf-with-dompdf-in-laravel/

【讨论】：

谢谢，你知道是否可以将tailwind用于应该设置为dompdf的css？
我相信只要你包含编译版本。尽管 domPdf 支持所有 css 属性，但我不能 100% 确定，您应该查看文档以确保。