我正在使用 Twitter-Bootstrap，需要能够打印与在浏览器中看到的页面相同的页面。我可以成功地打印其他使用 Twitter-Bootstrap 制作的页面，但是我无法打印纯粹使用 Twitter-Bootstrap 的页面。我是否遗漏了某个标签？
官方 TB 页面打印效果：
我的页面打印效果：
我的页面实际效果：
如何创建可打印的 Twitter-Bootstrap 页面
165
- Jay Q.
1
2你是否指定了media="screen"属性？请看我的回答。 - albertedevigo
9个回答
183
Bootstrap 3.2更新：（当前版本）
目前稳定版本的Bootstrap是3.2.0。
在3.2版本中，visible-print已不建议使用，所以您应该像这样使用：
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; }
}
- trante
2
4有没有一种课程可以让我在将所有内容(
body)设为不可见时（使用.hidden-print），使某个特定元素在浏览器和打印机上都可见？我想修改它的显示。 - Vincent Poirier1@VincentPoirier - 如果一个元素被隐藏了，它内部的所有内容都会被隐藏。因此，隐藏<body>元素但是取消隐藏它的某个子元素是没有意义的。因为没有上下文（容器）可以展示该子元素。相反，应该使用css来隐藏所有叶子元素（例如，在您的内部<div>上放置一个默认类），然后在需要可见的地方使用适当的css类或id。可能需要一些实验才能得到完全正确的效果。 - ToolmakerSteve
158
一定要为打印指定样式表。
这可以是单独的样式表:
<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 */
}
- albertedevigo
4
31我刚刚添加了这个：<link rel="stylesheet" type="text/css" media="print" href="bootstrap.min.css"> ，不需要做其他任何事情。非常好用，谢谢！ - Jay Q.
13如果你已经在使用这个样式表，那么很可能你当前有
media="screen"，这对打印机不可见。你可以将其切换为media="all"，或者像上面的答案建议的那样，直接删除media。 - Wexalbertedevigo，我需要关于样式方面的帮助。比如改变字体大小、宽度等等，具体需要改变什么？谢谢。
@JayQ.：这个还能用吗，还是已经过时了？因为我无法让它工作。 - musafar006
@dreamster，只需将您的样式包含在适用于打印的样式表中即可。请注意，CSS级联仍然有效；因此顺序、继承和选择器优先级将影响结果。您可能需要使用自己的代码提出一个新问题。 - albertedevigo
114
将每个col-md-替换为col-xs-
例如：将每个col-md-6替换为col-xs-6。
这是我用来解决问题的方法，你可以看到需要替换什么。
- Sonam
7
谢谢！之前在 HTML 视图和打印视图的比例方面遇到了问题...现在一切都好了！ - David Bélanger
2嘿，谢谢！我在打印页面时遇到了问题，每个
div 都会跑到前一个下面。这个答案给了我一个提示，我在每个 col-md-* 前面添加了 col-xs-*，然后问题就解决了。免责声明：我没有测试添加一个容器，即 <div class="row"></div>，可能也可以解决问题（看起来很明显）。 - Fr0zenFyr6除非有意为手机等狭窄屏幕设计不同的布局，否则似乎很奇怪Bootstrap打印逻辑认为其打印屏幕如此狭窄。 - ToolmakerSteve
3这应该放在最上面。 - Suraj
只是补充一下，你可以像答案中所说的那样替换 col-md-，或者你可以添加 col-xs-，例如：class="col-md-6 col-xs-6"，并根据设计要求进行混合和匹配。 - zaidorx
显示剩余2条评论
17
在 CSS 文件（Bootstrap 3.3.1 [UPDATE:] 至 3.3.5）中有一部分 @media print 代码，它会剥离几乎所有的样式，因此即使它有效，您得到的印刷品也会相当平淡无奇。
目前我不得不将 @media print 部分从 bootstrap.css 中删除 - 虽然我真的非常不高兴，但我的用户想要直接截屏，所以现在只能这样做。如果有人知道如何在不更改 bootstrap 文件的情况下抑制它，我会非常感兴趣。
这里是“有问题”的代码块，从第 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;
}
}
- Hugo Yates
6
我发现最好的选择是http://html2canvas.hertzen.com/
它能够将网页内容转换为图片，适用于需要在网页上进行截图或生成PDF等场景。同时，它还提供了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
1
我尝试了0.4和0.5两个版本，但都没起作用。0.5版本在我的页面后添加了一些好看的东西，但原始页面仍然存在，那么如何打印呢？尝试使用0.4触发了打印，原始页面仍然存在，并且渲染出现了问题。 - Csaba Toth
3
如果有人在这里寻找 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}
- abchau
2
提醒2件事情：
- 目前，他们已经添加了几个开关类。在最新的稳定版本中查看可用内容- responsive-utilities.less中的打印切换
- Bootstrap 3.0中将会提供一个新的和改进的解决方案-他们将添加一个单独的print.less文件。请参见separate print.less
- rachelslurs
0
为了使打印视图看起来像平板电脑或桌面电脑，请将bootstrap作为.less而不是.css引入，然后您可以在bootstrap_variables文件的末尾覆盖bootstrap响应类，例如：
@container-sm: 1200px;
@container-md: 1200px;
@container-lg: 1200px;
@screen-sm: 0;
不用担心将这些变量放在文件末尾。LESS支持变量的惰性加载，因此它们会被应用。
- Hrvoje Golcic
0
如果您想在A4打印（大约为540像素）时保留列，则这是一个好主意。
你可以像这样使用它：
@media print {
.make-grid(print-A4);
}
.make-print-A4-column(@columns) {
@media print {
float: left;
width: percentage((@columns / @grid-columns));
}
}
你可以像这样使用它：
- Søren Westh Larsen
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接