Я использую Twitter-Bootstrap, и мне нужно иметь возможность печатать страницу так, как она выглядит в браузере. Я могу печатать другие страницы, сделанные с помощью Twitter-Bootstrap, просто отлично, но я не могу напечатать свою страницу, которая использует исключительно Twitter-Bootstrap. Я где-то пропускаю тег?
Официальная страница TB при печати:
Моя страница при печати:
Как выглядит моя страница:
Обязательно настройте таблицу стилей для печати.
Это может быть отдельная таблица стилей:
<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 */
}
Текущая стабильная версия 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
Классы печати теперь находятся в документах: 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.css в ваш HTML,
Найдите части, которые вы не хотите печатать, и добавьте класс hidden-print в теги.
Поскольку файл css включает в себя следующее:
@media print {
.visible-print { display: inherit !important; }
.hidden-print { display: none !important; }
}
Замените каждый col-md- на col-xs-
например: замените каждый col-md-6 на col-xs-6.
Это то, что сработало для меня, чтобы избавиться от этой проблемы, вы можете увидеть, что вам нужно заменить.
В 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;
}
}
Лучший вариант, который я нашел, был 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();
}
});
Если кто-то ищет решение для 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}
2 вещи FYI -
Чтобы сделать вид печати похожим на планшет или рабочий стол, включите bootstrap как .less, а не как .css, а затем вы можете перезаписать классы, отвечающие за bootstrap, в конце файла bootstrap_variables, например, следующим образом:
@container-sm: 1200px;
@container-md: 1200px;
@container-lg: 1200px;
@screen-sm: 0;
Не беспокойтесь о том, чтобы поместить эти переменные в конец файла. LESS поддерживает ленивую загрузку переменных, чтобы они были применены.
Сала.
Если вы хотите напечатать указанный элемент, содержащий данные, вы добавите стиль к этому элементу:
<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>
Если вы хотите сохранить столбцы в формате 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">