Jak stworzyć stronę Twitter-Bootstrap do wydrukowania

Używam Twitter-Bootstrap i muszę mieć możliwość wydrukowania strony tak, jak wygląda w przeglądarce. Mogę wydrukować inne strony utworzone za pomocą Twitter-Bootstrap, ale nie mogę wydrukować mojej strony, która używa wyłącznie Twitter-Bootstrap. Czy brakuje mi gdzieś tagu?

Oficjalna strona TB po wydrukowaniu:

Moja strona po wydrukowaniu:

Jak faktycznie wygląda moja strona:

Upewnij się, że masz przypisany arkusz stylów do drukowania.
Może to być oddzielny arkusz stylów:

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

lub udostępniony dla wszystkich urządzeń:

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

Następnie możesz zapisać swoje style dla drukarek w oddzielnych arkuszach stylów lub w udostępnionym arkuszu za pomocą zapytań o media:

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

Aktualizacja Bootstrap 3.2: (aktualne wydanie)

Obecna stabilna wersja Bootstrap to 3.2.0 .
W wersji 3.2 visual print jest przestarzała, więc powinieneś używać w następujący sposób:

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

Aktualizacja Bootstrap 3:

Klasy drukowania znajdują się teraz w dokumentach: 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

Wersja Bootstrap 2.3.1:

Po dodaniu pliku bootstrap.css do HTML,
znajdź części, których nie chcesz drukować i dodaj hidden-printklasę do tagów. Ponieważ plik css zawiera to:

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

Wymień co col-md- zcol-xs-

np .: zamień co col-md-6nacol-xs-6 .

To jest rzecz, która działała dla mnie, aby pozbyć się tego problemu, możesz zobaczyć, co musisz wymienić.

Jest sekcja @media print pliku css kodu (Bootstrap 3.3.1 [UPDATE:] do 3.3.5), która usuwa praktycznie całą stylizację, dzięki czemu można uzyskać dość nijakie wydruki, nawet gdy działa.

Na razie musiałem uciekać się do rozebrania @media print sekcji z bootstrap.css - z czego naprawdę nie jestem zadowolony, ale moi użytkownicy chcą bezpośrednich zrzutów ekranu, więc na razie będzie to musiało wystarczyć. Jeśli ktoś wie, jak to stłumić bez zmian w plikach bootstrap, byłbym bardzo zainteresowany.

Oto „obraźliwy” blok kodu, zaczynający się od wiersza 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;
  }
}

Najlepsza opcja, jaką znalazłem, to 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();
  }
});

Na wypadek, gdyby ktoś szukał rozwiązania dla Bootstrap v2.XX tutaj. Zostawiam rozwiązanie, którego używałem.Nie jest to w pełni przetestowane na wszystkich przeglądarkach, ale może to być dobry początek.

1) upewnij się, że atrybut media w bootstrap-responsive.cssto screen.

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

2) utwórz print.cssi upewnij się, że ma atrybut mediaprint

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

3) w środku print.cssdodaj „szerokość” swojej strony w html & body

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

4.) odtworzyć niezbędne klasy zapytań o media w, print.cssponieważ były w środku bootstrap-responsive.cssi wyłączyliśmy je podczas drukowania.

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

Oto pełna wersja 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 rzeczy FYI -

1. Na razie dodali kilka klas przełączania. Zobacz, co jest dostępne w najnowszej stabilnej wersji - przełączanie drukowania w responsive-utilities.less
2. Nowe i ulepszone rozwiązanie pojawi się w Bootstrap 3.0 - dodają osobny plik print.less. Zobacz osobny wydruk. Bez

Aby widok wydruku wyglądał jak tablet lub komputer, dołącz bootstrap jako .less, a nie jako .css, a następnie możesz nadpisać klasy responsywne bootstrap na końcu pliku bootstrap_variables, na przykład w ten sposób:

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

Nie przejmuj się umieszczaniem tych zmiennych na końcu pliku. LESS obsługuje leniwe ładowanie zmiennych, więc zostaną one zastosowane.

Jeśli chcesz zachować kolumny na wydruku A4 (czyli około 540 pikseli), jest to dobry pomysł

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

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

Możesz go używać w ten sposób:

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