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

Question

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

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

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

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

Answer 1

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

Answer 2

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

Answer 3

Используйте print stylesheet.

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

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

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

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

Answer 4

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

Answer 5

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

Пример: < ссылка отн = тип "таблица стилей" = "текст/CSS" СМИ = "печать, карманный" HREF = "foo.css" >

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

Answer 6

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

Есть несколько вариантов, доступных для вас:

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

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

Смотрите также CSS2 Print Reference

Answer 8

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

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

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

Answer 9

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

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

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

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

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

Answer 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"/> 

Answer 12

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

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

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

Answer 13

nsayer упоминает, имеющий кнопку печати изменить макет экрана, а затем начав window.print()

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

Использование JQuery, вы могли бы сделать что-то вроде этого (не проверено):

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

Answer 14

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

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

Answer 15

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