printing - attribute - Cómo crear una página imprimible de Twitter-Bootstrap

title html css

Question

Estoy usando Twitter-Bootstrap y necesito poder imprimir la página como se ve en el navegador. Puedo imprimir otras páginas hechas con Twitter-Bootstrap muy bien, pero parece que no puedo imprimir mi página que usa solo Twitter-Bootstrap. ¿Me estoy perdiendo una etiqueta en alguna parte?

Página oficial de TB cuando se imprime:

Mi página cuando está impresa:

Cómo se ve mi página en realidad:

Answer 1

Actualización de Bootstrap 3.2: (versión actual)

La versión estable actual de Bootstrap es 3.2.0 .
Con la versión 3.2 visible-print obsoleta, debería usar esto:

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

Actualización de Bootstrap 3:

Las clases de impresión ahora están en documentos: 3.2.0

Similar to the regular responsive classes,
use these for toggling content for print.
Class Browser Print
----------------------------------------
.visible-print Hidden Visible
.hidden-print Visible Hidden

Versión de Bootstrap 2.3.1:

Después de agregar el archivo bootstrap.css en su HTML,
Busque las partes que no desea imprimir y agregue hidden-print clase de hidden-print en las etiquetas. Porque el archivo css incluye esto:

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

Answer 2

2 cosas FYI -

1. Por ahora, han agregado algunas clases de alternar. Vea lo que está disponible en la última versión estable: imprimir cambia en responsive-utilities.less
2. Una solución nueva y mejorada incluida en Bootstrap 3.0: agregan un archivo print.less por separado. Vea print.less por separado

Answer 3

Asegúrese de tener una hoja de estilo asignada para imprimir.
Podría ser una hoja de estilo separada:

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

o uno que compartes para todos los dispositivos:

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

Luego, puede escribir sus estilos para impresoras en las hojas de estilo separadas o en la compartida mediante consultas de medios:

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

Answer 4

En caso de que alguien esté buscando una solución para Bootstrap v2.XX aquí. Estoy dejando la solución que estaba usando. Esto no se ha probado completamente en todos los navegadores, pero podría ser un buen comienzo.

1) asegúrese de que el atributo de medios de bootstrap-responsive.css es la screen .

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

2) cree un print.css y asegúrese de que se print su atributo de print

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

3) dentro de print.css , agregue el "ancho" de su sitio web en html y cuerpo

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

4.) reproducir las clases de consulta de medios necesarias en print.css porque estaban dentro de bootstrap-responsive.css y lo hemos desactivado al imprimir.

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

Aquí está la versión completa de 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 5

Hay una sección del código de @media print en el archivo css (Bootstrap 3.3.1 [UPDATE:] a 3.3.5), esto elimina prácticamente todo el diseño, por lo que obtendrá impresiones bastante sencillas incluso cuando esté funcionando.

Por ahora, he tenido que recurrir a eliminar la sección de @media print de bootstrap.css, lo cual no me agrada, pero mis usuarios quieren capturas de pantalla directas, así que esto tendrá que funcionar por el momento. Si alguien sabe cómo suprimirlo sin cambios en los archivos de arranque, estaría muy interesado.

Aquí está el bloque de código "ofensivo", comienza en la línea # 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 6

La mejor opción que encontré fue 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 7

Para que la vista de impresión se parezca a la tableta o al escritorio, incluya bootstrap como .less, no como .css y, a continuación, puede sobrescribir las clases que responden al arranque al final del archivo bootstrap_variables, por ejemplo, así:

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

No te preocupes por poner estas variables al final del archivo. LESS admite la carga diferida de variables para que se apliquen.

Answer 8

Reemplace cada col-md- con col-xs-

Por ejemplo: reemplace cada col-md-6 a col-xs-6 .

Esto es lo que funcionó para que me deshaga de este problema, puede ver lo que tiene que reemplazar.

Answer 9

Salam.

Si desea imprimir el elemento especificado que contiene datos, debe agregar estilo a ese elemento:

<div id="print">
<link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css" media="all" />
<link rel="stylesheet" href="assets/css/style.css" type="text/css" media="all" />
.... <!-- data for print -->
</div>

Answer 10

Si desea mantener columnas impresas en A4 (que es alrededor de 540px) esta es una buena idea

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

Puedes usarlo así:

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