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

Вы можете сделать это с помощью CSS, если укажете media как print.

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

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

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

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

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

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

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

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

Пример: <link rel = "stylesheet" type = "text / css" media = "print, handheld" href = "foo.css">

Это было стандартом со времен CSS2, и сейчас его поддерживают большинство браузеров. Более подробная информация доступна здесь: http://www.w3.org/TR/CSS2/media.html

Вы можете добиться этого эффекта, создав таблицу стилей 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, отображаться не будет.

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

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

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

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

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

Просто включите атрибут media = "print" в ссылку на вашу таблицу стилей для этой таблицы стилей.

Этот Статья A List Apart кажется неплохим по этой теме.

Я пробовал использовать разные таблицы стилей на основе носителя, но у меня возникли проблемы с получением всех необходимых мне параметров. С тех пор я обычно перенаправляю на другой вход нашей (Fusebox) структуры (т.е. print.php вместо index.php ), который по сути является тем же файлом, за исключением того, что он устанавливает дополнительный флаг / константу.

Затем в XSL-файле, связанном со страницей, я выполняю дополнительную работу на основе этого флага / константы, например, вычеркивая меню, столбцы таблицы и т. д.

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

if (!BOOL_PRINT)
  echo "<TD class=\"tbl_teams_scroll_item\"><SPAN class=\"span_password_hidden\" id=\"span_password_{$team_id}\" onClick=\"RevealPassword('{$team_id}','{$password}');\"><xsl:value-of select=\"/PAGE/TEXTS/HIDDEN\" /></SPAN></TD>\n";
else
  echo "TD class=\"tbl_teams_scroll_item\"><xsl:value-of select=\"PASSWORD\" /></TD>\n";

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

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

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

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

Вы можете определить правила CSS, относящиеся к типу носителя. Ниже приведен пример css (скопированный из http://www.w3.org/TR/CSS2/media.html, раздел 7.2.1), в котором указаны разные размеры шрифтов, которые отображаются на веб-странице и что печатаются.

 @media print {
    BODY { font-size: 10pt }
  }
  @media screen {
    BODY { font-size: 12pt }
  }
  @media screen, print {
    BODY { line-height: 1.2 }
  }

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

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

Еще один вариант - иметь скрытый IFRAME, для которого вы вызываете iframe.contentWindow.print (). Это позволит вам создать невидимый макет, который будет печатать именно так, как вы хотите.

Конечно, даже лучшее решение - экспортировать файл в PDF и позволить пользователю распечатать его таким образом. PDF-файлы обеспечивают высочайшее качество вывода, и точка. Тем не менее, это еще один обруч, через который пользователь может перепрыгнуть, поэтому практическое правило:

• PDF-файлы, когда важен макет для печати
• HTML, когда чистый текст важнее макета

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

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

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

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