Как сделать так, чтобы веб-страница отправляла на принтер нечто иное, чем в окне браузера?

Question

Google Maps использовал этот бит, когда при нажатии на ссылку «Печать», то, что будет отправлено на принтер, было не совсем тем, что было у вас на экране, а скорее в другой версии, в основном той же информации. ,

Похоже, что они в значительной степени отошли от этой концепции (я думаю, что люди ее не поняли), и большинство веб-сайтов имеют "печатную версию" таких вещей, как статьи и т. Д.

Но если бы вы хотели сделать веб-страницу такой, чтобы "дружественная к принтеру" версия страницы была отправлена ​​на принтер без необходимости создавать для нее отдельную страницу, как бы вы это сделали?

Продолжение : можно ли напечатать вещи, которые не отображаются на странице? (т. е. скрыто от текущей визуализации)?

Answer 1

Да, вы можете применить принтер CSS. Есть хорошая статья об этом здесь .

Answer 2

Этого можно добиться, создав таблицу стилей CSS, предназначенную непосредственно для печати, а другую - непосредственно для экрана.

Используйте тег ссылки:

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

чтобы вставить вашу таблицу стилей в ваш документ.

Спрятать легко, просто установите свой стиль блока скрытым в любой желаемой таблице стилей, и она не будет отображаться. Например:

.newStyle1 {
    display: none;
}

Тогда все, что установлено в стиле newStyle1, не будет отображаться.

Answer 3

Правило @media в CSS может использоваться для определения альтернативных правил печати. ​​Это часто используется, чтобы скрыть навигацию и изменить стиль для лучшего соответствия печати:

@media print {
  .sidebar { display: none; }
}

Вы также можете связать отдельную таблицу стилей для печати:

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

Answer 4

Вы можете сделать это с помощью css, когда вы указываете носитель в качестве печати. ​​

Answer 5

Вам доступно несколько вариантов:

• Вы можете открыть новое окно с немного другими данными для печати.
• Существуют также стили CSS, которые можно использовать для изменения макета страницы.
• Наконец, вы можете указать совершенно разные таблицы стилей для экрана, печатных носителей, устройств Брайля и т. Д.

например. <link href="css/print.css" type="text/css" rel="stylesheet" media="print" />

См. Также Справочник по печати CSS2

Answer 6

Другой способ, при желании, состоит в том, чтобы кнопка «печать» на странице изменила страницу по вашему усмотрению, а затем выполнила JavaScript «window.print ();» вызвать диалоговое окно печати браузера.

Answer 7

Использовать таблицу стилей печати .

Редактировать: Что касается продолжения, вы вообще не можете добавлять вещи на страницу с помощью CSS.

Один из вариантов - включить на страницу содержимое, предназначенное только для печати, и скрыть его для таблиц стилей экрана. Вы должны убедиться, что страница по-прежнему имеет смысл без CSS.

Другой вариант - использовать сгенерированный контент, но он не поддерживается Internet Explorer 7 и ниже и может быть довольно ограниченным.

Если содержимое, предназначенное только для печати, является изображением, вы можете заменить его, используя один из популярных методов замены изображения.

Answer 8

Вот еще одна ссылка из A List Apart относительно печати css под названием «Печать книги с помощью CSS: Boom!». http://www.alistapart.com/articles/boom/

Answer 9

Все, что вы можете сделать с помощью CSS, вы можете сделать в таблице стилей печати. Это означает, что вы можете скрыть содержимое в версии для печати, которая отображается в версии для экрана, или скрыть содержимое в версии для экрана, которое вы хотите отобразить при печати. ​​Все, что вам нужно сделать, это применить отображение: ничего к соответствующим разделам соответствующей таблицы стилей.

Кроме того, для версии для печати рекомендуется определить размер текста в пунктах (что является плохой идеей для экранной версии - придерживайтесь здесь пикселей, ems или процентов). Существует всеобщее согласие относительно того, какие размеры напечатанных точек находятся в зависимости от того, как отображения пикселей на точки будут различаться в зависимости от устройства с различным разрешением.

Answer 10

nsayer упоминает, что наличие кнопки печати меняет компоновку экрана и затем запускает window.print()

Это решение, которое, вероятно, было упущено многими людьми, и его следует рассмотреть, когда вы думаете, что ваши пользователи хотят немного больше WYSIWYG. Вероятно, это должна быть ссылка для печати, которая изменяет тип носителя для листов, а не «печатает».

Используя jquery, вы можете сделать что-то вроде этого (не проверено):

$(document).ready(function(){
    $("#printFriendly").click(function(){
       $(link[rel=link][media=screen]).remove();
       $(link[rel=link][media=print]).attr("media","screen");
    });
});