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:
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 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î
This question already has answers here:
Equal sized table cells to fill the entire width of the containing table
(4 answers)
Closed 5 years ago.
I'm trying to control the images inside the table and keep them on the same level and same width when screen size down. This will be used for email, so I would avoid global styles like td width so other elements in the email wont be effected.
The code I am using is:
#media only screen and (max-width:414px) {
.mobile {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
}
<table border="" align="center" cellpadding="0" cellspacing="0" class="mobile" width="600">
<tr>
<td style="text-align: center;">
<h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> First title here </h4>
<img src="http://via.placeholder.com/200x160/000" style="width: 100%;" />
</td>
<td style="text-align: center;">
<h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> SECOND TITLE HERE IN THE MIDDLE</h4>
<img src="http://via.placeholder.com/200x160/00c" style="width: 100%;" />
</td>
<td style="text-align: center;">
<h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px ">THEN THIRD TITLE HERE</h4>
<img src="http://via.placeholder.com/200x160/c00" style="width: 100%;" />
</td>
</tr>
</table>
Just apply width: 33.33%; to the table cells.
And if you want the images be aligned to the bottom, add vertical-align: bottom; to the cells and apply display: block to the images:
td {
width: 33.33%;
vertical-align: bottom;
}
td img {
display: block;
}
#media only screen and (max-width:414px) {
.mobile {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
}
<table border="" align="center" cellpadding="0" cellspacing="0" class="mobile" width="600">
<tr>
<td style="text-align: center;">
<h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> First title here </h4>
<img src="http://via.placeholder.com/200x160/000" style="width: 100%;" />
</td>
<td style="text-align: center;">
<h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> SECOND TITLE HERE IN THE MIDDLE</h4>
<img src="http://via.placeholder.com/200x160/00c" style="width: 100%;" />
</td>
<td style="text-align: center;">
<h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px ">THEN THIRD TITLE HERE</h4>
<img src="http://via.placeholder.com/200x160/c00" style="width: 100%;" />
</td>
</tr>
</table>
The part that was breaking the layout was the text above the images. Try moving it above the images on its seperate row, give it a height and everything works.
#media only screen and (max-width:414px) {
.mobile {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
}
<table border="" align="center" cellpadding="0" cellspacing="0" class="mobile" width="600">
<tr>
<td style="text-align: center; height: 20px;" height="20"><h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> First title here </h4></td>
<td style="text-align: center; height: 20px;" height="20"><h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> SECOND TITLE HERE IN THE MIDDLE</h4></td>
<td style="text-align: center; height: 20px;" height="20"><h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px ">THEN THIRD TITLE HERE</h4></td>
</tr>
<tr>
<td width="33%" style="text-align: center;">
<img src="http://via.placeholder.com/200x160/000" style="width: 100%;" />
</td>
<td width="33%" style="text-align: center;">
<img src="http://via.placeholder.com/200x160/00c" style="width: 100%;" />
</td>
<td width="33%" style="text-align: center;">
<img src="http://via.placeholder.com/200x160/c00" style="width: 100%;" />
</td>
</tr>
</table>
Let me know if this works for you.
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?