html - 打印时隐藏 HTML 媒体

Question

我目前正在使用 HTML 编写可打印文档，它将显示从数据库中提取的数据。我的想法是我将使用 HTML/CSS 使文档看起来不错，但它将专门用于打印。

文档的布局使用表格来控制数据库中数据的显示方式。

其中一项关键要求是文件必须仅覆盖 A4 纸的两个面。然而，我们从数据库中获取的数据有些不可预测，因为字段大小非常大，所以我们不能保证数据库中的一行与文档中的一行相等。

因此，我们希望使用一种解决方案，其中表的大小由 HTML 控制，并且应隐藏任何导致表大于定义的数据库输出。

我已经定义了以下 CSS 样式

table.noQual
{
page-break-inside: avoid;
width: 100%;
border: 0px;
font-family:"Verdana","sans-serif";color:black;
overflow-y:hidden;
display:block;
max-height:50px !important;
}

这在屏幕上完美运行，但当我打印时，所有数据库内容都会显示，因此表格变得大于 50 像素并越过页面。

如何使内容在打印机和屏幕上都隐藏起来？

Answer 1

您是否指定了打印样式表或打印 @media现有样式表中的部分？

默认情况下，样式表可以在屏幕上正常工作(如您所见)；但是，除非您明确指定打印 CSS 样式表，否则在打印页面时，它将默认为浏览器的默认样式(通常为 15pt Times New Roman 等)。

解决方案 1:添加第二个打印样式表
在您的 HTML header 中包含以下两个标签:

<link rel="stylesheet" type="text/css" href="screenstyles.css" media="screen" /> <link rel="stylesheet" type="text/css" href="printstyles.css" media="print" />

然后从screenstyles.css复制所需的格式样式至 printstyles.css (或者将 <link rel="" /> 的两个链接都指向您的屏幕样式表)。

解决方案 2:只有 1 个样式表，但有打印 @media在里面
你的单个 CSS 样式表会像这样(从你的 css 链接 rel 标签中省略 media="":

/*Normal css*/
table.noQual {
    page-break-inside: avoid;
    width: 100%;
    border: 0px;
    font-family: "Verdana","sans-serif";
    color:black;
    overflow-y: hidden;
    display: block;
    max-height:50px !important;
}
@media print {
    /*Everything inside here will be used to style the printed product*/
    table.noQual {
        page-break-inside: avoid;
        width: 100%;
        border: 0px;
        font-family: "Verdana","sans-serif";
        color:black;
        overflow-y: hidden;
        display: block;
        max-height: 50px !important;
    }
}