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

Карты Google использовались для этого бита, где, когда вы нажимаете ссылку "Печать", то, что было бы отправлено на принтер, было не совсем тем, что у вас было на экране, а скорее в отличие отформатированной версии большей части той же информации,

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

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

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

ОТВЕТЫ

Ответ 1

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

Ответ 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, не будет отображаться.

Ответ 3

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

Ответ 4

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

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

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

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

Ответ 5

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

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

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

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

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

Ответ 6

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

Ответ 7

Доступно несколько вариантов:

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

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

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

Ответ 8

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

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

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

Ответ 9

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

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

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

Ответ 10

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

Ответ 11

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

Ответ 12

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

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

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

Ответ 13

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

Ответ 14

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

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

Ответ 15

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