javascript - JavaScript Print() 样式不一致

Question

编辑：

有什么推荐的hack吗？

我目前正在考虑在后端生成图像，然后在新窗口中打开它，然后打印出图像。

---

我通过隐藏其他元素来打印页面的一部分

$(...).hide();

然后通过调用 print

window.print();

但是在所有浏览器中，我都会遇到一些样式不一致。具体来说，背景颜色消失了。

常规网页视图：

打印预览：

相关的html（玉）如下：

amount-due.span2
  dl
    dt Amount Due
    dd.align-right <%= RP.util.currency_to_symbol[invoice.currency.toLowerCase()] %>
      <% if (invoice.state !== "paid") { %>
      span <%= invoice.total_amount %>
      <% } else { %>
      span 0
      <% } %>

和

d.darken <%= RP.util.currency_to_symbol[invoice.currency.toLowerCase()] %><%= invoice.total_amount %>

相关CSS如下：

和

Answer 1

我不知道有任何浏览器为了节省墨水/墨粉而关闭背景颜色和图像以进行打印。

有些提供用户偏好以重新启用它。

假设您的所有背景都是白色的，设计您的样式表，并使用其他方式（例如粗体文本）突出显示特定的内容位。

Answer 2

那是因为您的浏览器不打印背景。

如果你使用 Firefox，你可以这样做：

文件 > 页面设置... > 格式和选项 > 选项 > 打印背景（颜色和图像）

或者

Firefox 按钮 > 打印... > 页面设置... > 格式和选项 > 选项 > 打印背景（颜色和图像）