车把 - 桌子上的自定义 CSS 不起作用答案

【问题标题】：Handlebars - custom CSS on table not working车把 - 桌子上的自定义 CSS 不起作用
【发布时间】：2020-09-06 13:27:09
【问题描述】：

我正在处理在 Handlebars express 中应用于表格的 CSS。

这是我的 hbs 模板，用于显示我的表格。

<div class="table-1">
    <table class="table" cellspacing="0">
       <tr>
           <th class="left">Item No</th>
           <th class="left">Description</th>
           <th class="left">Qty</th>
           <th class="left"> Unit </th>
           <th class="left">Prix</th>
           <th class="left">Discount</th>
           <th class="left">VAT</th>
           <th class="left">Total</th>
      </tr>
      <tr>
           <td> 0000 </td>
           <td> Description </td>
           <td> 0 </td>
           <td> unit </td>
           <td> 0.00 </td>
           <td> 0 % </td>
           <td> 0% </td>
           <td> 0.00 </td>
     </tr>
     <tr>
           <td> 0000 </td>
           <td> Description </td>
           <td> 0 </td>
           <td> unit </td>
           <td> 0.00 </td>
           <td> 0 % </td>
           <td> 2.5% </td>
           <td> 0.00 </td>
     </tr>
     <tr style="width: 100%;">
           <td colspan="4"></td>
           <td colspan="3"> Total gross</td>
           <td> 0.00 </td>
     </tr>
     <tr>
           <td colspan="4"></td>
           <td colspan="3"> Discount </td>
           <td> 0.00 </td>
     </tr>
           <tr>
           <td colspan="4"></td>
           <td colspan="3"> Total Amt </td>
           <td> 0.00 </td>
     </tr>
    </table>
</div>

这是我的 CSS，

<!DOCTYPE html>
<html>

<head>
    <style>
        .table-1 .left {
            text-align: left;
        }

        .table-1 .table td,
        .table-1 .table th {
            border: none;
            font-weight: 300;
        }

        .table-1 tr:nth-child(odd) {
            background-color: #EEEEEE;
        }

        .table-1 th,
        .table-1 tr:last-child {
            background-color: #16e0bb;
            color: #FFFFFF;
        }

        .table-1 tr:last-child>td {
            font-weight: 700 !important;
        }
   </style>
    <meta charset="utf-8">
</head>

<body>
    {{{body}}}
</body>

</html>

问题：使用 Handlebars express 呈现 PDF 模板时，CSS 未正确应用。甚至内联 CSS 也无法正常工作，尤其是在使用 HEX 颜色代码时。

似乎，背景色 css 根本不起作用。还有什么其他方法可以在桌子上应用背景色 css？为了呈现 pdf，我使用 Handlebars express、puppeteer 和 NodeJS。

预期输出：

实际输出：

【问题讨论】：

请阅读Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - 总结是这不是解决志愿者的理想方式，并且可能会适得其反。请不要将此添加到您的问题中。
哦对不起我的错误..谢谢
我可以通过你的代码得到正确的结果。现在有什么问题？您可以使用开发者工具（按 F12）来指示 CSS/JS 问题。
不，实际上，当使用 Handlebars 渲染 pdf 时，pdf 是用表格生成的，但没有所需的 css .. [标题/最后一行应该是绿色，文本应该是白色 + 条纹行]..
看来，背景色 css 根本不起作用。你能告诉我在桌子上应用背景色 css 的其他方法吗？为了呈现 pdf，我使用的是 NodeJS...

标签： css node.js handlebars.js puppeteer

【解决方案1】：

能够解决上述问题。

解决方案：在使用 Puppeteer 和 NodeJS 从 HTML 生成 PDF 之前，应在 PDF 选项中包含“printBackground: true”。

谢谢

【讨论】：