JavaScript Print() 样式不一致

Question

编辑:

有什么推荐的技巧吗？

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

<小时/>

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

$(...).hide();

然后通过调用 print

window.print();

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

常规网页 View :

打印预览:

相关html(jade)如下:

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

据我所知，没有哪个浏览器不会为了节省墨水/碳粉而关闭打印时的背景颜色和图像。

有些提供用户首选项来重新启用它。

设计样式表时假设所有背景均为白色，并使用其他方式(例如粗体文本)来突出显示特定的内容。