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

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

Официальная страница TB при печати:

Моя страница при печати:

Как выглядит моя страница:

Ответы

Ответ 1

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

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

или один из них для всех устройств:

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

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

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

Ответ 2

Обновление Bootstrap 3.2: (текущая версия)

Текущая стабильная версия Bootstrap 3.2.0.
Если версия 3.2 с видимой печатью устарела, вы должны использовать ее следующим образом:

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

Ответ 3

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

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

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

Ответ 4

В css файле есть раздел кода @media print (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;
  }
}

Ответ 5

Лучший вариант, который я нашел, был 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();
  }
});

Ответ 6

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

1) убедитесь, что атрибут носителя bootstrap-responsive.css равен 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}

Ответ 7

2 вещи FYI -

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

Ответ 8

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

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

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

Ответ 9

Сала.

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

<div id="print">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css" media="all" />
    <link rel="stylesheet" href="assets/css/style.css" type="text/css" media="all" />
 .... <!-- data for print -->
</div>

Ответ 10

Если вы хотите сохранить столбцы в формате 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">