I am generating a PDF using dompdf and one of the table cells is overflowing past the edge of the page. I am unable to find any reasoning for this as when displayed as a regular HTML page this doesn't happen. What potential workarounds might there be for this so the cell stays within the cell?
Code (contains Laravel blade syntax):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#400;700&display=swap" rel="stylesheet">
<style>
footer {
position: absolute;
bottom: 0px;
right: 0px;
}
body {
font-family: 'Josefin Sans', sans-serif;
font-size: 13px;
width: 100%;
}
.font-bold {
font-weight: bold;
}
.font-upper {
text-transform: uppercase;
}
.info-table-helper {
text-transform: uppercase;
font-weight: bold;
margin-right: 10px;
font-size: 12px;
width: 150px;
}
.alert {
padding: 20px;
background-color: #C55696;
color: white;
margin-bottom: 15px;
}
/* main table */
.main-table {
border-collapse: collapse;
border: 1px solid #000;
table-layout: fixed;
width: 100%;
}
.main-table th {
height: 40px;
}
.main-table td {
padding: 10px;
}
.main-table tbody {
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}
.main-table tbody tr:nth-child(even) {
background-color: #f5f5f5;
}
.main-table thead {
background-color: #000;
color: #fff;
}
</style>
</head>
<body>
<table style="width: 100%; margin-bottom: 20px">
<tr>
<td style="width: 50%">
<h1 class="font-upper">Banner Request</h1>
<p class="font-bold font-upper">** For internal use only **</p>
</td>
<td style="width: 50%">
<table class="info-table">
<tr>
<td class="info-table-helper">Client</td>
<td>{{ $projectRevision->project->client->name }}</td>
</tr>
<tr>
<td class="info-table-helper">Job code</td>
<td>{{ $projectRevision->project->job_code }}</td>
</tr>
<tr>
<td class="info-table-helper">Project name</td>
<td>{{ $projectRevision->project->name }}</td>
</tr>
<tr>
<td class="info-table-helper">Revision number</td>
<td>CR-{{ $projectRevision->revision }}</td>
</tr>
<tr>
<td class="info-table-helper">IO</td>
<td>{{ $io }}</td>
</tr>
</table>
</td>
</tr>
</table>
#if($groundTruth)
<div class="alert">
<strong>NOTE:</strong> Script URLs have been modified for GroundTruth.
</div>
#endif
<table class="main-table">
<thead>
<tr>
<th style="width: 20%">Description</th>
<th style="width: 30%">Click through URL with UTM</th>
<th style="width: 50%">Script</th>
</tr>
</thead>
<tbody>
#foreach ($banners as $attachment)
<tr>
<td>{{ $attachment->description }}</td>
<td>{{ $utm }}</td>
<td>{{ trim($attachment->content) }}</td>
</tr>
#endforeach
</tbody>
</table>
<footer style="font-family: 'Times New Roman'">
Generated {{ \Carbon\Carbon::now()->format('Y-m-d # g:i a') }} by {{ currentUser()->fullName }}
</footer>
</body>
</html>
Fixed with:
.main-table td {
white-space: pre-wrap;
word-wrap: break-word;
}
From: Word-wrap in an HTML table
Author: ßãlãjî
Related
I am using the Laravel Dompdf for converting my view to pdf . Everything is works properly before I add the image to the view . After retrieving an image its shows an error of:
Maximum execution time of 60 seconds exceeded
Here is my code
public function GeneratePDF($code)
{
# Retrieve Record for the select Beneficiaries
$beneficiary = Beneficiary::where('code', $code)->firstOrFail();
$mytime = Carbon::now();
$beneficiaryimage = $beneficiary->profile_photo;
$orgimage = $beneficiary->charitableOrganization->profile_photo;
// $familymember = BeneficiaryFamilyInfo::where('beneficiary_id',$beneficiary->id)->get();
if($beneficiary->charitable_organization_id == Auth::user()->charitable_organization_id)
{
// return view('charity.main.beneficiaries.BackupPdf', compact('beneficiary','mytime'));
$pdf = PDF::loadView('charity.main.beneficiaries.BackupPdf', compact('beneficiary','mytime','beneficiaryimage','orgimage'));
return $pdf->download($beneficiary->charitableOrganization->name.'-'.$beneficiary->last_name . ', ' . $beneficiary->first_name . '.pdf');
}
else
{
$toastr = array(
'message' => 'Users can only access their own charity records.',
'alert-type' => 'error'
);
return redirect()->back()->with($toastr);
}
}
My view Page
<!DOCTYPE html>
<html>
<head>
<title>Backup Beneficiary Data as PDF</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<style>
.tableinformation {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
margin-left: auto;
margin-right: auto;
border-style: none;
}
.tableinformation td
{
border:none;
outline:none;
}
.tableinformation :nth-child(odd) {
width: 40%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
.organization {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
margin-left: auto;
margin-right: auto;
margin-top: 50px ;
margin-bottom: 50px;
}
.organization td
{
border:none;
outline:none;
}
.family
{
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
margin-left: auto;
margin-right: auto;
margin-top: 50px ;
margin-bottom: 50px;
}
.family th
{
text-align: center;
}
.family td
{
text-align: center;
}
.tableinformation2 {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
margin-left: auto;
margin-right: auto;
}
.tableinformation2 td ,th
{
border:none;
outline:none;
}
.prepareandnoted
{
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
margin-left: auto;
margin-right: auto;
margin-top: 50px ;
margin-bottom: 50px;
}
.prepareandnoted td
{
text-align: center ;
border:none;
outline:none;
}
.page-break {
page-break-after: always;
}
</style>
<body>
<table class="organization" >
<tr>
<td style="width:30%"><img src="{{ ($beneficiary->charitableOrganization->profile_photo)?url('upload/charitable_org/profile_photo/'.$beneficiary->charitableOrganization->profile_photo):url('upload/charitable_org/profile_photo/no_avatar.png') }}" alt="Charity Organization Profile Photo" width="100px" height="100px"></td>
<td style="text-align: center; font-size: 150%;">{{$beneficiary->charitableOrganization->name}}</td>
</tr>
</table>
<table class="organization">
<tr>
<td > Date: <span style="text-decoration:underline;">{{$mytime->isoFormat('MMMM d, YYYY')}}</span>
<br>
<span>Time: </span><span style="text-decoration:underline;">{{$mytime->format('g:i A');}}</span>
</td>
<td style="width:30%"><img src=" {{ ($beneficiary->profile_photo)?url('upload/charitable_org/beneficiary_photos/'. $beneficiary->profile_photo):url('upload/avatar_img/no_avatar.png') }}" alt="beneficiaries photo" width="150px" height="150px"></td>
</tr>
</table>
<table class="tableinformation">
<tr>
<th colspan="2">I. Identifying Information</th>
</tr>
<tr>
<td>Full name</td>
<td>{{$beneficiary->last_name. ', '.$beneficiary->first_name.' '. $beneficiary->middle_name}}</td>
</tr>
<tr>
<td>Nickname :</td>
<td>{{$beneficiary->nick_name}}</td>
</tr>
<tr>
<td>Date of Birth :</td>
<td>{{Carbon\Carbon::parse($beneficiary->brith_date)->isoFormat('MMMM d, YYYY')}}</td>
</tr>
<tr>
<td>Age During interview :</td>
<td>{{ Carbon\Carbon::parse($beneficiary->birth_date)->diff(Carbon\Carbon::parse($beneficiary->interviewed_at))->y }}
</td>
</tr>
<tr>
<td>Place of Birth :</td>
<td>{{$beneficiary->birth_place}}</td>
</tr>
<tr>
<td>Religion :</td>
<td>{{$beneficiary->religion}}</td>
</tr>
<tr>
<td>Present Address :</td>
<td>{{$beneficiary->presentAddress->region. ' '.$beneficiary->presentAddress->province
.' '.$beneficiary->presentAddress->city.' '.$beneficiary->presentAddress->barangay
.' '.$beneficiary->presentAddress->postal_code}}
</td>
</tr>
<tr>
<td>Permanent Address :</td>
<td>{{$beneficiary->permanentAddress->region. ' '.$beneficiary->permanentAddress->province
.' '.$beneficiary->permanentAddress->city.' '.$beneficiary->permanentAddress->barangay
.' '.$beneficiary->permanentAddress->postal_code}}
</td>
</tr>
<tr>
<td>Provincal Address :</td>
<td>{{$beneficiary->provincialAddress->region. ' '.$beneficiary->provincialAddress->province
.' '.$beneficiary->provincialAddress->city.' '.$beneficiary->provincialAddress->barangay
.' '.$beneficiary->provincialAddress->postal_code}}
</td>
</tr>
<tr>
<td>Educational Attainment :</td>
<td>{{$beneficiary->educational_attainment}}</td>
</tr>
<tr>
<td>Last School Attended :</td>
<td>{{$beneficiary->last_school_year_attended}}</td>
</tr>
<tr>
<td>Contact No. :</td>
<td>{{$beneficiary->contact_no}}</td>
</tr>
</table>
<table class="family">
<tr>
<th colspan="8" style="text-align: left;" >II. Family Composition</th>
</tr>
<tr>
<td>Name</td>
<td>Age</td>
<td>Relationship</td>
<td>Civil Status</td>
<td>Education</td>
<td>Occupation</td>
<td>Income</td>
<td>WhereAbout</td>
</tr>
#foreach ($beneficiary->families as $item)
<tr>
<td style="width: 20%">{{$item->last_name.', '.$item->first_name}}</td>
<td>{{Carbon\Carbon::parse($item->birth_date)->age;}}</td>
<td>{{$item->relationship}}</td>
<td>{{$item->civil_status}}</td>
<td>{{$item->education}}</td>
<td>{{$item->occupation}}</td>
<td>{{$item->income}}</td>
<td> {{ ($item->where_abouts)? $item->where_abouts:'---' }}</td>
</tr>
#endforeach
</table>
<table class="tableinformation2">
<tr>
<th >III. Presented Problem </th>
</tr>
<tr>
<td style=" padding-left: 10%;">
{{$beneficiary->bg_info->problem_presented}}
</td>
</tr>
<tr>
<th>IV. Background Information</th>
</tr>
<tr>
<th style=" padding-left: 8%;">
A. The Client
</th>
</tr>
<tr>
<td style=" padding-left: 10%;">
{{$beneficiary->bg_info->about_client}}
</td>
</tr style="margin-bottom:10px;">
<tr>
<th style=" padding-left: 8%;">
B. The Family
</th>
</tr>
<tr>
<td style=" padding-left: 10%;">
{{$beneficiary->bg_info->about_family}}
</td>
</tr>
<tr>
<th style=" padding-left: 8%;">
C. The Environment
</th>
</tr>
<tr>
<td style=" padding-left: 10%;">
{{$beneficiary->bg_info->about_community}}
</td>
</tr>
<tr>
<th>V. Assessment And Recommendation</th>
</tr>
<tr>
<td>
{{$beneficiary->bg_info->assessment}}
</td>
</tr>
</table>
<table class="prepareandnoted">
<tr >
<td>Prepared By</td>
<td>Noted By</td>
</tr>
<tr>
<td style="text-decoration: underline;">{{$beneficiary->prepared_by}}</td>
<td style="text-decoration: underline;">{{$beneficiary->noted_by}}</td>
</tr>
</table>
</body>
</html>
Ideally , I want to export the file within 5 seconds , is there a way to improve the speed? This is my first time to use something like this to convert pdf . Any answer are appreciated . Thankyou.
I am using barryvdh/laravel-dompdf version 0.8.4 in Laravel 5 to create a PDF from a view. Before i do composer update, the pdf working just fine, but now its showing up like this
It was supposed to be like this
This is the view for the black part
<table class="header" style="table-layout:fixed;width:100%;background-color:none;border-collapse: collapse;">
<thead>
<tr width="100%"><th>
<div style="font-weight:200;font-size:16px;margin-top:10px;text-align: center;">
<br>
<b>COACHING REPORT</b><br>
<b>SEMESTER
#if(date('m', strtotime($detail->date)) > 6) 1 #else 2 #endif
- TAHUN PELAJARAN {{$detail->year->name}}</b>
</div>
<div style="width: 100%;font-size:11px!important;margin-top:10px">
<table style="width: 100%;text-align:left;">
<tr style="background: none;">
<td style="width: 15%;">Nama Coach</td>
<td>:</td>
<td style="width: 85%;">{{$detail->user->name}}</td>
</tr>
<tr style="background: none;">
<td>Nama Coachee</td>
<td>:</td>
<td>{{$detail->student->name}}</td>
</tr>
<tr style="background: none">
<td>Kelas</td>
<td>:</td>
<td>{{$student->grade->name}} {{$student->grade_detail->name}}</td>
</tr>
<tr style="background: none;">
<td>Periode</td>
<td>:</td>
<td>{{bulan_indo(explode("-",$startdate)[1])}} - {{bulan_indo(explode("-",$enddate)[1])}} {{date('Y',strtotime($enddate))}}</td>
</tr>
</table>
</div>
</th></tr>
</thead>
</table>
This is the view for the bottom part that works just fine
<table class="tableBorder" width="100%"
style="margin-top: 10px; clear: both; top: 80px;border-collapse: collapse;">
<thead>
<tr class="tableBorder">
<th
style="font-size: 11px; margin: 5px !important; font-weight: 120;width:7%;">
<b>AREA / RANAH PERKEMBANGAN</b></th>
<th
style="font-size: 11px; margin: 5px !important; font-weight: 120;width:10%;">
<b>DESKRIPSI</b></th>
</tr>
</thead>
<tbody class="bordered" style="">
<tr class="tableBorder">
<td
style="font-size: 11px; margin: 5px !important; font-weight: 60;">
Perkembangan akademik</td>
<td
style="font-size: 11px; margin: 5px !important; font-weight: 60;">
{!! $isi[0] !!}
</td>
</tr>
<tr class="tableBorder">
<td
style="font-size: 11px; margin: 5px !important; font-weight: 60;">
Perkembangan sikap sosial</td>
<td
style="font-size: 11px; margin: 5px !important; font-weight: 60;">
{!! $isi[1] !!}
</td>
</tr>
<tr class="tableBorder">
<td
style="font-size: 11px; margin: 5px !important; font-weight: 60;">
Perkembangan karakter</td>
<td
style="font-size: 11px; margin: 5px !important; font-weight: 60;">
{!! $isi[2] !!}
</td>
</tr>
<tr class="tableBorder">
<td
style="font-size: 11px; margin: 5px !important; font-weight: 60;">
Perkembangan ketrampilan/minat/bakat/talenta</td>
<td
style="font-size: 11px; margin: 5px !important; font-weight: 60;">
{!! $isi[3] !!}
</td>
</tr>
</tbody>
</table>
I try to comment the table,thead,tr,and th part, and leaving just the div and its finally showing up, but I have a lot of view that use this, so i was wondering if i can just fix this from the dompdf part without changing the view.
I am learning how to convert HTML files to PDF using iText7 pdfHTML. So far, I've been able to generate nice PDFs, but now I'm struggling to try to add both a header and a footer to all PDF pages. These header and footer are generated from HTML markup, and they are slightly complex (i.e. some images, tables, or divs, not just plain text). The source HTML is generated by my own code, so I have sort of control over the content of the source files.
I have read the iText book, in particular the chapter about converting HTML to PDF with pdfHTML. Indeed, I could add headers using the #page CSS rules and setting up the MediaDeviceDescription(MediaType.PRINT) to the converter properties. This is the HTML that I'm using for testing:
<!DOCTYPE html>
<html>
<head>
<style>
#footer {
position: running(footer);
}
#page {
#bottom-left {
content: "Page " counter(page) " of " counter(pages);
}
#bottom-center {
content: element(footer);
}
#bottom-right {
content: "Page " counter(page) " of " counter(pages);
}
}
</style>
</head>
<body>
<div style="width: 100%; border: 1px dashed black;">
<p><img src="data:image/jpg;base64, /9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCACXAJcDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5Pooor/RA+DCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/2Q=="/>
<div style="background-color: yellow; width: 100%; height: 1200px"> </div>
<p><img src="data:image/jpg;base64, /9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCACXAJcDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5Pooor/RA+DCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/2Q=="/></p>
</div>
<div id="footer">
<table style="width: 100%; font-size: 12px; line-height: 1;">
<tbody>
<tr>
<td style="text-align: right; width: 50%; padding: 0;">ACME Inc.</td>
<td style="width: 5px; padding: 0;"> </td>
<td style="padding: 0;"> </td>
</tr>
<tr>
<td style="text-align: right; padding: 0;">CIF: 12345678Z</td>
<td style="width: 5px; padding: 0;"> </td>
<td style="padding: 0;">https://acme.inc</td>
</tr>
<tr>
<td style="text-align: right; padding: 0;">C/Rue del Percebe, 13</td>
<td style="width: 5px; padding: 0;"> </td>
<td style="padding: 0;">Tel.: +44 555 123 123</td>
</tr>
<tr>
<td style="text-align: right; padding: 0;">45321 Virginia</td>
<td style="width: 5px; padding: 0;"> </td>
<td style="padding: 0;">Fax: +44 555 321 321</td>
</tr>
<tr>
<td style="text-align: right; padding: 0;">Virginia - USA</td>
<td style="width: 5px; padding: 0;"> </td>
<td style="padding: 0;">info#acme.inc</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
As you can see, I'm trying to place the div#footer element at the bottom (center) of all PDF pages. However, despite the fact that both the left and right texts are placed on all page footers, the #footer element only is shown on the last one, and it doesn't fully fit on the page.
This is the code I'm using to generate the PDF from the HTML:
public MemoryStream CreatePdf()
{
MemoryStream pdfStream = new MemoryStream();
float marginTop = 20, marginRight = 20, marginBottom = 20, marginLeft = 20;
ConverterProperties converterProps = new ConverterProperties();
converterProps.SetMediaDeviceDescription(new MediaDeviceDescription(MediaType.PRINT));
WriterProperties writerProps = new WriterProperties();
if (Options != null)
{
foreach (var option in Options)
{
switch (option.Key)
{
case "baseUri":
converterProps.SetBaseUri(option.Value);
break;
case "createAcroForm":
converterProps.SetCreateAcroForm(Boolean.Parse(option.Value));
break;
case "compressLevel":
writerProps.SetCompressionLevel(int.Parse(option.Value));
break;
case "compressFullPdf":
writerProps.SetFullCompressionMode(Boolean.Parse(option.Value));
break;
case "marginTop":
marginTop = float.Parse(option.Value);
break;
case "marginRight":
marginRight = float.Parse(option.Value);
break;
case "marginBottom":
marginBottom = float.Parse(option.Value);
break;
case "marginLeft":
marginLeft = float.Parse(option.Value);
break;
}
}
}
Body.Seek(0, SeekOrigin.Begin);
PdfWriter writer = new PdfWriter(pdfStream, writerProps);
PdfDocument pdf = new PdfDocument(writer);
HtmlConverter.ConvertToPdf(Body, pdf, converterProps);
pdf.Close();
return pdfStream;
}
You can see the result following this link: https://rapidshare.io/2gFK/footer.png
Can I pick your brains to help me out here?
Regards,
To make sure your footer element is visible on all pages, just add it as the first element inside of the <body> tag. This rule should be followed for all running elements.
The footer element does not fully fit because it uses default page margins and this element needs a bit bigger height. Since pdfHTML does not calculate necessary margins automatically (which another iText produdct, iText DITO does), you need to specify them manually with margin-bottom CSS property.
Fixed HTML that works well:
<!DOCTYPE html>
<html>
<head>
<style>
#footer {
position: running(footer);
}
#page {
#bottom-left {
content: "Page " counter(page) " of " counter(pages);
}
#bottom-center {
content: element(footer);
}
#bottom-right {
content: "Page " counter(page) " of " counter(pages);
}
margin-bottom: 80pt;
}
</style>
</head>
<body>
<div id="footer">
<table style="width: 100%; font-size: 12px; line-height: 1;">
<tbody>
<tr>
<td style="text-align: right; width: 50%; padding: 0;">ACME Inc.</td>
<td style="width: 5px; padding: 0;"> </td>
<td style="padding: 0;"> </td>
</tr>
<tr>
<td style="text-align: right; padding: 0;">CIF: 12345678Z</td>
<td style="width: 5px; padding: 0;"> </td>
<td style="padding: 0;">https://acme.inc</td>
</tr>
<tr>
<td style="text-align: right; padding: 0;">C/Rue del Percebe, 13</td>
<td style="width: 5px; padding: 0;"> </td>
<td style="padding: 0;">Tel.: +44 555 123 123</td>
</tr>
<tr>
<td style="text-align: right; padding: 0;">45321 Virginia</td>
<td style="width: 5px; padding: 0;"> </td>
<td style="padding: 0;">Fax: +44 555 321 321</td>
</tr>
<tr>
<td style="text-align: right; padding: 0;">Virginia - USA</td>
<td style="width: 5px; padding: 0;"> </td>
<td style="padding: 0;">info#acme.inc</td>
</tr>
</tbody>
</table>
</div>
<div style="width: 100%; border: 1px dashed black;">
<p><img src="data:image/jpg;base64, /9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCACXAJcDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5Pooor/RA+DCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/2Q=="/>
<div style="background-color: yellow; width: 100%; height: 1200px"> </div>
<p><img src="data:image/jpg;base64, /9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCACXAJcDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5Pooor/RA+DCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/2Q=="/></p>
</div>
</body>
</html>
Visual result:
I am having issues with printing to snappyPDF, my tabble is misplaced, and is printing in the center vertical of page as shown below. Also, some borders are missing.
enter image description here
and here is my 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>Hasil Lab PDF</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css">
<style>
thead {
display: table-header-group
}
tfoot {
display: table-row-group
}
tr {
page-break-inside: avoid
}
.header-caption {
border-top: 4px double #000;
border-bottom: 3px double #000;
text-align: center;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.page {
overflow: hidden;
page-break-after: always;
}
.title {
font-style: italic;
margin-top: 1.5em;
}
.content {
font-size: 1.5em;
font-weight: bold;
}
.identity {
margin-top: 3em;
}
.info {
font-weight: bold;
}
.divider {
width: 2px;
}
.content-title {
font-weight: bold;
white-space: nowrap;
}
.header-content {
margin-top: 2em;
margin-bottom: 1em;
}
#tooth {
border-collapse: collapse;
}
#tooth tr td {
padding: 1em;
}
.list-legend {
margin-top: 1em;
}
.legend {
list-style: none;
}
.legend li {
float: left;
margin-right: 10px;
}
.legend span {
border: 1px solid #ccc;
float: left;
width: 12px;
height: 12px;
margin: 2px;
}
.legend .karies {
background-color: red;
border: none;
}
.legend .missing {
background-color: yellow;
border: none;
}
.legend .radix {
background-color: green;
border: none;
}
.legend .tambalan {
background-color: blue;
border: none;
}
.legend .prothese {
background-color: purple;
border: none;
}
.legend .kalkulus {
background-color: darkcyan;
border: none;
}
.tooth-karies {
background-color: red;
color: white;
}
.tooth-missing {
background-color: yellow;
color: black;
}
.tooth-radix {
background-color: green;
color: white;
}
.tooth-tambalan {
background-color: blue;
color: white;
}
.tooth-prothese {
background-color: purple;
color: white;
}
.tooth-kalkulus {
background-color: darkcyan;
color: white;
}
</style>
</head>
<body>
#if (isset($mcu_hasil_labs))
<div class="page">
<h1 class="text-center header-caption">HASIL LABORATORIUM</h1> <br>
<table class="table table-bordered">
<thead>
<tr>
<th rowspan="2" style="vertical-align: middle; text-align: center; white-space: nowrap;">Test /
Jenis Pemeriksaan</th>
<th colspan="2" style="text-align: center; white-space: nowrap;">Satuan Konvensional</th>
<th colspan="2" style="text-align: center; white-space: nowrap;">International System</th>
</tr>
<tr>
<th style="text-align: center; white-space: nowrap;">Hasil</th>
<th style="text-align: center; white-space: nowrap;">Nilai Rujukan</th>
<th style="text-align: center; white-space: nowrap;">Result</th>
<th style="text-align: center; white-space: nowrap;">Reference</th>
</tr>
</thead>
<tbody>
#foreach ($mcu_hasil_labs_nmgroups as $header1)
<tr>
<td>{{ $header1 }}</td>
</tr>
#foreach ($mcu_hasil_labs_nmtestawals as $header2)
#if ($header2['nmgroup']==$header1)
#if ($header2['nmtestawal']!=$header2['nmtest'])
<tr>
<td>{!! " " !!}
{{ $header2['nmtestawal'] }}
</td>
</tr>
#endif
#foreach ($mcu_hasil_labs_nmtests as $header3)
#if ($header3['nmtestawal']==$header2['nmtestawal'])
#if ($header3['nmtest']!=$header3['nmfraction'])
<tr>
<td>{!! " " !!}
{!! " " !!}
{{ $header3['nmtest'] }}
</td>
</tr>
#endif
#foreach ($mcu_hasil_labs as $hasil_lab)
#if ($hasil_lab['nmtest']==$header3['nmtest'])
<tr>
<td>{!! " " !!}
{!! " " !!}
{!! " " !!}
{{ $hasil_lab['nmfraction'] }}</td>
<td >{{ $hasil_lab['cHasil'] }}</td>
<td>{{ $hasil_lab['nilaistd'] }}</td><br>
</tr>
#endif
#endforeach
#endif
#endforeach
#endif
#endforeach
#endforeach
</tbody>
</table>
<div class="card-body">
<br><br><br><br>
<p class="text-left">{{ "Catatan:" }}</p>
<p class="text-center">{{ "Pemeriksa" }}</p>
</div>
</div>
#endif
</body>
</html>
I've tried to remove the head, but it is still printed in the middle of the page.
Does anyone have any idea why there is a big gap between the header and the table? Also, how come some of my borders are missing?
i found error root cause which is in the tbody, here's working code
<body>
#if (isset($mcu_hasil_labs))
<div class="page">
<h1 class="text-center header-caption">HASIL LABORATORIUM</h1>
<br>
No.LAB : {{$mcu_hasil_labs[0]['nolab']}}
<table class="table table-bordered">
<thead>
<tr>
<th rowspan="2" style="vertical-align: middle; text-align: center; white-space: nowrap;">Test /
Jenis Pemeriksaan</th>
<th colspan="2" style="text-align: center; white-space: nowrap;">Satuan Konvensional</th>
<th colspan="2" style="text-align: center; white-space: nowrap;">International System</th>
</tr>
<tr>
<th style="text-align: center; white-space: nowrap;">Hasil</th>
<th style="text-align: center; white-space: nowrap;">Nilai Rujukan</th>
<th style="text-align: center; white-space: nowrap;">Result</th>
<th style="text-align: center; white-space: nowrap;">Reference</th>
</tr>
</thead>
<tbody>
#foreach ($mcu_hasil_labs_nmgroups as $header1)
<tr>
<td colspan="5">{{ $header1 }}</td>
</tr>
#foreach ($mcu_hasil_labs_nmtestawals as $header2)
#if ($header2['nmgroup']==$header1)
#if ($header2['nmtestawal']!=$header2['nmtest'])
<tr>
<td colspan="5">{!! " " !!}
{{ $header2['nmtestawal'] }}
</td>
</tr>
#endif
#foreach ($mcu_hasil_labs_nmtests as $header3)
#if ($header3['nmtestawal']==$header2['nmtestawal'])
#if ($header3['nmtest']!=$header3['nmfraction'])
<tr>
<td colspan="5">{!! " " !!}
{!! " " !!}
{{ $header3['nmtest'] }}
</td>
</tr>
#endif
#foreach ($mcu_hasil_labs as $hasil_lab)
#if ($hasil_lab['nmtest']==$header3['nmtest'])
<tr>
<td>{!! " " !!}
{!! " " !!}
{!! " " !!}
{{ $hasil_lab['nmfraction'] }}</td>
<td>{{ $hasil_lab['cHasil'] }}</td>
<td>{{ $hasil_lab['nilaistd'] }}</td>
<td> </td>
<td> </td>
</tr>
#endif
#endforeach
#endif
#endforeach
#endif
#endforeach
#endforeach
</tbody>
</table>
<div class="card-body">
<br>
<hr>
<p class="text-left">{{ "Catatan:" }}</p>
<table>
<tr>
<td style="width: 700px;">
</td>
<td>
{{ "Pemeriksa," }}
</td>
</tr>
</table>
</div>
</div>
#endif
hope this helps others
cheers
I'm trying to create table with three equal columns
Table width is set to 100%
When I'm trying to set width: 33% on TABLE TD element dompdf generates 1+ blank page(s) before generates the table. The table generates as expected only those blank pages are present in pdf document.
PDF FILE with width: 33%: http://www.docdroid.net/b5cf/with-width.pdf.html
I need to have equal columns on this table and cant achive it with width="33%" or style="table-layout: fixed" without geting the blank pages befor the table.
The HTML looks like this
<table class="outer_tab">
<tbody>
<tr class="outer_tr">
<td valign="top" class="outer_td">
<table class="inner_tab">
<tbody>
<tr>
<th valign="top" colspan="2">I.</th>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="separator">Morfologia ogólna</span>
</td>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="lp">1.
<span style="font-weight: bold;"> HCT </span> - <span class="inner_td_text">Hematokryt</span>
</span>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" class="outer_td">
<table class="inner_tab">
<tbody>
<tr>
<th valign="top" colspan="2">II.</th>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="separator">Morfologia ogólna</span>
</td>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="lp">1.
<span style="font-weight: bold;"> HCT </span> - <span class="inner_td_text">Hematokryt</span>
</span>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" class="outer_td">
<table class="inner_tab">
<tbody>
<tr>
<th valign="top" colspan="2">III.</th>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="separator">Morfologia ogólna</span>
</td>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="lp">1.
<span style="font-weight: bold;"> HCT </span> - <span class="inner_td_text">Hematokryt</span>
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
CSS looks like this:
<style type="text/css">
#page { margin: 1cm; }
body {
background-image: url('<?php echo 'module/Application/assets/pdf/images/faktury-tlo-small.png'; ?>');
background-repeat: no-repeat;
background-size: 20%;
background-position: center center;
}
table.outer_tab, table.inner_tab { border-spacing: 0; width: 100% }
table.inner_tab th { text-align: center; background: #BDC0BF; font-size: 15px; font-weight: bold; padding: 2px 0; }
td.outer_td { border-top: 1px solid #BDC0BF; border-left: 1px solid #BDC0BF; /*width: 33%;*/ border-bottom: 1px solid #BDC0BF; }
td.outer_td:last-of-type { border-right: 1px solid #BDC0BF; }
tr.outer_tr:last-of-type td.outer_td { border-bottom: 1px solid #BDC0BF; }
span.lp { padding-left: 10px; display: block; }
span.inner_td_text { /*padding-right: 10px;*/ }
span.separator { font-weight: bold; text-align: center; font-size: 15px; padding-bottom: 10px; display: block; }
.footer { position: fixed; bottom: 0px; width: 100%; font-size: 11px; }
</style>
The line cosing problems is:
td.outer_td { border-top: 1px solid #BDC0BF; border-left: 1px solid #BDC0BF; /*width: 33%;*/ border-bottom: 1px solid #BDC0BF; }
If in this td.outer_td has width: 33% the PDF has blank pages before the table
Anyone has any idea why this is happening?
Any solutions to this problem?