Как справиться с печатью HTML-страниц?

Question

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

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

Answer 1

Вы можете использовать тип носителя с css :

Как это:

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

media="screen" будет использоваться нормально, версия css media="print" будет использоваться при печати. Вы можете использовать эту таблицу стилей, чтобы переопределить стили вкладок, чтобы содержимое всегда было видно ... Вы можете увидеть это через предварительный просмотр.

Answer 2

Я в основном согласен с Ником, однако, как правило, я предпочитаю, чтобы моя css оказалась в одном файле:

@media print {
    #top {
        width: 100% !important;
        font-size: 120% !important;
        height: 2em !important;
    }
    #top h3 {
        width: 100% !important;
        text-align: center !important;
    }
}

или что-то еще. По сути, ваша таблица стилей печати находится в том же файле, что и другие стили, но окружена "@media print {...}";

Answer 3

Обычно я использую тег для печати для определения стиля печати для моих страниц:

@media print
{
    #header, #nav
    {
        display: none; \\* to not print an element *\
    }
}

вы можете добавить это в свои таблицы стилей, как показано выше, или вы можете добавить атрибут media к тегу ссылки:

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

Answer 4

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

Answer 5

Создайте один большой файл и добавьте Читаемость . Вот чистая версия JavaScript, необходимая для его вызова, которую они предоставляют для своего букмарклета:

function Readability() {
    readStyle = 'style-newspaper';
    readSize = 'size-medium';
    readMargin = 'margin-wide';
    _readability_script = document.createElement('SCRIPT');
    _readability_script.type = 'text/javascript';
    _readability_script.src = 'http://lab.arc90.com/experiments/readability/js/readability.js?x=0';  //+ (Math.random());
    document.getElementsByTagName('head')[0].appendChild(_readability_script);
    _readability_css = document.createElement('LINK');
    _readability_css.rel = 'stylesheet';
    _readability_css.href = 'http://lab.arc90.com/experiments/readability/css/readability.css';
    _readability_css.type = 'text/css';
    _readability_css.media = 'all';
    document.getElementsByTagName('head')[0].appendChild(_readability_css);
    _readability_print_css = document.createElement('LINK');
    _readability_print_css.rel = 'stylesheet';
    _readability_print_css.href = 'http://lab.arc90.com/experiments/readability/css/readability-print.css';
    _readability_print_css.media = 'print';
    _readability_print_css.type = 'text/css';
    document.getElementsByTagName('head')[0].appendChild(_readability_print_css);
}

Answer 6

Ну, в общем, это будет зависеть от того, как вы реализовали свои «вкладки». Но вы можете поместить все на одну HTML-страницу, затем использовать CSS для ее разметки и JS, чтобы скрыть / отобразить только содержимое для одной "вкладки".

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

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