Создайте пространство с 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

Вставьте 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;}

Answer 3

Использовать печать css . Это может быть файл CSS с определенными правилами печати, который можно загрузить со всеми другими файлами CSS, но с атрибутом media="print", который сообщает браузерам, что он предназначен для печати.

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