laravel pdf 下载不接受某些内联 CSS 属性

问题描述 投票：0回答：1

我有 

download_pdf.blade.php
文件，带有内联 CSS 属性。我正在使用 
dompdf
来生成 
pdf
。当我在浏览器中打开该文件时，一切正常，但当我下载 
pdf
时，一些样式消失了，我无法找出应该删除或调整哪些属性。

download_pdf.blade.php

@props(['receipt'])
<!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">
    <title>Receipt Download</title>
</head>
<body>
    <div style="max-width: 3xl; margin: auto; padding: 6px; background-color: white; border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);" id="invoice">
                        
        <div style=" justify-content: space-between; align-items: center;">
            <div>
                <img src="https://companieslogo.com/img/orig/AMZN-e9f942e4.png?t=1632523695" alt="company-logo" height="100" width="100" />
            </div>

            <div style="text-align: right;">
                <p>
                Amazon 2.0
                </p>
                <p style="color: #718096; font-size: 0.875rem;">
                amazon2.com
                </p>
                <p style="color: #718096; font-size: 0.875rem; margin-top: 0.25rem;">
                +1(414)414-4141
                </p>
                <p style="color: #718096; font-size: 0.875rem; margin-top: 0.25rem;">
                [email protected]
                </p>
            </div>
        </div>

        <div style=" justify-content: space-between; align-items: center;">
            <div>
                <p style="font-weight: bold; color: #2d3748;">
                Bill to :
                </p>
                <p style="color: #718096;">
                {{ $receipt->user->name }}
                {{-- <br /> --}}
                <p style="color: #718096;">102, San-Fransico, CA, USA</p>
                </p>
                <p style="color: #718096;">
                {{ $receipt->user->email }}
                </p>
            </div>

            <div style="text-align: right;">
                <p>Receipt id:<span style="color: #718096;">{{ $receipt->id }}</span></p>
                <p>Receipt number:<span style="color: #718096;">{{ $receipt->transaction_id }}</span></p>
                <p>Receipt date: <span style="color: #718096;">{{ \Carbon\Carbon::parse($receipt->created_at)->format("DD MMM YYYY") }}</span></p>
            </div>
        </div>

        <div style="margin-top: 2rem;">
            <table style="width: 100%;">
                <colgroup>
                    <col style="width: 100%;" />
                    <col style="width: 16.66667%;" />
                    <col style="width: 16.66667%;" />
                    <col style="width: 16.66667%;" />
                </colgroup>
                <thead style="border-bottom:1px solid #cbd5e0; color: #2d3748;">
                    <tr>
                        <th style="padding: 1rem 0.75rem; text-align: left; font-size: 1rem; font-weight: 600;">Items</th>
                        <th style=" padding: 1rem 0.75rem; text-align: right; font-size: 1rem; font-weight: 600;">Quantity</th>
                        <th style=" padding: 1rem 0.75rem; text-align: right; font-size: 1rem; font-weight: 600;">Price</th>
                        <th style="padding: 1rem 1rem; text-align: right; font-size: 1rem; font-weight: 600;">Amount</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($receipt->products as $product)
                        <tr style="color: #2d3748;">
                            <td style="max-width: 0; padding: 1rem 0.75rem; text-align: left; font-size: 1rem; border-bottom: 1px solid #cbd5e0;">
                                <div style="font-weight: 600; color: #2d3748;">{{ $product->title }}</div>
                                <div style="margin-top: 0.25rem; color: #718096; overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;">{{ $product->description }}</div>
                            </td>
                            <td style="padding: 1rem 0.75rem; text-align: right; font-size: 1rem; border-bottom: 1px solid #cbd5e0; color: #718096;">{{ $product->pivot->quantity }}</td>
                            <td style="padding: 1rem 0.75rem; text-align: right; font-size: 1rem; border-bottom: 1px solid #cbd5e0; color: #718096;">${{ $product->price }}</td>
                            <td style="padding: 1rem 1rem; text-align: right; font-size: 1rem; border-bottom: 1px solid #cbd5e0; color: #718096;">${{ $product->pivot->quantity * $product->price }}</td>
                        </tr>
                    @endforeach

                </tbody>
                <tfoot style=" flex-direction: column; align-items: flex-end;">
                    <tr>
                        {{-- <th style=" padding: 1rem 0.75rem; text-align: right; font-size: 1rem; font-weight: 400; color: #718096;">Subtotal</th> --}}
                        <th style="padding: 1rem 0.75rem; text-align: left; font-size: 1rem; font-weight: 400; color: #718096;">Subtotal</th>
                        <td style="padding: 1rem 1rem; text-align: right; font-size: 1rem; color: #718096;">${{ $receipt->total_amount }}</td>
                    </tr>
                    <tr>
                        {{-- <th style=" padding: 1rem 0.75rem; text-align: right; font-size: 1rem; font-weight: 400; color: #718096;">Tax</th> --}}
                        <th style="padding: 1rem 0.75rem; text-align: left; font-size: 1rem; font-weight: 400; color: #718096;">Tax</th>
                        <td style="padding: 1rem 1rem; text-align: right; font-size: 1rem; color: #718096;">$00.00</td>
                    </tr>
                    <tr>
                        {{-- <th style=" padding: 1rem 0.75rem; text-align: right; font-size: 1rem; font-weight: 400; color: #718096;">Discount</th> --}}
                        <th style="padding: 1rem 0.75rem; text-align: left; font-size: 1rem; font-weight: 400; color: #718096;">Discount</th>
                        <td style="padding: 1rem 1rem; text-align: right; font-size: 1rem; color: #718096;">0%</td>
                    </tr>
                    <tr>
                        {{-- <th style=" padding: 1rem 0.75rem; text-align: right; font-size: 1rem; font-weight: 600; color: #2d3748;">Total</th> --}}
                        <th style="padding: 1rem 0.75rem; text-align: left; font-size: 1rem; font-weight: 600; color: #2d3748;">Total</th>
                        <td style="padding: 1rem 1rem; text-align: right; font-size: 1rem; font-weight: 600; color: #2d3748;">${{ $receipt->total_amount }}</td>
                    </tr>
                </tfoot>
                
            </table>
        </div>
        <div style="border-top: 2px solid #cbd5e0; padding-top: 1rem; font-size: 0.875rem; color: #718096; text-align: center; margin-top: 1.6rem;">
            Thank you for shopping with Amazon 2.0
        </div>
    </div>
</body>
</html>


downloadreceipt
控制器中的方法

public function downloadReceipt($transactionId, Request $request) {
        // Ensure the user is authenticated
        if (!$request->user()) {
            return response()->json(['message' => 'Unauthenticated'], 401);
        }

        $order = $request->user()->orders()
                ->where('transaction_id', $transactionId)
                ->with('user', 'products')
                ->first();

        if (!$order) {
            return response()->json(['message' => 'There is no order with this order number'], 404);
        }

        $receipt = ['receipt' => $order];
        $pdf = Pdf::loadView('admin.pdf.download_pdf', $receipt);
        $todayDate = Carbon::now()->format('d-m-Y');
        return $pdf->download('receipt-'.$transactionId.'-'.$todayDate.'.pdf');
       
    }

这是我打开浏览器时在浏览器中看到的内容。 第一部分（因为整个事情无法容纳在一张照片中）

第二部分

这是我下载 pdf 并在计算机上打开时看到的内容。 第一部分

第二部分

而且，

dompdf
下载 pdf 需要太多时间。我能做点什么吗？

laravel api pdf pdf-generation
1个回答
0
投票

您正在使用 dompdf 不支持的 Flex 属性，如 

flex-direction
、
align-items
、
justify-content
等。

不要使用上述属性，而是尝试使用表内表或静态 

div
分区来设计发票。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.