Question

0

285

Visualizações

Cómo imprimir solo el cuerpo de la tabla html usando javascript

 <table border="1" cellpadding="3" id="printTable"> <tbody id="printTbody"><tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> <tr> <td>Adam</td> <td>Johnson</td> <td>67</td> </tr> </tbody></table> <br /> <br /> <button onclick="printTablefun()">Print Table</button> <button onclick="printtbodyfun()">Print Tbody</button> <script> function printTablefun() { var divToPrint=document.getElementById("printTable"); newWin= window.open(""); newWin.document.write(divToPrint.outerHTML); newWin.print(); newWin.close(); } function printtbodyfun() { var divToPrint=document.getElementById("printTbody"); newWin= window.open(""); newWin.document.write(divToPrint.outerHTML); newWin.print(); newWin.close(); } </script>

Descripción

Desde este enlace anterior, he agregado el violín como y el código

Problema

Cuando hago clic en el botón "Imprimir tabla", se imprime correctamente como una tabla
Cuando hago clic en el botón "Imprimir Tbody", solo se imprime el texto pero en formato de tabla

lo que necesitaba

Cuando hago clic en el botón "Imprimir cuerpo", tengo que imprimir el contenido en el cuerpo como en un formato de tabla

Al hacer clic en el botón "Imprimir tabla"

Al hacer clic en el botón "Imprimir Tbody"

about 4 years ago · Juan Pablo Isaza

2 Respostas

Responde à pergunta

0

Si desea ocultar un elemento en la impresión, puede usar la solución css usando @media print

 @media print { .hide-on-printing { display: none; // hide the elements have this class when document is being printed } }

 class Print { constructor(elem) { this._elem = elem; elem.onclick = this.onClick.bind(this); } print() { let newWindow = window.open(''); newWindow.document.write(`<table>${table.outerHTML}</table>`); newWindow.print(); newWindow.close(); } table() { this.print(); } tbody() { thead.classList.add('hide-on-printing'); this.print(); } onClick(event) { let action = event.target.dataset.action; if (action) { this[action](); } } } new Print(actions);

 @media print { .hide-on-printing { display: none; } }

 <table border="1" cellpadding="3" id="table"> <thead id="thead"> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> </thead> <tbody id="tbody"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> <tr> <td>Adam</td> <td>Johnson</td> <td>67</td> </tr> </tbody> </table> <br /> <div id="actions"> <button data-action="table">print table</button> <button data-action="tbody">print body</button> </div>

P/S: Traté de imprimir en la pestaña actual, funciona pero no cuando hago clic en el botón.

about 4 years ago · Juan Pablo Isaza Relatório

Responde à pergunta

Encontrar trabalhos remotos

Accepted Answer · 2022-06-25T02:54:45.216Z

Diría que el comportamiento que describe y muestra en las capturas de pantalla es correcto. un elemento tbody sin un elemento de table principal debe interpretarse como texto, ya que marca algunas filas de una tabla como cuerpo/contenido de la tabla y sin la tabla no hay cuerpo.

para fines de prueba, simplemente elimine la etiqueta de la table de su código html y visualícela en su navegador preferido. la salida es solo texto (al menos para mí en Chrome)

si desea que la salida sea una tabla, declárela como tabla:

 function printtbodyfun() { var divToPrint=document.getElementById("printTbody"); newWin= window.open(""); newWin.document.write("<table>"+divToPrint.outerHTML+"</table>"); newWin.print(); newWin.close(); }

como alternativa, puede intentar agregar css a la ventana de salida y cambiar el valor de css de display de tbody a table.

EDITAR: no funcionó la solución css :/

0

285