自定义 window.print()答案

【问题标题】：Customizing window.print()自定义 window.print()
【发布时间】：2018-11-02 18:23:46
【问题描述】：

我使用 window.print() 函数来打印带有表格的网页。表头有字体颜色。问题是，在打印时，标题只是黑色的。下面是代码：

<thead>
<tr style="color:red">
<th>Property name</th>
<th>Room number</th>
<th>Month</th>
<th>Tenant name</th>
<th>Rent Required</th>
<th>Rent Paid</th>
<th>Balance</th>

</tr>
</thead>

//按钮

<input type="button" class="btn btn-block 
btn-primary  btn-xs" value="PRINT" 
onclick="window.print() ;" />

有没有办法让它以红色打印表格行？

【问题讨论】：

用<table>标签包围代码，你会得到红色，这里我在打印模式下得到相同的颜色。 jsfiddle.net/5xpbetu1
Background color not showing in print preview的可能重复

标签： html printing html-table

【解决方案1】：

对于 Chrome/Safari（不确定 Firefox），您可以使用以下 CSS 来保持显示和打印之间的颜色相同：

-webkit-print-color-adjust: exact;

下面的完整工作示例。

<head>
  <style>
    .font-red {
      -webkit-print-color-adjust: exact;
      color: red;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr class="font-red">
        <th>Property name</th>
        <th>Room number</th>
        <th>Month</th>
        <th>Tenant name</th>
        <th>Rent Required</th>
        <th>Rent Paid</th>
        <th>Balance</th>
      </tr>
    </thead>
  </table>

  <input type="button" class="btn btn-block btn-primary  btn-xs" value="PRINT" onclick="window.print() ;" />
</body>

【讨论】：

感谢您的回复，我的代码不起作用，但我设法将问题缩小到我喜欢的 css 文件...引导组件。在页面上评论它的链接使代码工作正常......我现在正试图得到确切的行