mpdf 无法与边框 css 属性一起正常工作

编程问答 2022-05-14

问题描述

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

输出.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,.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,.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 生成所需的 html，我认为它不相关，但如果相关，请在评论中告诉我，我会展示它。

浏览器中的html

enter image description here

pdf 中的 html

enter image description here

解决方法

我想你说的是规范中的边界。

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

尝试改变

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

到

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

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

[编辑] 请注意，文档还说，颜色是

“Alpha 值（透明度）仅支持背景颜色 - 不支持文本颜色。”

尝试删除 alpha 值

,

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

mpdf