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

在我的laravel 5.7/bootstrap 4.4应用程序中，我使用 Spatiale/browsershot 3.37和spipu/html2pdf 5.2生成pdf文件 对于我生成的pdf文件，我要设置100%高度、页脚和页脚的布局 标题如下：

但导入的代码块在浏览器的“我的刀片”页面上看起来正常，但在生成时无效 pdf：因为所有css样式都丢失了

通过单击“至pdf文件”，页面内容将呈现为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);
}

在我的刀片文件中：

@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解析器插件中的工作方式与此不同。。让所有css内联。例如，没有文件可以直接读取

我未能将css类添加到spipu/html2pdf中，因此不得不转入 使用样式定义：

Browsershot::url('https://example.com')
    ->setOption('addStyleTag', json_encode(['content' => 'body{ font-size: 14px; }']))
    ->save($pathToImage);

---

这对我来说还行…

你的意思是我必须从刀片文件中剪切样式定义：。flexbox父项{…}。flexbox项{…}。。。1）将它们放入新的css文件中？2） 在我的刀片文件中创建此css文件的绝对路径？是，在刀片文件中不使用类进行内联样式设置。它会表现得更好。或者你可以创建类，如果你愿意！请看**修改块1请看**修改块2

</footer>
<link rel="stylesheet" href="http://local-boxbooking2.com/css/gijgo.min.css" type="text/css">
<link rel="stylesheet" href="http://local-boxbooking2.com/css/flb_layout.css" type="text/css">

> <link rel="stylesheet" href="{{
> public_path(mix('/path/to/styles.css')) }}" />

<link rel="stylesheet" href="{{ public_path('/css/flb_layout.css') }}">

const mix = require('laravel-mix');


let current_admin_template= 'Backend';
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/' + current_admin_template + '/backend.scss', 'public/css/' + current_admin_template)
    .sass('resources/sass/' + current_admin_template + '/style_lg.scss', 'public/css/' + current_admin_template)
    .sass('resources/sass/' + current_admin_template + '/style_md.scss', 'public/css/' + current_admin_template)
    .sass('resources/sass/' + current_admin_template + '/style_sm.scss', 'public/css/' + current_admin_template)
    .sass('resources/sass/' + current_admin_template + '/style_xs_320.scss', 'public/css/' + current_admin_template)
    .sass('resources/sass/' + current_admin_template + '/style_xs_480.scss', 'public/css/' + current_admin_template)
    .sass('resources/sass/' + current_admin_template + '/style_xs_600.scss', 'public/css/' + current_admin_template)
    .sass('resources/sass/debug.scss',  'public/css' )
;

Browsershot::url('https://example.com')
    ->setOption('addStyleTag', json_encode(['content' => 'body{ font-size: 14px; }']))
    ->save($pathToImage);