如何创建可打印的 Twitter-Bootstrap 页面

Question

我正在使用 Twitter-Bootstrap，我需要能够按照浏览器上的外观打印页面。我可以打印使用 Twitter-Bootstrap 制作的其他页面，但我似乎无法打印使用纯 Twitter-Bootstrap 的页面。我是不是在某个地方漏掉了一个标签？

打印时的官方 TB 页面：

打印时我的页面：

我的页面实际上是什么样子的：

Answer 1

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

引导程序 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 版本：

在您的 HTML 中添加 bootstrap.css 文件后，
找到您不想打印的部分并将hidden-print 类添加到标签中。 因为css文件包含这个：

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

Answer 2

确保为打印分配了一个样式表。
它可以是一个单独的样式表：

<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 */
}

Answer 3

将每个col-md- 替换为col-xs-

例如：将每个col-md-6 替换为col-xs-6。

这对我来说是解决这个问题的方法，你可以看看你需要更换什么。

Answer 4

在 css 文件中有一段 @media print 代码（Bootstrap 3.3.1 [更新：] 到 3.3.5），这几乎去除了所有的样式，所以即使它正在工作，你也会得到相当平淡的打印输出.

现在我不得不从 bootstrap.css 中删除 @media print 部分 - 我真的不对此感到高兴，但我的用户想要直接的屏幕抓取，所以这个'现在必须做。如果有人知道如何在不更改引导文件的情况下抑制它，我会非常感兴趣。

这是“违规”代码块，从第 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;
  }
}

Answer 5

我找到的最佳选择是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();
  }
});

Answer 6

如果有人在此处寻找 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}

Answer 7

2 件事仅供参考 -

1. 目前，他们已经添加了一些切换类。查看最新稳定版本中的可用内容 - print toggles in responsive-utilities.less
2. Bootstrap 3.0 中提供了新的和改进的解决方案 - 他们正在添加一个单独的 print.less 文件。见separate print.less

Answer 8

要使打印视图看起来像平板电脑或桌面，请将 bootstrap 包含为 .less，而不是 .css，然后您可以在 bootstrap_variables 文件的末尾覆盖引导响应类，例如：

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

不必担心将这些变量放在文件末尾。 LESS 支持延迟加载变量，以便应用它们。

Answer 9

如果您想在 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">