使用 PhantomJS 将页面呈现为 PDF 时不考虑外部和本地 CSS

Question

有没有办法强制 PhantomJS 读取 CSS 样式？

我目前正在使用 Angular 和 UI-Grid 生成 table 并且当 table 中的值满足条件时（例如 if value > 1000) 它将被分配给特定的 CSS class。然后我使用 PhantomJS 生成一个 PDF 文件。

CSS

.data-records-alarm {
    color: red !important;
    text-align: center;
}

我注意到它可以识别“text-align: center;”属性 但它无法识别颜色“color:红色 !important;".

我也尝试过 "color: red;" 或移动 CSS 样式并将其放在我的 HTML 本地文件中，但它不起作用。

我目前使用 PhantomJS 2.0.0 并测试了 Chrome 和 Firefox 浏览器。

Answer 1

我让它工作的唯一方法是使用 -webkit-text-fill-color 而不是 color

.data-records-alarm {
    -webkit-text-fill-color: red !important;
    text-align: center;}