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;
}

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

如何在打印机和屏幕上隐藏内容？

Answer 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复制到printstyles.css（或者只将两个<link rel="" />链接到屏幕样式表。）

解决方案2：仅有1个样式表，但其中包含<{1}}
你的单个CSS样式表就像这样（省略你的css链接rel标签中的@media：

media=""

Answer 2

不知道实际数据是什么，或者它的格式是什么，很难提供解决方案。您可能希望在一定数量的字符后插入一些javascript来截断文本。（我被告知有一些[非标准] CSS可以做同样的事情。）

否则我认为您的问题源于您在桌面上使用像素高度。您可能希望使用cm或类似的单位转换为“真实世界”的测量值。 Here's您可能需要考虑一些有关打印介质样式的信息。

您可能还希望使用media types专门为打印创建自定义CSS。

打印时隐藏HTML媒体

2 个答案: