it-swarm.com.de

So erstellen Sie eine druckbare Twitter-Bootstrap-Seite

Ich verwende Twitter-Bootstrap und muss die Seite so drucken können, wie sie im Browser aussieht. Ich kann andere Seiten, die mit Twitter-Bootstrap erstellt wurden, problemlos drucken, aber ich kann meine Seite, die ausschließlich Twitter-Bootstrap verwendet, nicht drucken. Fehlt mir irgendwo ein Tag?

Offizielle TB Seite beim Drucken: Twitter Bootstrap Page

Meine Seite beim Drucken: enter image description here

Wie meine Seite eigentlich aussieht: enter image description here

157
Jay Q.

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

<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 in separaten Stylesheets oder in freigegebenen Stylesheets mithilfe von Medienabfragen schreiben:

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

Bootstrap 3.2-Update: (aktuelle Version)

Die aktuelle stabile Bootstrap-Version ist 3.2.0 .
Mit der 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:

Die 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

Version von Bootstrap 2.3.1:

Nachdem Sie die Datei bootstrap.css in Ihren HTML-Code eingefügt haben,
Finden Sie die Teile, die Sie nicht drucken möchten, und fügen Sie die hidden-print-Klasse in die Tags . Hinzu, da die css-Datei Folgendes enthält:

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

Ersetze jeden col-md- durch col-xs-

zB: Ersetze jeden col-md-6 durch col-xs-6.

Dies ist die Sache, die für mich funktioniert hat, um dieses Problem loszuwerden, das Sie sehen können, was Sie ersetzen müssen.

106
Sonam

Die css-Datei enthält einen Abschnitt mit @media print-Code (Bootstrap 3.3.1 [UPDATE:] bis 3.3.5), der praktisch alle Styling-Elemente entfernt, so dass Sie ziemlich ausdruckslose Ausdrucke erhalten, selbst wenn es funktioniert.

Jetzt musste ich die @media print-Sektion aus bootstrap.css entfernen - worüber ich wirklich nicht glücklich bin, aber meine Benutzer wollen direkte Bildschirmgrafiken, so dass dies erst einmal erledigt werden muss. Wenn jemand weiß, wie er es unterdrücken kann, ohne Änderungen an den Bootstrap-Dateien vorzunehmen, 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;
  }
}
16
Hugo Yates

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();
  }
});
6
Bodie Leonard

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

1) Stellen Sie sicher, dass das Medienattribut von bootstrap-responsive.cssscreen ist.

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

2) Erstellen Sie einen print.css und stellen Sie sicher, dass sein Medienattribut print

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

3) Fügen Sie in print.css die "Breite" Ihrer Website in HTML & Body hinzu

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

4.) reproduzieren Sie die erforderlichen Medienabfrageklassen in print.css, da sie sich in bootstrap-responsive.css befanden und beim Drucken deaktiviert wurden.

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

2 Dinge zu Ihrer Information -

  1. Im Moment haben sie ein paar Toggle-Klassen hinzugefügt. Sehen Sie, was in der neuesten stabilen Version verfügbar ist - Druckeinstellungen in responsive-utilities.less
  2. Neue und verbesserte Lösung in Bootstrap 3.0 - Sie fügen eine separate print.less-Datei hinzu. Siehe separater Drucker.
2
rachelslurs

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

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

Machen Sie sich keine Sorgen, diese Variablen am Ende der Datei zu platzieren. LESS unterstützt das langsame Laden von Variablen, damit sie angewendet werden.

0
Hrvoje Golcic

Wenn Sie möchten, dass die Spalten auf A4 gedruckt werden (etwa 540 Pixel), 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">

0