Question

所以即时尝试打印带有桌子的pdf就像是使用HTML / CSS的发票，我使用laravel php调用数据。所以我试图实现这个

但到目前为止，我能做的就是这样

你可以看到表格没有显示它应该在哪里，而是跳过整个第一页并从下一页开始。我需要它在第一页上打印。我怎样才能做到这一点？我的代码如下

<style>
            * {
                margin:0;
                padding:0;
                font-family: 'Muli' !important;
            }

            html{
                font-family: 'Muli' !important;
                padding: 0;
            }
            body{
                padding: 20px;
                background-color: #fff;
            }


            header{
                width: 100%;
                border-bottom: 1px solid #1f1f1f;
                position: fixed;
                height: 80px;
                padding: 20px 20px 0px;
                margin-bottom: 0px;
            }
            header .address{
                width: 50%; 
                display: inline-block;
                vertical-align: middle;
            }
            header .address p{
                color: #6a6a6a;
                font-size: 12px;
                margin: 0px;
                padding: 0px;
                padding-top: 20px;
            }
            header .logo{
                width: 49%; 
                display: inline-block;
                vertical-align: top;
            }
            
            header .logo img{
                padding-top: 10px;
                float: right;
                height: 50%;
            }

            .pagenum:before { content: counter(page); }

            footer{
                position: fixed;
                bottom:80px;
            }
            footer p{
                text-align:right;
                padding: 15px;
                color: #6a6a6a;
                font-size: 10px;
            }

            .details{
                margin-top: 100px;
                margin-bottom: 10px;
                font-size: 12px;
                color: #1f1f1f;
            }

            .new-section{
                margin-top: 10px;
                margin-bottom: 10px;
                font-size: 12px;
                color: #1f1f1f;
            }
            .new-section .title {
                font-weight: 500;
                text-transform: uppercase;
                margin-top: 20px;
                padding: 8px 10px 10px 20px;
                background-color: #5b5b5b;
                color: #fff;
            }
            .new-section .details {
                margin-top: 10px;
            }

            table{
                width: 100%;
            }
            table thead tr th{
                padding: 15px;
                font-size: 14px;
                font-weight: lighter;
            }
            table thead tr th:last-child{
                text-align: right;
            }
            table tr td{
                padding: 15px;
                vertical-align: top;
                border-top: 1px solid #b9b9b9;
            }
            table tr td:last-child{
                text-align: right;
            }
            table tr:last-child td{
                border-bottom: 1px solid #b9b9b9;
            }
            table tr td .receipt-image{
                width: 100%;
                height: 150px;
                background-position: center center;
                background-size: cover;
                background-repeat: no-repeat;
            }
            table tr.detail-section td {
                border: none;
                padding-top: 8px;
                padding-bottom: 8px;
            }
            table thead tr th{
                padding-top: 120px;
            }
        </style>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Expense Report as of {{date('Ymd:His')}}</title>

        <link href="https://fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

    </head>
    <?php
        $total_amount = 0;
        $total_reimubursable = 0;
        $currency = '';
        // $path = public_path(preg_replace('/public/', '', $company->company_logo));

        $path = public_path('/uploads/header.jpg');
        $type = pathinfo($path, PATHINFO_EXTENSION);
        $data = file_get_contents($path);
        $base64 = 'data:image/'.$type.';base64,'.base64_encode($data);
    ?>
    <body>

         <header>
            <div class="address">
                <p>{{nl2br($company->company_address)}}</p>
               {{--  <p>Digi Telecommunications Sdn Bhd</p>
                <p>Lot 10, Jalan Delima 1/1</p>
                <p>40000 Shah Alam, Selangor, Malaysia</p> --}}
            </div>
            <div class="logo">
                <img src="{{$base64}}" alt="alt.expense">
            </div>
        </header>

        <footer>
            <p>Generated by alt.hr on {{date('d/m/Y') }} <br>
            Page: <span class="pagenum"></span></p>
            {{-- <p>Email: support@alt.hr</p> --}}
        </footer>

        <div class="details">
            <p>Name: {{$user->name}}</p>
            <p>Employee ID: {{$user->employee_id}}</p>
            <p>Statement Period: {{\Carbon\Carbon::parse($fromDate)->format('d-M-Y')}} until {{\Carbon\Carbon::parse($toDate)->format('d-M-Y')}}</p>
            <p>Report Type: Self</p>
        </div>
        @foreach($expenses as $expense)
            <?php
                $total_amount += $expense->total_amount;
                $currency = $expense->currency ? : $expense->type->currency;
            ?>
        @endforeach
        <div class="new-section">
            <div class="title">
                Expense Claims Summary
            </div>
            <div class="details">
                <p>Total Claims : {{count($expenses)}}</p>
                <p>Total Claim Amount: {{$currency}} {{$total_amount}}</p>
            </div>
        </div>
        <div class="new-section" >
            <div class="title">
                Transactions
            </div>
            <div class="details">
                <table cellpadding="0" cellspacing="0" style="page-break-before : always;">
                    <thead>
                        <tr>
                            <th>Transaction ID</th>
                            @if($dateFilter == 'invoice_date')
                                <th>Submitted Date</th>
                            @elseif($dateFilter == 'submitted_at')
                                <th>Invoice Date</th>
                            @else
                                <th>Submitted Date</th>
                                <th>Invoice Date</th>
                                <th>Reviewed Date</th>
                            @endif
                            <th>Expense Type</th>
                            <th>GST Amount({{$currency}})</th>
                            <th>Total({{$currency}})</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($expenses as $expense)
                            <tr style="background-color: #efeff0;">
                                <td>{{$expense->ref_no}}</td>
                                @if($dateFilter == 'invoice_date')
                                    <td>{{$expense->submitted_at ? $expense->submitted_at : ''}}</td>
                                @elseif($dateFilter == 'submitted_at')
                                    <td>{{$expense->invoice_date ? $expense->invoice_date->format('d-M-Y') : ''}}</td>
                                @else
                                    <td>{{$expense->submitted_at ? $expense->submitted_at : ''}}</td>
                                    <td>{{$expense->invoice_date ? $expense->invoice_date->format('d-M-Y') : ''}}</td>
                                    <td>{{$expense->approver->last()->pivot->updated_at->format('d-M-Y')}}</td>
                                @endif
                                <td>{{$expense->title}}</td>
                                {{-- <td>{{$expense->user->name}}</td> --}}
                                <td>{{number_format($expense->gst, 2, '.', '')}}</td>
                                <td>{{$expense->total_amount}}</td>
                            </tr>
                            @if($expense->mileage_amount != '0.00' || $expense->toll_amount != '0.00' || $expense->parking_amount != '0.00')
                                <tr class="detail-section">
                                    <td>Description</td>
                                    <td>{{$expense->description}}</td>
                                    <td colspan="2">&nbsp;</td>
                                </tr>
                            @endif
                            @if($expense->mileage_amount != '0.00')
                                <tr class="detail-section">
                                    <td>Mileage Total</td>
                                    <td>{{$currency}}{{$expense->mileage_amount}} ({{$expense->distance}}{{$expense->type->unit}})</td>
                                    <td colspan="2">&nbsp;</td>
                                </tr>
                            @endif
                            @if($expense->toll_amount != '0.00')
                                <tr class="detail-section">
                                    <td>Toll</td>
                                    <td>{{$currency}} {{$expense->toll_amount}}</td>
                                    <td colspan="2">&nbsp;</td>
                                </tr>
                            @endif
                            @if($expense->parking_amount != '0.00')
                                <tr class="detail-section">
                                    <td>Parking</td>
                                    <td>{{$currency}} {{$expense->parking_amount}}</td>
                                    <td colspan="2">&nbsp;</td>
                                </tr>
                            @endif
                            @if($expense->travel_id)
                                <tr class="detail-section">
                                    <td>Description</td>
                                    <td>{{$expense->travel->description}}</td>
                                    <td colspan="2">&nbsp;</td>
                                </tr>
                                <tr class="detail-section">
                                    <td>Tagged TR</td>
                                    <td>
                                        @foreach($expense->travel->travel_data as $leg)
                                            @if($leg->removed)
                                                @continue
                                            @endif
                                            {{$leg->title}} <br>
                                        @endforeach
                                    </td>
                                    <td colspan="2">&nbsp;</td>
                                </tr>
                            @endif
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </body>
</html>

如何使用html css php正确打印pdf表

0 个答案: