MPDF - 表格边框和单元格边框未使用 css 显示，但 HTML 正在工作答案

【问题标题】：MPDF - table border and cell boders are not showing with css but HTML is workingMPDF - 表格边框和单元格边框未使用 css 显示，但 HTML 正在工作
【发布时间】：2021-08-09 01:55:51
【问题描述】：

我正在使用 laravel 框架。在我的代码中，HTML 表格视图没问题。但是当我使用 mpdf 将其转换为 pdf 时，表格显示没有任何边框。我在同一个 html 中使用 css。不包含外部样式表我的代码在这里

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <style>
        td{
           border-top: 1px dotted black;
           border-bottom: 1px dotted black;
           border-left: 1px dotted black;
           border-right: 1px dotted black;
        }
        table {
            margin-left: 5px;
            border: 1px solid black;
        }
        td {
            border: 1px solid black; 
            
        }

    </style>
    <title>Document</title>
</head>

<body>
    <table class="pdf">
        <thead>
            <tr>
                <th>Name</th>
                <th>Phone</th>
                <th>Password</th>
                <th>Role ID</th>
            </tr>
        </thead>
        <tbody style="font-size: 14px;">
            @foreach ($users as $user)
                <tr>
                    <td>{{ $user->name }}</td>
                    <td>{{ $user->mobile }}</td>
                    <td style="width: 20%;">{{ $user->password }}</td>
                    <td>{{ $user->department_id }}</td>
                    <td>{{ $user->i }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
        integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js"
        integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous">
    </script>
</body>

</html>

这是我的控制器

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;
use Mpdf\Mpdf;
use Illuminate\Support\Facades\View;
// use phpDocumentor\Reflection\PseudoTypes\False_;

class PdfController extends Controller
{
    public function index()
    {
        $users = User::all();
        return view('pdf',compact('users'));
    }
 
    public function generate()
    {
        require_once base_path('vendor/autoload.php');
        $defaultConfig = (new \Mpdf\Config\ConfigVariables())->getDefaults();
        $fontDirs = $defaultConfig['fontDir'];
        $defaultFontConfig = (new \Mpdf\Config\FontVariables())->getDefaults();
        $fontData = $defaultFontConfig['fontdata'];
        $custom_font_path = storage_path().'\fonts';
        // dd($custom_font_path);
        $mpdf = new \Mpdf\Mpdf([
            'fontDir' => array_merge($fontDirs, [
               $custom_font_path,
            ]),
            'fontdata' => $fontData + [
                'gayathri' => [
                    'R' => 'Gayathri-Regular.ttf',
                    'useOTL' => 0xFF, 
                ]
            ],
            'default_font' => 'gayathri'
        ]);
        $mpdf->SetFont('dejavusanscondensed');
        $mpdf->simpleTables=true;
        // $mpdf->packTableData=true;
        // $mpdf->keep_table_proportions=TRUE;
        // $mpdf->shrink_tables_to_fit=1;       
        // $users = User::all();
        // foreach($users as $user)
        // {
        //     $mpdf->WriteHTML('<p style="font-size:28px;">'. $user->name .'</p> ');
        // }
        // calculate two numbers
        $users = User::all();
        $view = View::make('pdf', compact('users'));
        $mpdf->WriteHTML($view);
        $mpdf->Output();  
    }
}

在生成的pdf中没有边框但是单元格划分和其他布局都可以，如何为整个表格包含边框。（包括单元格，列等）

【问题讨论】：

标签： php html css laravel mpdf

【解决方案1】：

不要使用样式标签。尝试改用样式表：

$stylesheet = file_get_contents('css/style.css');
//CSS
$mpdf->WriteHTML($stylesheet, \Mpdf\HTMLParserMode::HEADER_CSS);//This is css/style only and no body/html/text

//BODY
$mpdf->WriteHTML($html,\Mpdf\HTMLParserMode::HTML_BODY);//This is html content, without <head> information.

看看这个documentation。

【讨论】：