使用HTML生成打印机将忽略的空间

Question

我有一些代码，可以在一个网页上为多个客户生成账单。我使用div元素style="page-break-after:always"，这样用户就可以一次打印每个客户的账单，而不同客户的账单将全部打印在单独的一张纸上。我的问题是，我希望通过在一张账单和下一张账单之间留出一些空格，使账单在用户屏幕上更容易阅读，但我不想打印一堆空白。我如何在钞票之间引入一些打印机将忽略的额外空间？

Answer 1

您可以仅为打印机实现特殊的样式表，并使该样式忽略某些元素。像这样的东西会起作用的：

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

然后，在您的print.css文件中，您可以拥有所有原始的CSS，并定义如下内容：

.printhide{ display:none; }

在HTML文件中，要隐藏的所有元素只需添加printhide类即可。例如：

<br class="printhide">

Answer 2

使用print css。这将是一个具有打印特定规则的css文件，它可以与所有其他css文件一起加载，但带有一个media="print"属性来告诉浏览器它是用于打印的。

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

Answer 3

在账单后插入div：

<div class="bill">
...your bill goes here...
<div class="spacer"></div>
</div>

添加打印样式表：

<link rel="stylesheet" href="screen.css"/>
<link rel="stylesheet" href="print.css" media="print"/>

在screen.css中定义空间：

div.spacer {margin-bottom:2em;}

在print.css中隐藏空格：

div.spacer {display:none;}