I'm building an invoice system, first you'll have to fill in the products you want to have on your invoice then it will convert the html view(where it will show the products in a foreach loop) to pdf. But if I have more than 6 products it will throw the following exception:
Frame not found in cellmap
I know this question has been asked a lot. But it seems there is still no real solution. It occurs when the input on the page is bigger than the first page and it can't jump to a new page so it throws an error:
Already tried a lottt!
This won't work for me:
$paper_orientation = 'landscape';
$customPaper = array(0,0,950,950);
$dompdf->set_paper($customPaper,$paper_orientation);
https://github.com/dompdf/dompdf/issues/657
This is my html view:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Factuur</title>
<link rel="stylesheet" href="/administration/style.css" media="all" />
</head>
<body>
<header class="clearfix">
<img src="/administration/logo.png">
<div id="company">
<h2 class="name">Company name</h2>
<div>Address</div>
<div>zip</div>
<div>email</div>
</div>
</div>
</header>
<main>
<div id="details" class="clearfix">
<div id="client">
<div class="to">{{ $sort == 0 ? 'Offerte' : 'Factuur' }} voor:</div>
<h2 class="name">{{ $company }}</h2>
<div class="address">{{ $address }}</div>
<div class="address">{{ $zip }}</a></div>
</div>
<div>
<h1>{{ $sort == 0 ? 'Offerte' : 'Factuur' }}nummer: {{ $number }}</h1>
<div class="date">Datum: {{ $date }}</div>
</div>
</div>
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th class="no">#</th>
<th class="desc">Beschrijving</th>
<th class="unit">Prijs</th>
<th class="qty">Aantal</th>
<th class="total">Totaal</th>
</tr>
</thead>
<tbody>
#foreach($products as $product)
<tr>
<td class="no">{{ $product->id }}</td>
<td class="desc"><h3>{{ $product->title }}</h3>{{ $product->description }}</td>
<td class="unit">€{{ $product->price }}</td>
<td class="qty">{{ $product->number }}</td>
<td class="total">€{{ $product->total }}</td>
</tr>
#endforeach
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td colspan="2">SUBTOTAAL</td>
<td>€ {{ $subtotal }}</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2">BTW 21%</td>
<td>€ {{ $btw }}</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2">TOTAAL</td>
<td>€ {{ $total }}</td>
</tr>
</tfoot>
</table>
<div id="notices" class="{{ $sort == 0 ? 'hidePayment' : 'notices' }}">
<div>BETALING:</div>
</div>
</main>
<footer>
KvK nummer: | BTW nummer:
</footer>
</body>
</html>
Is there a solution?
Related
I am working with DOMPDF in Laravel 8, when I create a table with many records and jumps to the next page, it does not perform the page break as it should, Could someone help me to know what I am doing wrong?. I was reading many articles on the internet and none of them worked for me.
Here is my code:
<div class="box-products-table">
<table class="table table-striped table-bordered">
<tbody>
<tr>
<td class="text-center roboto">{{ trans('image') }}</td>
<td class="text-center roboto">{{ trans('just_name') }}</td>
<td class="text-center roboto">{{ trans('quantity') }}</td>
<td class="text-center roboto">{{ trans('unit_price') }}</td>
<td class="text-center roboto">{{ trans('taxes') }}</td>
<td class="text-center roboto">{{ trans('subtotal') }}</td>
<td class="text-center roboto">{{ trans('total_price') }}</td>
</tr>
#for($i = 0; $i < 100; $i++)
<tr>
<td class="text-center"><img src="{{ public_path('storage/uploads/products/d6d74f351d482bb41787e86350ace02e.jpg') }}" height="70px"></td>
<td class="text-center">PORTATIL DELL 4HWRT</td>
<td class="text-right">526</td>
<td class="text-right">$ 4.985.650</td>
<td class="text-right">$ 947.273,5</td>
<td class="text-right">$ 99.713.000</td>
<td class="text-right">$ 2.622.451.900</td>
</tr>
#endfor
</tbody>
</table>
</div>
Result:
Go to screenshot (https://ibb.co/Rj5ZPTW)
.page_break {
page-break-before: always;
}
<!-- adjust $n as needed. $n = number of rows that fit in a page -->
#foreach(collect(range(1,100))->chunk($n) as $chunk)
<div class="box-products-table">
<table class="table table-striped table-bordered">
<tbody>
<tr>
<td class="text-center roboto">{{ trans('image') }}</td>
<td class="text-center roboto">{{ trans('just_name') }}</td>
<td class="text-center roboto">{{ trans('quantity') }}</td>
<td class="text-center roboto">{{ trans('unit_price') }}</td>
<td class="text-center roboto">{{ trans('taxes') }}</td>
<td class="text-center roboto">{{ trans('subtotal') }}</td>
<td class="text-center roboto">{{ trans('total_price') }}</td>
</tr>
#foreach($chunk as $i)
<tr>
<td class="text-center"><img src="{{ public_path('storage/uploads/products/d6d74f351d482bb41787e86350ace02e.jpg') }}" height="70px"></td>
<td class="text-center">PORTATIL DELL 4HWRT</td>
<td class="text-right">526</td>
<td class="text-right">$ 4.985.650</td>
<td class="text-right">$ 947.273,5</td>
<td class="text-right">$ 99.713.000</td>
<td class="text-right">$ 2.622.451.900</td>
</tr>
#endforeach
</tbody>
</table>
</div>
<div class="page-break"></div> <!-- break page -->
#endforeach
I need to go to my bill list page but this error is stopping me: 'Trying to get property 'name' of non-object'
My route:
Route::get('bill/{id?}',[
'as'=>'bill',
'uses'=>'PageController#editBill'
]);
My Controller:
public function editBill($id)
{
$customerInfo=DB::table('customer')->select('customer.id','customer.name','customer.created_at','customer.phone_number','customer.address','customer.note','bills.total','customer.email')->join('bills','bills.id_customer','=','customer.id')->where('customer.id', '=', $id)->first();
$billInfo=Bill::where('id',$id)->get();
return view('admin.editBill',compact('customerInfo','billInfo'));
}
My view:
<section class="content">
<!-- Default box -->
<div class="box">
<div class="box-header with-border">
<div class="row">
<div class="col-md-12">
<div class="container123 col-md-6" style="">
<h4></h4>
<table class="table table-bordered">
<thead>
<tr>
<th class="col-md-4">Customer Info</th>
<th class="col-md-6"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Customer name</td>
<td>{{ $customerInfo->name }}</td>
</tr>
<tr>
<td>Date Order</td>
<td>{{ $customerInfo->created_at }}</td>
</tr>
<tr>
<td>Phone Number</td>
<td>{{ $customerInfo->phone_number }}</td>
</tr>
<tr>
<td>Address</td>
<td>{{ $customerInfo->address }}</td>
</tr>
<tr>
<td>Email</td>
<td>{{ $customerInfo->email }}</td>
</tr>
<tr>
<td>Note</td>
<td>{{ $customerInfo->note }}</td>
</tr>
</tbody>
</table>
</div>
<table id="myTable" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
<thead>
<tr role="row">
<th class="sorting col-md-1" >Id</th>
<th class="sorting_asc col-md-4">Product name</th>
<th class="sorting col-md-2">Quantity</th>
<th class="sorting col-md-2">Unit_price</th>
</thead>
<tbody>
#foreach($billInfo as $key=>$bill)
<tr>
<td>{{ $key+1 }}</td>
<td>{{ $bill->product }}</td>
<td>{{ $bill->quantity }}</td>
<td>{{ number_format($bill->unit_price) }} VNĐ</td>
</tr>
#endforeach
<tr>
<td colspan="3"><b>Total</b></td>
<td colspan="1"><b class="text-red">{{ number_format($customerInfo->total) }} đ</b></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-12">
<form action="{{route('pdf',$customerInfo->id)}}" method="GET">
<input type="hidden" name="_method" value="PUT">
{{ csrf_field() }}
<div class="col-md-8"></div>
<div class="col-md-4">
<div class="form-inline">
<label>Delivery Status: </label>
<select name="status" class="form-control input-inline" style="width: 200px">
<option value="1">None</option>
<option value="2">On going</option>
<option value="2">Delivered</option>
</select>
<input type="submit" method="get" value="Print" class="btn btn-primary">
</div>
</div>
</form>
</div>
</div>
</div>
</section>
The bill detail list is working fine but the customers detail is not
I tried others way like {{$customer->name ?? ''}} and it did't give an error anymore but it doesn't show any data
I want to use a PDF converter for my Laravel project so I thought Dompdf might be a good idea. I managed to get it to work to convert a simple invoice file. However when I wanted to structured my invoice more with tables tag and others to make it look nicer, it wouldn't convert for me and throws a:
domPDF exception: frame not found in cellmap
Here is my invoice.blade.php for reference:
<!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 href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header">
<span class="float-left " > <img src="{{ asset('images/Logo.png') }}" style="width:60%;" alt="No Logo"></span>
<div class="float-center">
<h4>DC Signature Livingstyle SDN BHD</h4>
<small> 1-21-01,Menara Bangkok Bank,Berjaya Central Park,No 105,Jalan Ampang,50450 Kuala Lumpur,Malaysia </small><br>
<small>603-02818821 bujishu#gmail.com www.bujishu.com </small>
</div>
<div class="float-right">
<strong>Invoice:[Invoice Number]</strong>
<br>
<strong>[Date Placeholder]</strong> <br>
<strong>Credit Term:[Cash]</strong>
</div>
</div>
<div class="card-body">
<div class="row mb-4">
<div class="col-sm-6">
<h6 class="mb-3">From:</h6>
<div>
<strong>[Panel Name]</strong>
</div>
<div>[Address 1]</div>
<div>[Address 2]</div>
<div>Email:[panel_email]</div>
<div>Phone: [panel_number]</div>
</div>
<div class="col-sm-6">
<h6 class="mb-3">To:</h6>
<div>
<strong>[Customer Name]</strong>
</div>
<div> [Shipping address 1] </div>
<div>[shipping address 2]</div>
<div>Email:[customer_email]</div>
<div>Phone: [customer_number]</div>
</div>
</div>
<div class="table-responsive-sm">
<table class="table table-striped">
<thead>
<tr>
<th class="center">No</th>
<th>Item</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>
<td class="center">1</td>
<td class="left strong">Electrical wire</td>
<td class="left">Longest wire ever</td>
<td class="center">1</td>
<td class="left">999,00</td>
<td class="right">999,00</td>
</tr>
<tr>
<td class="center">2</td>
<td class="left">Interior design</td>
<td class="left">Instalation and Customization (cost per hour)</td>
<td class="left">20</td>
<td class="center">150</td>
<td class="right">3.000,00</td>
</tr>
<tr>
<td class="center">3</td>
<td class="left">Table</td>
<td class="left">Round table</td>
<td class="left">1</td>
<td class="center">499,00</td>
<td class="right">499,00</td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<div class="col-lg-4 col-sm-5 ml-auto " >
<table class="table table-clear ">
<th><strong> Payment Received </strong></th>
<tbody>
<tr>
<td class="left">
Payment Method: xxxxxx
</td>
</tr>
<tr>
<td class="left">
Reference No: 2192012
</td>
</tr>
<tr>
<td class="left">
Amount Paid: RM10,000.00
</td>
</tr>
<tbody>
</table>
</div>
<div class="col-lg-4 col-sm-5 ml-auto">
<table class="table table-clear">
<tbody>
<tr>
<td class="left">
<strong>Subtotal</strong>
</td>
<td class="right">8.497,00</td>
</tr>
<tr>
<td class="left">
<strong>Transportation(Klang Valley)</strong>
</td>
<td class="right">xxxxx</td>
</tr>
<tr>
<td class="left">
<strong>Grand Total</strong>
</td>
<td class="right">8.497,00</td>
</tr>
<tr>
<td class="left">
<strong>Discount (20%)</strong>
</td>
<td class="right">1,699,40</td>
</tr>
<tr>
<td class="left">
<strong>Amount Paid</strong>
</td>
<td class="right">679,76</td>
</tr>
<tr>
<td class="left">
<strong>Balance Due</strong>
</td>
<td class="right">
<strong>7.477,36</strong>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<h6 style="margin-left:30%;">This invoice is computer generated,no signature is required.</h6>
</div>
</div>
</body>
</html>
Does anyone know how to resolve this?
Edit:
Validator returns this:
Error: Bad value {{ asset('css/app.css') }} for attribute href on element link: Illegal character in path segment: { is not allowed.
From line 8, column 2; to line 8, column 58
</title>↩ <link href="{{ asset('css/app.css') }}" rel="stylesheet"> ↩↩
Error: Bad value {{ asset('images/Logo.png') }} for attribute src on element img: Illegal character in path segment: { is not allowed.
From line 18, column 37; to line 18, column 111
-left " > <img src="{{ asset('images/Logo.png') }}" style="width:60%;" alt="No Logo"></span
Error: th start tag in table body.
From line 112, column 43; to line 113, column 12
e-clear ">↩ <th><stron
I've got this code:
<div class="container col-md-6 col-md-offset-3">
<div class="well well bs-component">
<table class="table">
<thead>
<tr>
<th>Logo</th>
<th>Bedrijfsnaam</th>
<th>Plaats</th>
</tr>
</thead>
<tbody>
#foreach($companies as $company)
<a href="/bedrijf/{!! $company->CompanyId !!}">
<tr>
<td><img class="img-circle-company" src="{!! $company->Logo != null ? '/files/images/companylogos/'.$company->Logo : '/files/images/companylogos/default.png'!!}"/></td>
<td>{{ $company->CompanyName }}</td>
<td>{{ $company->City }}</td>
</tr>
</a>
#endforeach
</tbody>
</table>
</div>
But the a tag is not working why is that? In my page source it looks like this:
Unfortunately wrapping <tr> elements in an anchor isn't valid HTML. Some browsers may not blink an eye at it, but most with remove the offending element. If you want to continue using tables, another option would be to add the anchor inside each <td> element.
<div class="container col-md-6 col-md-offset-3">
<div class="well well bs-component">
<table class="table">
<thead>
<tr>
<th>Logo</th>
<th>Bedrijfsnaam</th>
<th>Plaats</th>
</tr>
</thead>
<tbody>
#foreach($companies as $company)
<tr>
<td>
<a href="/bedrijf/{!! $company->CompanyId !!}">
<img class="img-circle-company" src="{!! $company->Logo != null ? '/files/images/companylogos/'.$company->Logo : '/files/images/companylogos/default.png'!!}"/>
</a>
</td>
<td><a href="/bedrijf/{!! $company->CompanyId !!}">{{ $company->CompanyName }}</td>
<td>{{ $company->City }}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
So I'm trying to use the datatable as seen in my code written below. Unfortunately for some unknown reasons the functions for sorting, searching and paging does not work. May I know what did I missed out or the reason for it not working?
#extends('app')
#section('header')
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css" rel="stylesheet">
#stop
#section('content')
<h1 class="page-header">View Log Information</h1>
<br/>
<div class="container">
<div class="col-xs-12 col-md-12" style="overflow:auto">
<table class="table table-hover" id="logTable">
<thead>
<tr>
<th>
User
</th>
<th>
Log Description
</th>
<th>
Time Stamp
</th>
</tr>
</thead>
#foreach ($logs as $log)
<tbody>
<tr>
<td>
{{ App\User::find($log->user_id)->name }}
</td>
<td>
{{ $log->log_description }}
</td>
<td>
{{ date("F d Y - g:i a",strtotime("$log->created_at")) }}
</td>
</tr>
</tbody>
#endforeach
</table>
</div>
</div>
#stop
#section('scripts')
<!-- Bootstrap Based Data Table Plugin Script-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#logTable').DataTable();
} );
</script>
#stop
try this:
<table class="table table-hover" id="logTable">
<thead>
<tr>
<th>
User
</th>
<th>
Log Description
</th>
<th>
Time Stamp
</th>
</tr>
</thead>
<tbody>
#foreach ($logs as $log)
<tr>
<td>
{{ App\User::find($log->user_id)->name }}
</td>
<td>
{{ $log->log_description }}
</td>
<td>
{{ date("F d Y - g:i a",strtotime("$log->created_at")) }}
</td>
</tr>
#endforeach
</tbody>
</table>
Move the #foreach statement under tbody. It's not working because you keep duplicating the tbody instead of <tr> inside the <tbody>.
And this is just a suggestion. Don't do the query at view. it's not a good practice. Do all the query inside controller. You can use Laravel Relationship for App\User::find($log->user_id)->name.