puppeteer PDF忽略背景颜色

Question

我想使用RAILS中的GEM dhalang来使用来自puppeteer的PDF功能。

我有一个服务器端生成的web端usind引导程序和表。在表格中，我想用给单元格上色

<td class="text-center" style="background-color: #ffdf7e"> 

但是当我尝试导出为PDF时，背景颜色被忽略了。

我已经设置了木偶师选项：

printBackground: true

但它并不能解决这个问题。

这个问题与引导程序类"table"有关。

当我更换这条线路时：

<table class="table table-striped table-sm">

这行：

<table class="table-striped table-sm">

则背景颜色将显示在PDF中！

但是我想保留CSS格式的表！

知道吗？

Answer 1

我自己也遇到过这个问题，发现Bootstrap 4在dist-css的末尾有以下样式：

.table {
border-collapse: collapse !important;
}
.table td,
.table th {
background-color: #fff !important;
}

出于某种原因，Puppeter(或潜在的Chromium？(在Bootstrap CSS中赋予.table td规则比内联样式更高的优先级。一个简单的修复方法是在内联样式上抛出一个!important。您也可以为td使用自定义类，但仍需要在规则上抛出!important来覆盖Bootstrap样式。

我想另一种选择可能是(如果你使用的是本地加载的Bootstrap风格，而不是他们的CDN(，那就是从Bootstrap的源代码中删除这一行。