RMarkdown：打印 css 样式

Question

我正在从 RMarkdown 应用一些简单的 css 创建一个 Html 报告，并且在打印输出报告时遇到了一些问题。浏览器版本正确应用 css，但打印版本不正确。这将是 RMarkdown 代码的可重现示例：

---
title: "Table"
output:
  html_document:
    css: "test.css"
---

```{r}
library(knitr)
data(iris)
kable(iris)
```  

这是我的 test.css 文件的内容：

     .main-container { 
     max-width: 1600px !important;
 } 
    tr:nth-child(even) {background-color: #f2f2f2}
    th {
        background-color: #FF6319;
        color: white;
        font-size: 12px;
    }
    tbody {
        font-size: 12px;
    }
    hr {
        page-break-after: always;
    }

如何在浏览器输出中获得与打印输出相同的结果？我什至尝试检查 Chrome 打印菜单中的背景图形选项，但没有任何变化。 谢谢。

Answer 1

我猜这个问题与许多浏览器（打印时）默认忽略的“背景颜色”和“背景图像”属性有关。

对于 chrome，您可以将以下代码添加到您的打印 css，在 Firefox 和 IE 中，您必须在打印对话框中选择“打印背景”。

:root {
  -webkit-print-color-adjust: exact;
}

你可以在 HTML 中这样做：

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

@media print {
    tr:nth-child(even) {
        background-color: #f2f2f2  !important;
        -webkit-print-color-adjust: exact;
    }
    th {
        background-color: #FF6319  !important;
        -webkit-print-color-adjust: exact;
    }
}