我试图为我们的应用程序制作一个可打印的样式表,但我在@media打印的背景颜色有问题。

    @media print {
      #header{display:none;}
      #adwrapper{display:none;}
      td {
        border-bottom: solid; 
        border-right: solid; 
        background-color: #c0c0c0;
      }
    }

其他一切工作,我可以修改边界和这样,但背景色不会通过打印。我知道,如果没有更多细节,你们可能无法回答我的问题。我只是好奇是否有人有这个问题,或类似的,以前。


当前回答

我只是在打印媒体查询中添加了这个片段,所有的样式都按预期应用:

       * {
        color-adjust: exact!important;  
        -webkit-print-color-adjust: exact!important; 
         print-color-adjust: exact!important;
      }

其他回答

我发现的最佳“解决方案”是提供一个突出的“打印”按钮或链接,弹出一个小对话框,大胆、简要、简洁地解释他们需要调整打印机设置(使用ABC 123项目符号指令),以启用背景和图像打印。这对我来说非常成功。

你可以使用标签画布并“绘制”背景,这在IE9、Gecko和Webkit上都可以使用。

在某些情况下(没有任何内容,但有背景的块),可以使用边框单独覆盖每个块。

例如:

.colored {
  background: #000;
  border: 1px solid #ccc;
  width: 8px;
  height: 8px;
}

@media print {
  .colored div {
    border: 4px solid #000;
    width: 0;
    height: 0;
  }
}

-webkit-print-color-adjust:准确;仅仅是不够的 必须在属性中使用!important

这是打印预览后,我添加!重要的每个背景颜色和颜色属性在每个标签

这是在添加之前在chrome上打印预览

现在,要知道如何注入!对div的风格很重要,看看这个答案,我无法注入一个“!”重要”规则

我只是在打印媒体查询中添加了这个片段,所有的样式都按预期应用:

       * {
        color-adjust: exact!important;  
        -webkit-print-color-adjust: exact!important; 
         print-color-adjust: exact!important;
      }