Laravel PDF barryvdh/laravel-dompdf - html page looks different to the generated PDF
By using the 'barryvdh/laravel-dompdf' i want to generate a pdf that looks a certain way. However there is a difference in how the HTML looks like in page and the pdf generated.
HTML is quite basic
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<link rel="stylesheet" href="style/pdfStyle.css">
</head>
<body>
<div id="idTemplateContainer" class="threeSection">
<div id="idHeader" class="d-flex w-100 justify-content-between pb-3">
<div class="invisible" contenteditable="true"></div>
<div class="d-block">
<div class="eingabefeld text2 no-mouseflow text-center display-5" contenteditable="true"
data-text="Enter name here" style="font-weight: 700; text-transform: uppercase"
data-placeholder="Enter name here"></div>
<div class="eingabefeld text2 no-mouseflow text-center display-6" contenteditable="true"
data-placeholder="Enter position here here" data-text="Enter position here">Software Engineer</div>
</div>
<div><input id="myImage" style="display: hidden !important;" class="photo-upload" type="file"
accept="image/*, image/jpeg"><img id="the-picture"
style="width: 100%;height: 100%;border: 1px solid black !important; border-radius: 0.4rem;"
src="../upload_image.JPG"></div>
</div>
<div id="idPersonDescription" class="d-flex">
<div class="w-50 eingabefeld text2 no-mouseflow" contenteditable="true"></div>
<div class="w-50 eingabefeld text2 no-mouseflow" contenteditable="true"></div>
</div>
<div id="idPersonExperience">
<div id="idPersonExperienceHeader" class="d-flex">
<div class="eingabefeld text2 h6 m-0" contenteditable="true" data-text="Enter name here">Skills</div>
<div class="eingabefeld text2 h6 m-0" contenteditable="true" data-text="Enter name here">Work Experience
</div>
</div>
<div id="idPersonExperienceInformation" class="d-flex">
<div id="idCvBodyLeftSide">
<div id="idCvProfileInformation">
<div class="aboutMeSection mt-3 mb-3" data-section="about_me_section">
<div class="sectionHeaderBar d-flex justify-content-between">
<div class="eingabefeld text2 no-mouseflow h5 m-0 align-content-center"
contenteditable="true" style="line-height: 1.4em;">About me</div>
<div><button class="btn btn-dark function-new-section me-2"
style="width: 37px; height: 38px;">+</button><button
class="btn btn-outline-danger function-delete-section me-1 ps-0 pe-0"
style="width: 37px; height: 38px;"><svg xmlns="http://www.w3.org/2000/svg"
width="16" height="16" fill="currentColor" class="bi bi-trash"
viewBox="0 0 16 16">
<path
d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z">
</path>
<path
d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z">
</path>
</svg></button></div>
</div>
<div class="addable" style="z-index: 5;">
<div class="eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">My Name is Roman</div>
</div>
</div>
<div class="personalInformationSection mt-3 mb-3" data-section="personal_information_section">
<div class="sectionHeaderBar d-flex justify-content-between">
<div class="eingabefeld text2 no-mouseflow h5 m-0 align-content-center"
contenteditable="true" style="line-height: 1.4em;">Personal information</div>
<div><button class="btn btn-dark function-new-section me-2"
style="width: 37px; height: 38px;">+</button><button
class="btn btn-outline-danger function-delete-section me-1 ps-0 pe-0"
style="width: 37px; height: 38px;"><svg xmlns="http://www.w3.org/2000/svg"
width="16" height="16" fill="currentColor" class="bi bi-trash"
viewBox="0 0 16 16">
<path
d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z">
</path>
<path
d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z">
</path>
</svg></button></div>
</div>
<div class="addable" style="z-index: 5;">
<div class="d-flex">
<div class="eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">Email</div>
<div class="eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;"></div>
</div>
</div>
<div class="addable" style="z-index:5;">
<div class="d-flex">
<div class="eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">Email</div>
<div class="eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;"></div>
</div>
</div>
<div class="addable" style="z-index:5;">
<div class="d-flex">
<div class="eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">Email</div>
<div class="eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;"></div>
</div>
</div>
<div class="addable" style="z-index:5;">
<div class="d-flex">
<div class="eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">Email</div>
<div class="eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;"></div>
</div>
</div>
<div class="addable" style="z-index:5;">
<div class="d-flex">
<div class="eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">Email</div>
<div class="eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;"></div>
</div>
</div>
<div class="addable" style="z-index:5;">
<div class="d-flex">
<div class="eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">Email</div>
<div class="eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;"></div>
</div>
</div>
</div>
<div class="educationSection mt-3 mb-3" data-section="education_section">
<div class="sectionHeaderBar d-flex justify-content-between">
<div class="eingabefeld text2 no-mouseflow h5 m-0 align-content-center"
contenteditable="true" style="line-height: 1.4em;">Education</div>
<div><button class="btn btn-dark function-new-section me-2"
style="width: 37px; height: 38px;">+</button><button
class="btn btn-outline-danger function-delete-section me-1 ps-0 pe-0"
style="width: 37px; height: 38px;"><svg xmlns="http://www.w3.org/2000/svg"
width="16" height="16" fill="currentColor" class="bi bi-trash"
viewBox="0 0 16 16">
<path
d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z">
</path>
<path
d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z">
</path>
</svg></button></div>
</div>
<div class="addable" style="z-index: 5;">
<div class="title eingabefeld text2 no-mouseflow fw-bold h6 m-0"
contenteditable="true" style="line-height: 1.4em;">Masters Degree in XX</div>
<div class="title eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">Jun 2010 - March 2012</div>
<div class="eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">• Learned about Software Development<br>• Learned about
Development Principles<br>• Learned about Software Design</div>
</div>
</div>
</div>
</div>
<div id="idCvBodyRightSide">
<div class="idCvDetailInputBlock" style="z-index: 5;">
<div class="linie2"></div>
<div class="title eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">Position</div>
<div class="d-flex fw-bold">
<div class="w-75 eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">Place, Company name</div>
<div class="w-25 eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">10/2022 - 12/2024</div>
</div>
<div class="templateInput eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">Tasks description</div>
</div>
<div class="idCvDetailInputBlock">
<div class="linie2"></div>
<div class="title eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">Position</div>
<div class="d-flex fw-bold">
<div class="w-75 eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">Place, Company name</div>
<div class="w-25 eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">10/2022 - 12/2024</div>
</div>
<div class="templateInput eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">Tasks description</div>
</div>
<div class="idCvDetailInputBlock">
<div class="linie2"></div>
<div class="title eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">Position</div>
<div class="d-flex fw-bold">
<div class="w-75 eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">Place, Company name</div>
<div class="w-25 eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">10/2022 - 12/2024</div>
</div>
<div class="templateInput eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">Tasks description</div>
</div>
<div class="idCvDetailInputBlock">
<div class="linie2"></div>
<div class="title eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">Position</div>
<div class="d-flex fw-bold">
<div class="w-75 eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">Place, Company name</div>
<div class="w-25 eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">10/2022 - 12/2024</div>
</div>
<div class="templateInput eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">Tasks description</div>
</div>
<div class="idCvDetailInputBlock">
<div class="linie2"></div>
<div class="title eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">Position</div>
<div class="d-flex fw-bold">
<div class="w-75 eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">Place, Company name</div>
<div class="w-25 eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">10/2022 - 12/2024</div>
</div>
<div class="templateInput eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">Tasks description</div>
</div>
<div class="idCvDetailInputBlock">
<div class="linie2"></div>
<div class="title eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">Position</div>
<div class="d-flex fw-bold">
<div class="w-75 eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">Place, Company name</div>
<div class="w-25 eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">10/2022 - 12/2024</div>
</div>
<div class="templateInput eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">Tasks description</div>
</div>
<div class="idCvDetailInputBlock">
<div class="linie2"></div>
<div class="title eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">Position</div>
<div class="d-flex fw-bold">
<div class="w-75 eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">Place, Company name</div>
<div class="w-25 eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">10/2022 - 12/2024</div>
</div>
<div class="templateInput eingabefeld text2 no-mouseflow" contenteditable="true"
style="line-height: 1.4em;">Tasks description</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The CSS is very overwhelming 12k lines, hence wouldn't link it here.
Code to generate the PDF
$data = [
'from' => 'Hallo Welt',
'to' => 'Hallo Welt',
'because' => 'Hallo Welt'
];
$pdf = Pdf::loadView('pdf.generatePdf', $data);
return $pdf->download('example.pdf');
Question: How to generate a PDF in laravel that take the css-setting 1-1 and generates the page ?
Solution
You CSS is too complex and contain many parts that DomPDF does not support. (Bootstrap classes like d-flex, justify-content-between etc...)
If you need a solution for that, you either have to refactor your HTML so it is compatible with DomPDF rendering abilities, or what I would recommend is to use another library that has more capable rendering functionality.
Issues include Flexbox and Grid Layout and the dynamic content you have because PDF libraries expect static, well-structured HTML-s.
---
I've generated a closely similar code to you, but using another library: SPIPU/HTML2PDF
<?php
require_once('../vendor/autoload.php');
use Spipu\Html2Pdf\Exception\Html2PdfException;
use Spipu\Html2Pdf\Html2Pdf;
// Initialize Html2Pdf
$html2pdf = new Html2Pdf('L', 'A4', 'fr');
// Load the HTML template
$templatePath = __DIR__ . '/assets/template_spipu.html';
$htmlContent = file_get_contents($templatePath);
// Generate the PDF
$html2pdf->writeHTML($htmlContent);
try {
$html2pdf->output('template_spipu.pdf');
} catch (Html2PdfException $e) {
dd($e);
}
The updated template:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="UTF-8">
<title>CV Template</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
.container {
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 20px;
}
.header .title {
font-size: 24px;
font-weight: bold;
}
.content-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
.content-table td {
vertical-align: top;
border: 1px solid #000;
padding: 10px;
}
.left-column {
width: 35%;
}
.right-column {
width: 65%;
}
.section-title {
font-weight: bold;
border-bottom: 1px solid #000;
padding: 10px 0;
margin-bottom: 15px;
}
.section-content {
margin-bottom: 15px;
}
.position {
font-weight: bold;
margin-bottom: 5px;
}
.place {
margin-bottom: 5px;
}
.tasks {
margin-bottom: 15px;
}
.date {
text-align: right;
font-size: 0.9rem;
color: #555;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="title">Software Engineer</div>
</div>
<table class="content-table">
<tr>
<td class="left-column">
<div class="section-title">SKILLS</div>
<div class="section-content">
<strong>About me</strong><br>
My Name is Roman
</div>
<div class="section-content">
<strong>Personal Information</strong><br>
Email<br>
Email<br>
Email<br>
Email<br>
Email<br>
</div>
<div class="section-content">
<strong>Education</strong><br>
Masters Degree in XX<br>
Jun 2010 - March 2012<br>
• Learned about Software Development<br>
• Learned about Development Principles<br>
• Learned about Software Design
</div>
</td>
<td class="right-column">
<div class="section-title">WORK EXPERIENCE</div>
<div class="section-content">
<div class="position">Position</div>
<div class="place">Place, Company name</div>
<div class="tasks">Task description</div>
<div class="date">10/2022 - 12/2024</div>
<div class="position">Position</div>
<div class="place">Place, Company name</div>
<div class="tasks">Task description</div>
<div class="date">10/2022 - 12/2024</div>
<div class="position">Position</div>
<div class="place">Place, Company name</div>
<div class="tasks">Task description</div>
<div class="date">10/2022 - 12/2024</div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
This layout is compatible with it and generates a close result.
I've created a github repo for you:
https://github.com/marktaborosi/stackoverflow-79600503
This is how it looks now. Let me know if this could help!
- How to decrypt a value in Python that was encrypted using PHP openssl
- Convert a collection of models to an array of models
- How to check if a shell command exists from PHP
- Are private constants possible in PHP?
- Sort a 2D array by a column DESC
- Join Query issue - codeigniter
- "PHP files not accessible via localhost after uninstalling Composer and updating PATH
- How to access a CodeIgniter query result which is expected to only return one row
- Convert sql with JOIN clause containing an IN condition to CodeIgniter active record
- Bash PHP silence segmentation fault
- Laravel Auth::attempt() error: "Unknown column 'password'" when using a custom password field
- Implement sorting with CodeIgniter active record without refactoring
- How to syntax check / lint a Twig template programmatically
- How to use CodeIgniter's order_by() method with FIELD function
- SQL string with mix of single quotes and double quotes not ordering properly in CodeIgniter
- Killing a process with PHP after exec()
- Php Class & Trait methods with same name
- Running slim framework on existing apache web server
- PHP Curl does not work on localhost?
- In php, should I return false, null, or an empty array in a method that would usually return an array?
- OpenCart 3.x - Add a "Confirm e-mail" field
- Truncate a string to first n characters of a string and add three dots if any characters are removed
- How to add an ORDER BY clause to a CodeIgniter active record executed by get_where()?
- preg_replace regex requires forward slash open and close?
- CodeIgniter query to group data with looping
- referring to jsfiddle.net with POST data
- How do I pass variables and data from PHP to JavaScript?
- Eloquent query for filter with multiple params from url (Some parameters may not be specified)
- Imagick php windows
- LEFT JOIN, GROUP BY, SUM() query WHERE datetime column IS NULL or <= a specified value with CodeIgniter