Laravel по-русски

mstdmstd +3

Сообщений: 139

поддерживает ли html2pdf flexbox/bootstrap/css styles ?

Всем привет!
Кто сталкивался, а поддерживает ли либа spipu/html2pdf 5.2 flexbox/bootstrap/css styles ?
Если да, то есть ли там какие особенности и можно ли примерчик?

Я попробовал - вроде нет, а гугл вывел много протеворечивой инфы...

laravel 5.7 / bootstrap 4 / html2pdf 5.2

Спасибо!

mstdmstd +3

Сообщений: 139

Re: поддерживает ли html2pdf flexbox/bootstrap/css styles ?

Чуть подробнее как я делал.
Я пытаюсь внедрить на свою resources/views/Backend/invoice/edit.blade.php страницу
пример flexbox-layout-а
https://jsfiddle.net/MadLittleMods/LmYay/
выведя этот блок в отдельный файл resources/views/Backend/invoice/invoice_form.blade.php :

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

@section('content')
    @inject('viewFuncs', 'App\library\viewFuncs')
    
    <!-- Page Content : invoice view -->
    <div id="page-wrapper" class="card block_wrapper">
    
        <button type="button" class="btn btn-primary" onclick="javascript: backendInvoice.generatePdfFile() ; return false;"><span
                class="btn-label"><i class="fa fa-file-pdf-o fa-submit-button"></i></span> &nbsp;Print to pdf
        </button>
    
        @include($current_admin_template . '.invoice.invoice_form') // THIS IS MY flexbox-layout sample code
    
        
        <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() !!}
       
            // MANY FORM FIELDS
            <input type="hidden" id="pdf_content" name="pdf_content" value="">
            <input type="hidden" id="pdf_content_hidden_invoice_no" name="pdf_content_hidden_invoice_no" value="">
            <input type="hidden" id="pdf_content_hidden_invoice_id" name="pdf_content_hidden_invoice_id" value="">
            <input type="hidden" id="pdf_content_hidden_action" name="pdf_content_hidden_action" value="">
        </form>
            
            
    
    </div>
    <!-- /.page-wrapper page Content : invoice edit -->


@endsection



@section('scripts')
    <style>
        *, *:before, *:after
        {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
    
        html, body
        {
            width: 100%;
            height: 100%;
        
            margin: 0;
            padding: 0;
        }
    
        body
        {
            background: #444444;
        
            color: #cccccc;
            font-size: 14px;
            /* Helvetica/Arial-based sans serif stack */
            font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
        
        }
    
        .flexbox-parent  // I DEFINE FLEXBOX LAYOUT
        {
            width: 100%;
            height: 100%;
        
            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;
        }
    
        .block_wrapper {
            background-color : red; !important;
            border: 5px dotted red !important;
        }
        
        #table_report_available_spaces_by_zone td
        {
            border: 2px solid #999 !important;
        }
    
    </style>



    
    <link rel="stylesheet" href="{{ asset('/css/gijgo.min.css') }}" type="text/css">
    
    <script src="{{ asset('js/AutoNumeric/autonumeric@4.1.0') }}"></script>
    
    <script src="{{ asset('js/gijgo.min.js') }}"></script>
    <script src="{{ asset('js/'.$current_admin_template.'/invoice.js') }}{{  "?dt=".time()  }}"></script>
    
    <script>
        /*<![CDATA[*/

        var backendInvoice = new backendInvoice('edit',  // must be called before jQuery(document).ready(function ($) {
            <?php echo $appParamsForJSArray ?>
        );
        console.log('backendInvoice::')
        console.log(backendInvoice)

        jQuery(document).ready(function ($) {
            console.log('ready INSIDE::')

            backendInvoice.onBackendPageInit('edit')
        });

        /*]]>*/
    </script>

@endsection

and resources/views/Backend/invoice/invoice_form.blade.php :

<div class="card" style="min-width: 1100px; background-color: {{ $background_color }} !important; border:0px solid green; display: noneWWW;"
     id="div_invoice_content">
    
    
    <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-parent">
        <div class="flexbox-item header">
            Header
        </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>


</div> <!-- div_invoice_content -->

Javascript код на клике “Print to pdf" кнопки

backendInvoice.prototype.sendPdfToClient = function () {
    $("#div_invoice_content").css("display", "flex");
    var hidden_invoice_no = $("#hidden_invoice_no").val();
    var hidden_invoice_id = $("#hidden_invoice_id").val();
    var pdf_content = $("#div_invoice_content").html();

    $("#pdf_content").val(escapeHtml(pdf_content)); // I nneed it not to get HTML code in resulting page
    $("#pdf_content_hidden_invoice_no").val(hidden_invoice_no);
    $("#pdf_content_hidden_invoice_id").val(hidden_invoice_id);
    $("#pdf_content_hidden_action").val('send_by_email');

    var theForm = $("#form_print_to_pdf_content");
    theForm.submit();
    $("#div_invoice_content").css("display", "none");
}

И код в Laravel-контролле:

$html2pdf = new HTML2PDF('P','A4','en', true, 'UTF-8');

        $times_file_path= base_path() . '/vendor/tecnickcom/tcpdf/fonts/times.php';

        $html2pdf->addFont('times', 'bold', $times_file_path);  //. /public/file at /fonts/roboto/Roboto_regular.ttf

        $html2pdf->setTestTdInOnePage(false);

        $html2pdf->WriteHTML(htmlspecialchars_decode($pdf_content)); // I NEED TO DECODE  HTML-code
        $html2pdf->Output($save_to_file,'F');

        \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);

И в результате css-классы определенные в @section('scripts') отобраэаются на странице
и при генерации в pdf-файл все классы теряются и выводится простой текст.

Я пытался css-классы из внешнего resources/views/Backend/invoice/edit.blade.php
перенести в файл resources/views/Backend/invoice/invoice_form.blade.php
завернув в <style> </style> блок - но это не помогло...
А как правильно ?