2

我使用 barryvdh PDF 来生成我的发票模板的 PDF。

为了创建发票模板,我在 laravel 中创建了一个刀片,并在其中应用了 bootsrap css。

在加载该刀片时,它看起来与加载的引导类正确。但是当我生成 PDF 时,它需要我的 style.css 但 Bootstrap 类不会加载。

这是我的lumb_sum_invoice_template_1.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title page-title></title>
    <link href='https://app.dayjibe.com/app/styles/fonts.googleapis.css' rel='stylesheet' type='text/css'>
    <link href="css/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://app.dayjibe.com/app/styles/style.css" rel="stylesheet">
</head>
<body class="bodyopacity" landing-scrollspy id="page-top">
<!-- Main view  -->
<div>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">

                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-lg-8">
                                <div class="form-group" >
                                    <div class="col-sm-2">
                                        <img src="###LOGOPATH###" style="width:100px;height:50px;margin-top:2em;" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="margin-top:1em;">
                            <div class="col-sm-4" style="float:right; " >
                                <div class="form-group" style="clear:both;line-height:0;" >
                                    <div class="col-sm-3" style="width:115px;text-align:right;">
                                        <strong>Invoice Date:</strong>
                                    </div>
                                    <div class="col-sm-4 input-group" style="text-align:left;">
                                        ###INVOICEDATE###
                                    </div>
                                </div>
                                <div class="form-group" style="clear:both;">
                                    <div class="col-sm-3" style="width:115px;text-align:right;">
                                        <strong>Project#:</strong>
                                    </div>
                                    <div class="col-sm-4" style="padding-left:0;padding-right:0;text-align:left;">
                                        ###PROJECTNUMBER###
                                    </div>
                                </div>
                                <div class="form-group" style="clear:both;padding-top:0.5em;" >
                                    <div class="col-sm-3" style="width:115px;text-align:right;">
                                        <strong>Invoice#:</strong>
                                    </div>
                                    <div class="col-sm-4" style="padding-left:0;padding-right:0;text-align:left;">
                                        ###INVOICENUMBER###
                                    </div>
                                </div>
                                <div class="form-group" style="clear:both;padding-top:0.5em;" >
                                    <div class="col-sm-3" style="width:115px;text-align:right;">
                                        <strong>Due Date:</strong>
                                    </div>
                                    <div class="col-sm-4 input-group" style="text-align:left;">###DUEDATE###
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="margin-top:1em;">
                            <div class="col-lg-8" >
                                <div class="form-group" >
                                    <div class="col-sm-2">
                                        <label class="control-label">###CLIENT###</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="margin-top:1em;">
                            <div class="col-lg-8" >
                                <div class="form-group" >
                                    <div class="col-sm-2">
                                        <label class="control-label">###CLIENTADDRESS###</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="margin-top:1em">
                            <div class="col-sm-8 input-group" >
                                <div class="col-sm-8 input-group date" style="float:left;text-decoration:underline;margin-left:2em;">
                                    <strong>Professinal Service from&nbsp;###INVOICEFROMDATE###&nbsp;&nbsp;to&nbsp;&nbsp;###INVOICETODATE###</strong>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="margin-top:2em;">
                            <table class="table table-bordered" style="width:90%;margin-left:2em;" >
                                <thead>
                                <tr>
                                    <th class="col-sm-1" rowspan="2" style="text-align:center;vertical-align:center;">Contract Type</th>
                                    <th class="col-sm-2" rowspan="2" style="text-align:center;vertical-align:center;" >Phase Name</th>
                                    <th class="col-sm-1" rowspan="2" style="text-align:center;">Contract Amount</th>
                                    <th class="col-sm-2" colspan="2" style="text-align:center;" >Previously Invoice</th>
                                    <th class="col-sm-2" colspan="2" style="text-align:center;">Current Period</th>
                                    <th class="col-sm-2" colspan="2" style="text-align:center;">Current Balance</th>
                                </tr>
                                <tr>
                                    <th class="col-sm-1" style="text-align:center;">% OR Unit</th>
                                    <th class="col-sm-1" style="text-align:center;">Amount</th>
                                    <th class="col-sm-1" style="text-align:center;">% OR Unit</th>
                                    <th class="col-sm-1" style="text-align:center;">Amount</th>
                                    <th class="col-sm-1" style="text-align:center;">% Unit</th>
                                    <th class="col-sm-1" style="text-align:center;" >Amount</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td colspan="9" style="text-align:center;vertical-align:center;"><strong>###INVOICEDATA###</strong></td>
                                </tr>
                                <tr ng-show="projectInvoice.PhaseData.total_phase_data.length > 0">
                                    <td class="col-sm-1" colspan="2" ><strong>Totals for Phases</strong></td>
                                    <td class="col-sm-1" style="text-align:right;">$###CONTRACT-TOTAL-AMOUNT###</div></td>
                        <td class="col-sm-1" ></td>
                        <td class="col-sm-1" style="text-align:right;">$###CONTRACT-TOTAL-PREVIOUS-AMOUNT###</td>
                        <td class="col-sm-1" ></td>
                        <td class="col-sm-1" style="text-align:right;">$###CONTRACT-TOTAL-CURRENT-PERIOAD-AMOUNT###</td>
                        <td class="col-sm-1" ></td>
                        <td class="col-sm-1" style="text-align:right;">$###CONTRACT-TOTAL-CURRENT-BALANCE-AMOUNT###</td>
                        </tr>
                        <tr>
                            <td colspan="8"><strong>TOTAL AMOUNT DUE THIS INVOICE</strong></td>
                            <td>###INVOICETOTALDUE###</td>
                        </tr>
                        </tbody>
                        </table>
                    </div>
                    <div class="row" style="margin-top:2em;">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

</body>
</html>

这是我的laravel代码

return PDF::loadView('InvoiceTemplates/lump_sum_invoice_template_1')->save(public_path().'/lump_sum_invoice_template_1.pdf')->stream('download.pdf');
4

1 回答 1

0

0.7.0 及之前的 Dompdf 不足以支持 Bootstrap 使用的 CSS。

即将发布的 0.7.1 版本应该可以解决许多这些缺陷。

有关支持的更新已发布到 Dompdf 问题跟踪器#631

于 2016-10-12T14:39:44.470 回答