วิธีการสร้างหน้า Twitter-Bootstrap ที่พิมพ์ได้

ฉันใช้ 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's no media attribute

จากนั้นคุณสามารถเขียนสไตล์ของคุณสำหรับเครื่องพิมพ์ในสไตล์ชีทแยกต่างหากหรือในสไตล์ที่แชร์โดยใช้คำสั่งสื่อ:

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

การอัพเดท 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; }
}

แทนที่col-md-ด้วยcol-xs-

เช่นเปลี่ยนทุกการcol-md-6col-xs-6

นี่คือสิ่งที่ทำงานให้ฉันเพื่อกำจัดปัญหานี้คุณสามารถดูสิ่งที่คุณต้องเปลี่ยน

มีส่วนหนึ่งของ@media printรหัสในไฟล์ css (Bootstrap 3.3.1 [อัพเดท:] ถึง 3.3.5) ซึ่งจะทำให้สไตล์ทั้งหมดแทบหมดดังนั้นคุณจะได้รับงานพิมพ์ที่ค่อนข้างอ่อนไหวแม้ในขณะที่ทำงานอยู่

สำหรับตอนนี้ฉันต้องหันไปใช้การแยก@media printส่วนจาก bootstrap.css ซึ่งฉันไม่มีความสุขจริง ๆแต่ผู้ใช้ของฉันต้องการโดยตรงหน้าจอคว้าดังนั้นตอนนี้จะต้องทำ หากใครรู้วิธีการปราบปรามโดยไม่เปลี่ยนแปลงไฟล์ bootstrap ฉันสนใจมาก

นี่คือบล็อคโค้ด 'offending' เริ่มที่บรรทัด # 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.XXที่นี่ ฉันกำลังออกจากโซลูชันที่ฉันใช้อยู่ นี่ไม่ได้ทดสอบอย่างเต็มที่กับเบราว์เซอร์ทั้งหมด แต่มันอาจเป็นการเริ่มต้นที่ดี

1) ให้แน่ใจว่าคุณลักษณะของสื่อคือbootstrap-responsive.cssscreen

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

1. ในตอนนี้พวกเขาได้เพิ่มคลาสการสลับสองสามครั้ง ดูสิ่งที่มีอยู่ในรีลีสล่าสุดที่มีความเสถียร - สลับการพิมพ์ใน responsive-Utilities.less
2. โซลูชั่นใหม่และปรับปรุงที่มาใน Bootstrap 3.0 - พวกเขากำลังเพิ่มไฟล์ print.less แยกต่างหาก ดูที่print.less แยกต่างหาก

ในการทำให้มุมมองการพิมพ์ดูเหมือนแท็บเล็ตหรือเดสก์ท็อปให้ใส่ bootstrap เป็น .less ไม่ใช่. css จากนั้นคุณสามารถเขียนทับคลาสการตอบสนอง bootstrap ในตอนท้ายของไฟล์ bootstrap_variables เช่นนี้:

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

ไม่ต้องกังวลกับการวางตัวแปรนี้ไว้ท้ายไฟล์ LESS รองรับการโหลดตัวแปรที่ขี้เกียจดังนั้นมันจะถูกนำไปใช้

หากคุณต้องการเก็บคอลัมน์ไว้ในการพิมพ์ A4 (ประมาณ 540px) นี่เป็นความคิดที่ดี

@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">