dompdf- frame not found in cellmap

I am trying to convert my invoice (blade) to view in browser as a PDF and I use dompdf as a library. Of course it works, however as I add more content into my blade like tables (bootstrap), it throws the error frame not found in cellmap.

My controller code:

  public function invoiceCustomer(){
      
   
        $pdf = PDF::loadView('documents.invoice');
        ob_end_clean();
        return $pdf->stream('invoice.pdf');
  }

My Invoice Blade:

<!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>Invoice</title>
 
   
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
  </head>
<body>
  <div class="container">
    <span class="float-left " > <img src="{{ asset('images/Invoice-Logo.png') }}" style="width:50%;" alt="No Logo"></span>
  </div>
                                                                                                                                
   
  
  
  <div class="card-body">
  <div class="row mb-4">

    
  <div class="col-6 col-md-3 col-sm-6 font-style" style="font-size:10px;">

    <table class="table  table-outer-border  font-style " >
     
   <tbody class="font-style">

     <tr class="table-dotted-line" style="height: 160px;" > 
       <td>Receiver: </td>
            
     </tr>
   
     <tr class="table-dotted-line"> 
       <td>Attention To:???</td>
        
     </tr>
     <tr class="table-dotted-line"> 
       <td>Contact No:</td>
         
     </tr>
  
   </tbody>
    </table>

</div>

<div class="col-6 col-md-3 col-sm-6 font-style " style="font-size:10px;">

  <table class="table table-outer-border   font-style " >

 <tbody class="font-style  ">

   <tr class="table-dotted-line" style="height: 160px;  " > 
     <td >Deliver To:</td>
      
   </tr>
   <tr class="table-dotted-line"> 
     <td>Attention To:???? </td>
          
   </tr>
   <tr class="table-dotted-line"> 
     <td>Contact No:</td>
    
   </tr>
 
 </tbody>
  </table>
  
  </div>
  <div class="col-6 col-md-4 offset-md-2 font-style" style="font-size:11px; ">
<table class="table  font-style table-outer-border table-bordered " >
  <thead>
    
      <th class="table-secondary" style="color:red; text-align:center; font-size:10px; " colspan="2"  >INVOICE/RECEIPT</th>
  </thead>
<tbody class="font-style">

 <tr> 
   <td>Number</td>
   <td></td>      
 </tr>
 <tr> 
   <td>Date</td>
   <td></td>      
 </tr>
 <tr> 
   <td>Delivery Date</td>
   <td>???</td>      
 </tr>
 <tr> 
   <td>Agent Code</td>
   <td>???</td>      
 </tr>
 <tr> 
   <td>Credit Terms</td>
   <td>???</td>      
 </tr>
</tbody>
</table>
</div>
</div>

</div>


<div class="font-style"  style="font-size:10px; ">
  <table class="table table-bordered table-outer-border ">
  <thead class="table-secondary table-outer-border ">
  <tr >
  <th class="center">No</th>
  <th>Product ID</th>
  <th>Description</th>
  
  <th class="left">Quantity</th>
    <th class="center">Unit Price (RM)</th>
  <th class="right">Amount(RM)</th>
  </tr>
  </thead>
  <tbody>
  <tr style="height:500px;" >
  <td  class="center">1</td>
  <td class="left strong"></td>
  <td class="left"> Pillow</td>
  
  <td class="center"></td>
    <td class="left"></td>
  <td class="right"></td>
  
  </tr> 
  </tbody>
  </table>
  </div>

  <div class="row">
    <div class="col-6" style="font-size:15px;">
      <table class="table table-outer-border">
        <th class="table-secondary" style="font-size:15px;">
          Payment Received
        </th>
        <tbody>
          <tr>
            <td>Test</td>
          </tr>
        </tbody>

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


</body>
</html>

What is the cause of this error?

Amaury

6 years ago

Level 43

This error means you have errors in your html… And you have!

Near line 74:

<table class="table  font-style table-outer-border table-bordered " >
  <thead>
    <tr>
      <th class="table-secondary" style="color:red; text-align:center; font-size:10px; " colspan="2"  >INVOICE/RECEIPT</th>
    </tr>
  </thead>

And near line104:

<table class="table table-outer-border">
        <thead>
            <tr>
        <th class="table-secondary" style="font-size:15px;">
          Payment Received
        </th>
        </tr>
        </thead>
        <tbody>

CookieMonster

6 years ago

Level 6

What is the error?

Amaury

6 years ago

Level 43

@nickywan123 See above the code I posted…

Near line 74:

<table class="table  font-style table-outer-border table-bordered " >
  <thead>
    <tr> <!-- YOU FORGOT A <TR> HERE -->
      <th class="table-secondary" style="color:red; text-align:center; font-size:10px; " colspan="2"  >INVOICE/RECEIPT</th>
    </tr>  <!-- YOU FORGOT A </TR> HERE -->
  </thead>

And near line104:

<table class="table table-outer-border">
        <thead> <!-- YOU FORGOT A <THEAD> HERE -->
            <tr> <!-- YOU FORGOT A <TR> HERE -->
        <th class="table-secondary" style="font-size:15px;">
          Payment Received
        </th>
        </tr> <!-- YOU FORGOT A </TR> HERE -->
        </thead> <!-- YOU FORGOT A </THEAD> HERE -->
        <tbody>

CookieMonster

6 years ago

Level 6

Anyway I fixed it but somehow using CDN Bootstrap and streaming it to a PDF will cause the alignment go haywire. I think I have to redo the view to fit the pdf viewing.

Please or to participate in this conversation.