Как создать печатную страницу Twitter-Bootstrap


162

Я использую Twitter-Bootstrap, и мне нужно иметь возможность печатать страницу так, как она выглядит в браузере. Я могу печатать другие страницы, созданные с помощью Twitter-Bootstrap, но я не могу напечатать свою страницу, которая использует чисто Twitter-Bootstrap. Я где-то пропустил тег?

Официальная страница о ТБ при печати: Начальная страница Twitter

Моя страница при печати: введите описание изображения здесь

Как выглядит моя страница: введите описание изображения здесь


2
Вы указываете атрибут media = "screen"? Посмотрите на мой ответ.
albertedevigo

Ответы:


156

Убедитесь, что для печати назначена таблица стилей.
Это может быть отдельная таблица стилей:

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

или один, которым вы делитесь для всех устройств:

<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> # Note there's no media attribute

Затем вы можете написать свои стили для принтеров в отдельных таблицах стилей или в общей, используя медиа-запросы:

@media print {
    /* Your styles here */
}

29
Я просто добавил это: <link rel = "stylesheet" type = "text / css" media = "print" href = "bootstrap.min.css"> и больше ничего не нужно было делать. Работал как шарм. Спасибо!
Джей Q.

13
Если вы уже используете эту таблицу стилей, скорее всего, у вас она есть media="screen", что не будет видно на принтере. Вы можете либо переключить это на media="all", либо просто удалить, mediaкак предполагает приведенный выше ответ.
Wex

albertedevigo, мне нужна помощь относительно стиля. Как изменить размер шрифта, ширину, ... что именно нужно изменить? ТИА. @JayQ. : Это все еще работает или устарело? потому что я не могу заставить его работать.
musafar006

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

181

Обновление Bootstrap 3.2: (текущий выпуск)

Текущая стабильная версия Bootstrap - 3.2.0 .
В версии 3.2 visible-print устарела, поэтому вы должны использовать это так:

Class                        Browser    Print
 -------------------------------------------------
.visible-print-block         Hidden        Visible (as block)
.visible-print-inline        Hidden        Visible (as inline)
.visible-print-inline-block  Hidden        Visible (as inline-block)
.hidden-print                Visible       Hidden

Обновление Bootstrap 3:

Классы печати теперь в документах: http://getbootstrap.com/css/#responsive-utilities-print

Similar to the regular responsive classes,
       use these for toggling content for print.

Class            Browser    Print
 ----------------------------------------
.visible-print   Hidden     Visible
.hidden-print    Visible    Hidden

Bootstrap 2.3.1 версия:

После добавления файла bootstrap.css в ваш HTML
найдите части, которые вы не хотите печатать, и добавьте hidden-printкласс в теги. Потому что файл CSS включает в себя это:

@media print {
  .visible-print  { display: inherit !important; }
  .hidden-print   { display: none !important; }
}

4
Разве нет класса, чтобы сделать что-то видимым как в браузере, так и в принтере в случае, когда я делаю все ( body) невидимым .hidden-print, но хочу переопределить определенный элемент, который будет показан?
Винсент Пуарье

1
@VincentPoirier - если элемент скрыт, все внутри него скрыто. Так что не имеет смысла прятать тело, а показывать то, что является частью тела. Потому что не было бы контекста (контейнера) для отображения этого подэлемента. Вместо этого выполните css, чтобы скрыть все ваши листовые элементы (например, поместите класс по умолчанию в ваши внутренние элементы div), затем используйте соответствующий класс или идентификатор css, где это необходимо, чтобы они были видны. Вероятно, потребуется некоторое экспериментирование, чтобы получить это точно.
ToolmakerSteve

112

Заменить каждый col-md-наcol-xs-

Например: заменить каждый col-md-6на col-xs-6.

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


Спасибо ! Возникли проблемы с масштабом представления HTML по сравнению с представлением печати ... теперь все хорошо!
Дэвид Беланджер,

2
Эй спасибо! Я столкнулся с проблемой при печати моей страницы, каждая из которых divшла ниже предыдущей. Этот ответ дал мне подсказку, я добавил col-xs-*перед каждым, col-md-*и это решило проблему. ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Я не тестировал добавление контейнера, <div class="row"></div>который, возможно, также решил проблему (кажется очевидным).
Fr0zenFyr

6
Если только не предполагается, что для узких экранов (например, для телефона) используется разное расположение, чем для печати. Кажется странным, что логика загрузчика принтера думает, что его экран печати настолько узок.
ToolmakerSteve

3
Это должно быть на вершине.
Сурадж

Просто добавьте, что вы можете заменить col-md-, как говорится в ответе, или вы можете просто добавить col-xs-like: class = "col-md-6 col-xs-6", и вы можете смешивать и сопоставлять в зависимости от требований вашего дизайна.
zaidorx

17

Там есть раздел @media print файле css кода (Bootstrap 3.3.1 [UPDATE:] до 3.3.5), который удаляет практически все стили, поэтому вы получаете довольно мягкие распечатки, даже когда он работает.

На данный момент мне пришлось прибегнуть к удалению @media printраздела из bootstrap.css - что меня действительно не устраивает, но мои пользователи хотят получить прямой снимок экрана, так что сейчас это нужно сделать. Если кто-нибудь знает, как подавить его без изменений в файлах начальной загрузки, я был бы очень заинтересован.

Вот «кодовый блок», начинающийся со строки № 192:

@media print {
  *,
  *:before,enter code here
  *:after {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;

    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  select {
    background: #fff !important;
  }
  .navbar {
    display: none;
  }
  .btn > .caret,
  .dropup > .btn > .caret {
    border-top-color: #000 !important;
  }
  .label {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important;
  }
}

6

Лучший вариант, который я нашел, был http://html2canvas.hertzen.com/
http://jsfiddle.net/nurbsurf/1235emen/

html2canvas(document.body, {  
  onrendered: function(canvas) {
    $("#page").hide();
    document.body.appendChild(canvas);
    window.print();
    $('canvas').remove();
    $("#page").show();
  }
});

Я пробовал оба 0,4 и 0,5, но ни один из них не работал. После моей страницы 0.5 добавили кое-что хорошо выглядящее, но оригинальная страница все еще была там, и как мне тогда это напечатать? Попытка 0.4 активировала печать, оригинальная страница также была все еще там, и рендер был немного сломан.
Чаба Тот

3

В случае, если кто-то ищет решение для Bootstrap v2.XX здесь. Я оставляю решение, которое я использовал. Это не полностью проверено на всех браузерах, но это может быть хорошим началом.

1) убедитесь, что атрибут media для bootstrap-responsive.cssis screen.

<link href="/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen" />

2) создайте print.cssи убедитесь, что его медиа-атрибутprint

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

3) внутри print.cssдобавьте «ширину» вашего сайта в html & body

html, 
body {
    width: 1200px !important;
}

4.) Воспроизвести необходимые классы медиазапроса, print.cssпотому что они были внутри, bootstrap-responsive.cssи мы отключили его при печати.

.hidden{display:none;visibility:hidden}
.visible-phone{display:none!important}
.visible-tablet{display:none!important}
.hidden-desktop{display:none!important}
.visible-desktop{display:inherit!important}

Вот полная версия print.css:

html, 
body {
    width: 1200px !important;
}

.hidden{display:none;visibility:hidden}
.visible-phone{display:none!important}
.visible-tablet{display:none!important}
.hidden-desktop{display:none!important}
.visible-desktop{display:inherit!important}

2

2 вещи к вашему сведению -

  1. На данный момент они добавили несколько классов переключения. Посмотрите, что доступно в последнем стабильном выпуске - переключатели печати в responseive-utilities.less
  2. Новое и улучшенное решение, появившееся в Bootstrap 3.0, добавляет отдельный файл print.less. См. Отдельный print.less

0

Чтобы сделать вид печати похожим на планшет или рабочий стол, включите загрузчик как .less, а не как .css, а затем вы можете перезаписать реагирующие на загрузку классы в конце файла bootstrap_variables, например, так:

@container-sm:      1200px;
@container-md:      1200px;
@container-lg:      1200px;
@screen-sm:         0;

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


0

Если вы хотите сохранить столбцы на бумаге формата A4 (около 540 пикселей), это хорошая идея

@media print {
    .make-grid(print-A4);
}

.make-print-A4-column(@columns) {
    @media print {
        float: left;
        width: percentage((@columns / @grid-columns));
    }
}

Вы можете использовать это так:

<div class="col-sm-4 col-print-A4-4">

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.