Tengo una tabla con varias columnas.Imprime una tabla HTML muy amplia sin recorte en el lado derecho

el problema específico

Al imprimir dicha tabla, las columnas de la derecha no se imprimirán, ni siquiera cuando se imprime en orientación horizontal.

el comportamiento deseado

El navegador debe imprimir toda la tabla, utilice varias hojas si es necesario. Las soluciones de CSS/JavaScript son aceptables.

CÓDIGO menor tiempo necesario para reproducir el problema

Haga clic en el botón de impresión en la siguiente demostración. Mire el lado derecho de la página en la ventana de vista previa de impresión.

$(function() { 
 
    $("input:first").click(function() { 
 
    window.print(); 
 
    }); 
 
    $(".description").each(function() { 
 
    var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat malesuada sodales. Nulla convallis neque lorem, ac varius enim. Ut dapibus, orci at feugiat eleifend, dui mi lobortis tortor, ac egestas neque enim et neque. Donec tempus mi quis tellus dapibus eu blandit magna sagittis. Curabitur ac ultrices tortor. Aliquam id tincidunt urna. Nunc id neque ac urna congue convallis. Etiam eget massa vitae justo aliquam pulvinar vitae ut diam."; 
 
    text = text.substr(0, Math.ceil(Math.random() * 100)); 
 
    $(this).text(text); 
 
    }); 
 
    $(".number").each(function() { 
 
    var text = (Math.random() * 1000).toFixed(2); 
 
    $(this).text(text); 
 
    }); 
 
});

@media screen { 
 
    input { 
 
    width: 100%; 
 
    margin: 1em 0; 
 
    } 
 
} 
 
@media print { 
 
    input { 
 
    display: none; 
 
    } 
 
} 
 
th { 
 
    font: bold 12px sans-serif; 
 
    border: 1px solid; 
 
    white-space: nowrap; 
 
} 
 
td { 
 
    font: 12px sans-serif; 
 
    border: 1px dotted; 
 
} 
 
td.description { 
 
    min-width: 200px; 
 
    border-style: solid; 
 
} 
 
td.number { 
 
    padding-left: 20px; 
 
    text-align: right; 
 
    border-style: solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<input type="button" value="Print"> 
 

 
<table> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <th colspan="12">2009</th> 
 
    <th colspan="12">2010</th> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <th>Description</th> 
 
    <th>Jan</th> 
 
    <th>Feb</th> 
 
    <th>Mar</th> 
 
    <th>Apr</th> 
 
    <th>May</th> 
 
    <th>Jun</th> 
 
    <th>Jul</th> 
 
    <th>Aug</th> 
 
    <th>Sep</th> 
 
    <th>Oct</th> 
 
    <th>Nov</th> 
 
    <th>Dec</th> 
 
    <th>Jan</th> 
 
    <th>Feb</th> 
 
    <th>Mar</th> 
 
    <th>Apr</th> 
 
    <th>May</th> 
 
    <th>Jun</th> 
 
    <th>Jul</th> 
 
    <th>Aug</th> 
 
    <th>Sep</th> 
 
    <th>Oct</th> 
 
    <th>Nov</th> 
 
    <th>Dec</th> 
 
    <th>Total</th> 
 
    </tr> 
 
    <tr> 
 
    <th rowspan="2">Batch number 1</th> 
 
    <td rowspan="2" class="description"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    </tr> 
 
    <tr> 
 
    <th rowspan="4">Batch number 2</th> 
 
    <td rowspan="4" class="description"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    </tr> 
 
    <tr> 
 
    <th rowspan="4">Batch number 3</th> 
 
    <td rowspan="4" class="description"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    </tr> 
 
    <tr> 
 
    <th rowspan="2">Batch number 4</th> 
 
    <td rowspan="2" class="description"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    </tr> 
 
    <tr> 
 
    <th>Total</th> 
 
    <td class="description"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    <td class="number"></td> 
 
    </tr> 
 
</table>

Fuente

2012-01-17 Salman A

Prueba este de impresión @media {@ Page {size: paisaje}} [Esto ayudará a] [1] [1]: http://stackoverflow.com/questions/138422/landscape-printing-from-html – Narek

Si leyó la pregunta, _even_ landscape orientation no ayuda. Según entiendo la pregunta, es si puede hacer que el navegador imprima un contenido muy amplio en varias páginas, por lo que sé que no puede. – OlliM

esto no es un "¿por qué no está funcionando este código?" pregunta, certanly pregunta "Cómo", a un tema específico, y le dice qué OP investigar e intentar –

Aquí es mi ir a esto:

Demo y Code
Article

Lo que hice fue:

Crear un div ancho fijo que se ajusta muy bien en una página de tamaño A4
copiado la mesa dentro que div
desplazar la tabla x pixeles para llevar la porción deseada en "foco" usando CSS posicionamiento
Repita este proceso Y veces

Ejemplo: Si el tabla se 2000px de ancho y ancho de página se establece en 600px entonces y debe ser y x será 0, 600, 1200 y .

Fuente

2013-04-29 12:30:28

Esta es una gran solución. ¡Está funcionando sin problemas! – Vaidas

Muy bien, pero no funciona en IE – inon

Lamentablemente, esta solución generará saltos de página que se dividirán en el medio de una columna. Excel se asegura de que las columnas no se dividan entre páginas. – wrecks

uso

@media print{@page {size: landscape}}

Fuente

2012-01-17 17:26:47

Ver esta pregunta: Print Stylesheets for pages with long horizontal tables

El punto es que no se puede conseguir un navegador para imprimir tablas horizontales de la misma manera como Excel hace. Tienes que cambiar a algo que tenga como máximo una página de ancho.

Fuente

2012-03-05 15:28:42 OlliM

La respuesta proporcionada por @ (Salman A) funcionó bien para mí en Chrome y Firefox.He modificado para romper en los límites de la columna con la siguiente:

var acSplitTable = function() { 
    var table = $(".ac-print .ac-grid>table"), 
     tableWidth = table.outerWidth(), 
     pageWidth = 600, 
     pageCount = Math.ceil(tableWidth/pageWidth), 
     printWrap = $("<div></div>").insertAfter(table), 
     i, 
     printPage; 

    $(".ac-print .ac-grid>table .ac-hidden").remove(); 

    var positions = []; 
    var lastOuterWidth = 0; 
    $(".ac-print .ac-grid>table th").each(function() { 
     positions.push($(this).position().left); 
     lastOuterWidth = $(this).outerWidth; 
    }); 

    var pageWidths = []; 
    var endColumns = []; 

    var lastPosition = 0; 
    for (i = 1; i < positions.length; i++) { 
     if ((positions[i] - lastPosition) > pageWidth) { 
      pageWidths.push(positions[i - 1] - lastPosition); 
      lastPosition = positions[i - 1]; 
      endColumns.push(i - 1); 
     } 
     if (i == (positions.length - 1)) { 
      pageWidths.push(positions[i] + lastOuterWidth - lastPosition); 
      lastPosition = positions[i]; 
      endColumns.push(i); 
     } 
    } 
    pageCount = pageWidths.length; 

    var lastEndColumn = 0; 
    for (i = 0; i < pageCount; i++) { 
     var thisPageWidth = pageWidth; //pageWidths[i]; 
     var styleString = "overflow: hidden; width:" + thisPageWidth + "px; page-break-before: " + (i === 0 ? "auto" : "always") + ";"; 
     var newTable = table.clone().attr("id", "ac-print-page-" + i); 
     newTable.attr("style", styleString); 
     newTable.appendTo("#formpoint"); 

     //remove columns either side of our page 
     for (var j = positions.length - 1; j >= 0; j--) { 
      if (j > endColumns[i] || j <= lastEndColumn) { 
       var index = j + 1; 
       var heading = $(newTable).find("tr th:nth-child(" + index + ")"); 
       $(newTable).find("tr th:nth-child(" + index + ")").remove(); 
       $(newTable).find("tr td:nth-child(" + index + ")").remove(); 
      } 
     } 

     lastEndColumn = endColumns[i]; 
    } 

    table.hide(); 
    $(this).prop("disabled", true); 

    window.print(); 
    setTimeout(window.close, 0); 

};

Fuente

2016-08-30 22:11:20

Imprime una tabla HTML muy amplia sin recorte en el lado derecho

el problema específico

el comportamiento deseado

CÓDIGO menor tiempo necesario para reproducir el problema

Respuesta

Cuestiones relacionadas