mpdf 不能正常使用边框 css 属性

Question

我正在尝试这个 mpdf 库，但不明白为什么有些属性不能正常工作。正如您在下面看到的，我正在尝试在 pdf 上呈现简单的表格，但不能，因为生成的 pdf 表格边框错误。

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>

样式

* {
    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代码

$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，我认为它不相关，但如果相关，请在评论中告诉我，我会展示它。

html 在浏览器中

html PDF 格式

Answer 1

我想你是在谈论规范中的边界。

我从来没有在行上使用边框，即使文档说它应该这样做。

尝试改变

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

到

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

此外，不支持 :first-child 和 :last-child，仅支持 :nth-child 有关详细信息和支持的类，请参阅文档： https://mpdf.github.io/css-stylesheets/supported-css.html

[编辑] 请注意，文档还说 Color's

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

尝试删除 alpha 值

Answer 2

决定使用此包 https://github.com/spiritix/php-chrome-html2pdf，puppeteer 的包装器 - 提供 chrome 引擎的节点库 api。

mpdf 不能正常使用边框 css 属性

mpdf doesn't work properly with border css properties

php

mpdf