Ответ 1
Да, вы можете применить принтер css. Существует хорошая статья об этом здесь.
Как вы можете отправить веб-страницу на принтер чем-то другим, чем в окне браузера?
Карты Google использовались для этого бита, где, когда вы нажимаете ссылку "Печать", то, что было бы отправлено на принтер, было не совсем тем, что у вас было на экране, а скорее в отличие отформатированной версии большей части той же информации,
Похоже, что они в значительной степени отошли от этой концепции (я думаю, люди этого не понимали), и большинство сайтов имеют "печатную версию" таких вещей, как статьи и т.д.
Но если вы хотите сделать веб-страницу таким образом, чтобы "печатная версия" страницы была отправлена на принтер без необходимости делать отдельную страницу для нее, как бы вы это сделали?
Последующие действия: можете ли вы напечатать что-либо, не отображаемое на странице? (т.е. скрытый от текущего отображения)?
Ответы
Ответ 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/