在生成的 pdf 中使用 html2pdf，因为所有 css 样式都丢失了

Question

在我使用的 laravel 5.7 / bootstrap 4.4 应用程序中 spatie/browsershot3.37和spipu/html2pdf5.2生成pdf文件对于我生成的 pdf 文件，我希望将布局设置为 100% 高度和页脚 header 喜欢这里：https://jsfiddle.net/MadLittleMods/LmYay/

但是导入的代码块在浏览器的 blade 页面上看起来不错，但在生成的代码中无效 pdf : 因为所有 css 样式都丢失了。

点击“To pdf file”将页面内容渲染成pdf文件：

Browsershot::html(htmlspecialchars_decode($pdf_content))
           ->showBackground()
           ->save($save_to_file);

if($hidden_action== 'upload') {
    \Response::download($save_to_file, $filename_to_save, array('Content-Type: application/octet-stream', 'Content-Length: pdf'));
    return response()->download($save_to_file, $filename_to_save)->deleteFileAfterSend(true);
}

在我的 blade 文件中：

@extends($current_admin_template.'.layouts.backend')


@section('content')

    @inject('viewFuncs', 'App\library\viewFuncs')

    <div id="page-wrapper" class="card">


  // THIS PART LOOKS OK IN BROWSER BUT IN GENERATED PDF INVALID AS ALL CSS CLASSES ARE LOST
        <div class="flexbox-parent" id="div_invoice_content" style="display: flex;">
            <input type="hidden" id="hidden_invoice_no" name="hidden_invoice_no" value="{{$invoice_no}}">
            <input type="hidden" id="hidden_invoice_id" name="hidden_invoice_id" value="{{$invoice_id}}">

            <div class="flexbox-item header">
                Header $invoice_no::{{$invoice_no}}<br>
                $invoice_id::{{$invoice_id}}
            </div>

            <div class="flexbox-item fill-area content flexbox-item-grow">
                <div class="fill-area-content flexbox-item-grow">
                    Content
                    <br /><br />
                    Emulates height 100% with a horizontal flexbox with stretch
                    <br /><br />
                    This box with a border should fill the blue area except for the padding (just to show the middle flexbox item).
                </div>
            </div>

            <div class="flexbox-item footer">
                Footer
            </div>
        </div>


        <form method="POST" action="{{ url('/admin/generate-pdf-by-content') }}" accept-charset="UTF-8" id="form_print_to_pdf_content"
              name="form_print_to_pdf_content"
              enctype="multipart/form-data">
            {!! csrf_field() !!}

            <div class="form-row m-3">
            ...
            FORM CONTENT
            ...
            

            </div>
        </section> <!-- class="card-body" -->

    </div>
    <!-- /.page-wrapper page Content : invoice edit -->


@endsection



{{--@section('head')--}}
{{--@push('scripts')--}}
    <style  lang="css">
        .flexbox-parent
        {
            height: 842pt !important;
            width: 595pt !important;

            display: flex;
            flex-direction: column;

            justify-content: flex-start; /* align items in Main Axis */
            align-items: stretch; /* align items in Cross Axis */
            align-content: stretch; /* Extra space in Cross Axis */

            background: rgba(255, 255, 255, .1);
        }

        .flexbox-item
        {
            padding: 8px;
        }
        .flexbox-item-grow
        {
            flex: 1; /* same as flex: 1 1 auto; */
        }

        .flexbox-item.header
        {
            background: rgba(255, 0, 0, .1);
        }
        .flexbox-item.footer
        {
            background: rgba(0, 255, 0, .1);
        }
        .flexbox-item.content
        {
            background: rgba(0, 0, 255, .1);
        }

        .fill-area
        {
            display: flex;
            flex-direction: row;

            justify-content: flex-start; /* align items in Main Axis */
            align-items: stretch; /* align items in Cross Axis */
            align-content: stretch; /* Extra space in Cross Axis */

        }
        .fill-area-content
        {
            background: rgba(0, 0, 0, .3);
            border: 1px solid #000000;

            /* Needed for when the area gets squished too far and there is content that can't be displayed */
            overflow: auto;
        }
    </style>
{{--@endpush--}}

{{--@endsection--}}




@section('scripts')


    <link rel="stylesheet" href="{{ asset('/css/gijgo.min.css') }}" type="text/css">

    <script src="{{ asset('js/AutoNumeric/autonumeric@4.1.0') }}"></script>
    ...

@endsection

我试图在页面的几个地方放置

在生成的 pdf 中使用 html2pdf，因为所有 css 样式都丢失了

With html2pdf in generated pdf as all css styles are lost

pdf-generation

laravel-5