1

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

该文档使用表格进行布局，以控制数据库中数据的显示方式。

关键要求之一是文件只能覆盖 A4 的 2 面。但是，我们从数据库中获取的数据有些不可预测，因为字段大小非常大，所以我们不能保证数据库中的一行等于文档中的一行。

因此，我们希望使用一种解决方案，其中表的大小由 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;
}

这在屏幕上工作得很好，但是当我打印时，所有的数据库内容都会显示出来，所以表格会变得大于 50px 并越过页面。

如何使打印机和屏幕隐藏的内容？

4

2 回答 2

1

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

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

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

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

screenstyles.css然后从to复制所需的格式样式printstyles.css（或者只是将两者<link rel="" />的链接都链接到您的屏幕样式表）。

解决方案 2：只有 1 个样式表，但其中有打印您@media的
单个 CSS 样式表会像这样（media=""从您的 css 链接 rel 标记中省略：

/*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;
    }
}
于 2013-03-11T09:54:42.667 回答
0

如果不知道实际数据是什么，或者它是什么格式，就很难提供解决方案。您可能需要放入一些 javascript 以在设定的字符数后截断文本。（有人告诉我有一些 [非标准] CSS 可以做同样的事情。）

否则，我认为您的问题源于您在桌子上使用像素高度。您可能想要使用cm或类似的单位来转换为“真实世界”的测量值。以下是您可能需要考虑的有关印刷媒体样式的一些信息。

您可能还想研究使用媒体类型来创建专门用于打印的自定义 CSS。

于 2012-07-25T14:27:17.947 回答