2016-10-10 142 views
1

我已經使用barryvdh PDF來生成我的發票模板的PDF。Bootstrap class not in barryvdh PDF in Laravel 5.2

要創建發票模板,我在laravel中創建了一個刀片,並在其中應用了bootsrap css。

加載該刀片時,它看起來與加載的引導類相符。但是當我生成PDF時,它需要我的style.css,但Bootstrap類不加載。

這裏是我的lump_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'); 

回答

0

DOMPDF直至幷包括0.7.0不能充分支持引導使用的CSS。

即將發佈的0.7.1版本應該解決許多這些缺陷。

支持更新發布到Dompdf問題跟蹤器#631