So erstellen Sie eine druckbare Twitter-Bootstrap-Seite

162

Ich verwende Twitter-Bootstrap und muss in der Lage sein, die Seite so zu drucken, wie sie im Browser aussieht. Ich kann andere mit Twitter-Bootstrap erstellte Seiten problemlos drucken, aber ich kann meine Seite, die ausschließlich Twitter-Bootstrap verwendet, nicht drucken. Vermisse ich irgendwo einen Tag?

Offizielle TB-Seite beim Drucken: Twitter Bootstrap Seite

Meine Seite beim Drucken: Geben Sie hier die Bildbeschreibung ein

Wie meine Seite tatsächlich aussieht: Geben Sie hier die Bildbeschreibung ein

Jay Q.
quelle
2
Geben Sie ein Attribut media = "screen" an? Schauen Sie sich meine Antwort an.
Albertedevigo

Antworten:

156

Stellen Sie sicher, dass zum Drucken ein Stylesheet zugewiesen ist.
Es könnte sich um ein separates Stylesheet handeln:

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

oder eine, die Sie für alle Geräte freigeben:

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

Anschließend können Sie Ihre Stile für Drucker mithilfe von Medienabfragen in die separaten Stylesheets oder in die freigegebenen schreiben:

@media print {
    /* Your styles here */
}
Albertedevigo
quelle
29
Ich habe gerade Folgendes hinzugefügt: <link rel = "stylesheet" type = "text / css" media = "print" href = "bootstrap.min.css"> und musste nichts weiter tun. Lief wie am Schnürchen. Vielen Dank!
Jay Q.
13
Wenn Sie dieses Stylesheet bereits verwenden, haben Sie wahrscheinlich derzeit ein Stylesheet, media="screen"das von einem Drucker nicht angezeigt wird. Sie können dies entweder umschalten media="all"oder einfach entfernen, mediawie in der obigen Antwort angegeben.
Wex
albertedevigo, ich brauche etwas hilfe beim styling. Wie ändern Sie Schriftgröße, Breite, ... was genau musste geändert werden? TIA. @ JayQ. : Funktioniert das noch oder ist es veraltet? weil ich es nicht zum Laufen bringen kann.
musafar006
@dreamster, fügen Sie einfach Ihre Stile in das Stylesheet ein, das für den Druck gilt. Beachten Sie, dass die CSS-Kaskadierung weiterhin funktioniert. Reihenfolge, Vererbung und Auswahlprioritäten beeinflussen also das Ergebnis. Sie würden wahrscheinlich eine neue Frage mit Ihrem eigenen Code stellen.
Albertedevigo
181

Bootstrap 3.2 Update: (aktuelle Version)

Die aktuelle stabile Bootstrap-Version ist 3.2.0 .
Mit Version 3.2 ist der sichtbare Druck veraltet, daher sollten Sie Folgendes verwenden:

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-Update:

Druckklassen befinden sich jetzt in Dokumenten: 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 Version:


Suchen Sie nach dem Hinzufügen der Datei bootstrap.css zu Ihrem HTML- Code die Teile, die Sie nicht drucken möchten, und fügen Sie den hidden-printTags eine Klasse hinzu. Weil die CSS-Datei Folgendes enthält:

@media print {
  .visible-print  { display: inherit !important; }
  .hidden-print   { display: none !important; }
}
trante
quelle
4
Gibt es nicht eine Klasse, die sowohl im Browser als auch im Drucker etwas sichtbar macht, wenn ich alles ( body) unsichtbar mache .hidden-print, aber ein bestimmtes Element überschreiben möchte, das angezeigt werden soll?
Vincent Poirier
1
@ VincentPoirier - Wenn ein Element versteckt ist, ist alles darin versteckt. Es ist also nicht sinnvoll, den Körper zu verstecken, sondern etwas zu verbergen, das Teil des Körpers ist. Weil es keinen Kontext (Container) geben würde, in dem dieses Unterelement angezeigt werden könnte. Führen Sie stattdessen CSS aus, um alle Ihre Blattelemente auszublenden (z. B. setzen Sie eine Standardklasse auf Ihre inneren Divs), und verwenden Sie dann die entsprechende CSS-Klasse oder ID, wo dies sichtbar sein soll. Wird wahrscheinlich einige Experimente erfordern, um dies genau richtig zu machen.
ToolmakerSteve
112

Ersetzen Sie alle col-md-durchcol-xs-

zB: ersetzen jeden col-md-6zu col-xs-6.

Dies ist die Sache, die für mich funktioniert hat, um mich von diesem Problem zu befreien. Sie können sehen, was Sie ersetzen müssen.

Sonam
quelle
Vielen Dank ! Hatte ein Problem mit der Skalierung der HTML-Ansicht im Vergleich zur Druckansicht ... jetzt ist alles gut!
David Bélanger
2
Hey danke! Beim Drucken meiner Seite hatte ich Probleme. Jede Seite divging unter die vorherige. Diese Antwort gab mir einen Hinweis, den ich col-xs-*vor jedem hinzufügte, col-md-*und dies behebte das Problem. HAFTUNGSAUSSCHLUSS: Ich habe das Hinzufügen eines Containers nicht getestet, da <div class="row"></div>dies möglicherweise auch das Problem gelöst hat (scheint offensichtlich zu sein).
Fr0zenFyr
6
Es sei denn, man wollte ein anderes Layout für schmale Bildschirme (z. B. Telefon) als für das Drucken haben. Scheint seltsam, dass die Bootstrap-Druckerlogik den Druckbildschirm für so schmal hält.
ToolmakerSteve
3
Dies sollte oben sein.
Suraj
Nur um hinzuzufügen, dass Sie col-md- ersetzen können, wie die Antwort sagt, oder Sie können einfach col-xs- wie: class = "col-md-6 col-xs-6" hinzufügen und Sie können je nach den Anforderungen mischen und anpassen Ihres Designs.
Zaidorx
17

Es gibt einen Abschnitt von @media print Codeabschnitt in der CSS-Datei (Bootstrap 3.3.1 [UPDATE:] bis 3.3.5), der praktisch das gesamte Styling entfernt, sodass Sie auch dann ziemlich langweilige Ausdrucke erhalten, wenn es funktioniert.

Im Moment musste ich darauf zurückgreifen, den @media printAbschnitt aus bootstrap.css zu entfernen - was ich wirklich nicht bin glücklich aber meine Benutzer möchten direkte Screenshots, sodass dies werden muss. Wenn jemand weiß, wie man es ohne Änderungen an den Bootstrap-Dateien unterdrückt, wäre ich sehr interessiert.

Hier ist der 'beleidigende' Codeblock, der in Zeile 192 beginnt:

@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;
  }
}
Hugo Yates
quelle
6

Die beste Option, die ich gefunden habe, war 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();
  }
});
Bodie Leonard
quelle
Ich habe sowohl 0,4 als auch 0,5 ausprobiert, aber keiner von beiden hat funktioniert. 0.5 hat ein paar gut aussehende Sachen nach meiner Seite angehängt, aber die ursprüngliche Seite war noch da, und wie sollte ich das dann drucken? Beim Versuch von 0,4 wurde ein Druck ausgelöst, die Originalseite war ebenfalls noch vorhanden, und das Rendern war irgendwie fehlerhaft.
Csaba Toth
3

Falls jemand hier nach einer Lösung für Bootstrap v2.XX sucht . Ich verlasse die Lösung, die ich verwendet habe. Dies ist nicht in allen Browsern vollständig getestet, könnte jedoch ein guter Anfang sein.

1) Stellen Sie sicher, dass das Medienattribut von bootstrap-responsive.cssist screen.

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

2) Erstellen Sie ein print.cssund stellen Sie sicher, dass sein Medienattributprint

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

3) Fügen print.cssSie im Inneren die "Breite" Ihrer Website in HTML & Body hinzu

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

4.) Reproduzieren Sie die erforderlichen Medienabfrageklassen in, print.cssda sie sich im Inneren befanden bootstrap-responsive.cssund wir sie beim Drucken deaktiviert haben.

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

Hier ist die Vollversion von 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}
abchau
quelle
0

Damit die Druckansicht wie ein Tablet oder Desktop aussieht, schließen Sie Bootstrap als .less und nicht als .css ein. Anschließend können Sie die am Ende der Datei bootstrap_variables ansprechenden Bootstrap-Klassen wie folgt überschreiben:

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

Machen Sie sich keine Sorgen, dass diese Variablen am Ende der Datei stehen. WENIGER unterstützt das verzögerte Laden von Variablen, damit diese angewendet werden.

Hrvoje Golcic
quelle
0

Wenn Sie Spalten auf A4-Druck (ca. 540 Pixel) behalten möchten, ist dies eine gute Idee

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

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

Sie können es so verwenden:

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

Søren Westh Larsen
quelle