在 A4 页面上打印 html，介质不工作

Question

我需要打印 A4 尺寸的 html 页面，另外我想打印内容正文以及 css、html 并忽略菜单列表、页眉、页脚和页面右侧菜单列表。

首先，我介绍了简单的 div 和 class noprint 并将其添加到 @media print 中，但它似乎不起作用。 noprint class 在@media 打印之外工作，所以我知道它是正确的。

另外我的要求是使用标准的 Ctrl+P 键盘选项直接从浏览器打印

<style type="text/css">

    .standardStyle {
        display:block;
        width:200px;
        height:150px;
        padding:10px;
        background-color:green;
        margin:5px;
    }

    @media print{ 
     .noprint{ color:red;}
    }

</style>

</head>
<body>

<div class="noprint standardStyle">
    this is test line....
</div>

<div class="print standardStyle">
    this is test line....
</div>

<div class="print standardStyle">
    this is test line....
</div>

Answer 1

@media print
{    
  .noprint{      
    display: none !important;        
  }      
}

Answer 2

运行片段并按 Ctrl+P ，您将看到红色的线。截图：

@media print {
       .noprint { color:red; }
 }

<div class="noprint">
        this is test line.....
</div>

Answer 3

大多数浏览器默认不打印背景颜色和背景图像。我想你错过了绿色背景 - 这就是它的原因。

通常这可以在浏览器的打印对话框中激活，但要强制打印背景，您只能尝试将 !important 添加到无法正确显示的设置中。

在 A4 页面上打印 html，介质不工作

print html on A4 page, media not working

html

css

printing

css-paged-media