CODEWITHSUNDEEP
phpmpdf
barmaxon
barmaxon

Reputation: 169

mpdf doesn't work properly with border css properties

I'm trying this mpdf lib, but don't understand why some properties don't work as they supposed to. As you can see below, I'm trying to render simple tables on pdf but can't because pdf is generated with wrong borders for my tables.

output.html

<h4 class="pt-1">SPECS</h4>

<table class="default-table">
    <tbody>
    <tr>
        <td>COLOUR</td>
        <td>MKCUcLXHIIi</td>
    </tr>
    <tr>
        <td>DIMENSIONS</td>
        <td>a9ebZtxAAv2W8L</td>
    </tr>
    <tr>
        <td>IP</td>
        <td>38</td>
    </tr>
    <tr>
        <td>LAMP</td>
        <td>tq6vTm8QfVEbgamehO</td>
    </tr>
    <tr>
        <td>MATERIAL</td>
        <td>qCh9kbdJxc2</td>
    </tr>
    <tr>
        <td>VOLTAGE</td>
        <td>BUjfWhE7VAGIX8c</td>
    </tr>
    </tbody>
</table>

<div class="codes">

    <h4>CODES</h4>

    <table class="codes-table default-table">
        <tbody>
        <tr>
            <th>ehucS</th>
            <td>pLYQzPQlXUdiJQx</td>
        </tr>
        <tr>
            <th>nZh3F</th>
            <td>AVmovBeOGN5lxSk</td>
        </tr>
        <tr>
            <th>ZzpvH</th>
            <td>ykJqonRQv5ueN7Q</td>
        </tr>
        </tbody>
    </table>


</div>

styles

* {
    box-sizing: border-box;
    margin-block-start: 0;
    margin-block-end: 0;
    font-family: 'Nunito Sans', sans-serif;
    color: #727272;
}

table {
    border-collapse: collapse;
}
h3, h4, td  {
    font-weight: normal;
    font-size: 1.5rem;
}
td {
    font-size: 0.8rem;
}

th {
}

@page {
    margin: 20px 50px;
}

.main-page {
    page-break-inside: avoid;
}

.main-page > div {
    padding-left: 0;
    padding-right: 0;
}

.product-name > h3 {
    font-size: 1.75rem;
}

.default-table {
    width: 100%;
    margin-bottom: 1rem;
    border-spacing: 2px;
    color: #212529;
}

.default-table tr {
    border-top: 1px solid rgba(100,100,100, .3);
}

.default-table th, .default-table td {
    padding: .3rem;
}

.codes-table {
    background-color: #f8f9fa;
}

.codes-table th, .codes-table td {
    border: 1px solid rgba(100,100,100, .3);
}
.codes-table th {
    text-align: left;
    color: white;
    border-bottom-color: white;
    background-color: #009933;
}
.codes-table th:last-child {
    border-bottom-color: inherit;
}
.bottom-logo {
    height: 150px;
}

.align-kids-top > div {
    vertical-align: top;
}

php code

$html = isset($_GET['html']);
$output = getHTMLForPDF($object, false, '_test');
$mpdf = new \Mpdf\Mpdf();
if($html) {
    die($output);
}
$mpdf->WriteHTML(file_get_contents(ASSETS."css/pdf.css"), \Mpdf\HTMLParserMode::HEADER_CSS);
$mpdf->WriteHTML($output, \Mpdf\HTMLParserMode::HTML_BODY);
$mpdf->Output();

php func: getLayoutForPDF generates needed html, I don't think it's relevant, but if it does, let me know in the comments and I'll show it.

html in browser enter image description here

html in pdf enter image description here

Upvotes: 0

Views: 2871

Answers (2)

barmaxon
barmaxon

Reputation: 169

Decided to use this package https://github.com/spiritix/php-chrome-html2pdf, wrapper of puppeteer - node lib which provide chrome engine api.

Upvotes: 0

fun2life
fun2life

Reputation: 159

I think you're talking about the borders in Specs.

I never got borders on rows working, even though the documentation says it should do.

Try changing

.default-table tr {
    border-top: 1px solid rgba(100,100,100, .3);
}

to

.default-table tr td {
    border-top: 1px solid rgba(100,100,100, .3);
}

Also, :first-child and :last-child are not supported, only :nth-child See the documentation for more details and supported classes: https://mpdf.github.io/css-stylesheets/supported-css.html

[edit] Note, that the documentation also says, that Color's

"Alpha values (transparency) are only supported on background colours - not text color."

Try removing the alpha value

Upvotes: 2

Related Questions