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

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

Вы можете определить правила 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"/>

Answer 3

Я пытался использовать разные таблицы стилей на основе мультимедиа, но у меня возникли проблемы с получением всех необходимых мне опций. С тех пор я обычно перенаправляю на другой вход в нашу (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";

Answer 4

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

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

Эта статья A List Apart кажется довольно хорошей по этому вопросу.

Answer 5

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

Пример:

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