0

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.

How it does look as HTML

What is being generated

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 ?

Improve this question
2
  • 2
    Your CSS is too advanced. See: CSS properties supported by DomPDF. Note the absence of, for instance, flex. Commented Apr 30 at 14:25
  • 1
    Quite likely you need to generate a separate view for pdf generation e.g using tables since DOMPDFs CSS to PDF capabilities are limited (especially when it comes to flex or grid) Commented Apr 30 at 18:06

1 Answer 1

Reset to default
1

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!enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

Hello @Mark. Thank you for your answer! I generally want to avoid NodeJs entirely, yes it does work with puppeteer and is able to handle even very complex CSS setting. I however need an alternative.
If you would like, I can spend some time on this and generate the desired HTML for you (if you provide me pdfStyle.css too)
Thank you very much @Mark. Here is my css jumpshare.com/s/Of4xReWZBhbXVPrDYvlG
I've played around a bit for you, so I will do a post now about it.
It's done, updated the post. Image skipped out, but I can put it in if you need it and I push it up to the repo.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.