javascript - HTML printing limit 1 page only -
i printing html table, varies in length. when printing table, may print 1 page 10 pages. there way limit printing 1 page using programming code? yes there option in browser print dialog set printing 1 page (this last option opt)
printing html using window.print() method
you try setting print css this:
@media print { html, body { height:100%; margin: 0 !important; padding: 0 !important; overflow: hidden; } } the basic idea have page 100% height , hide overflow. should allow show content of height of 100% of page = 1 page.
edit:
based on comment show example 5 different tables on separate tables this:
@media print { table { /* or specify table class */ max-height: 100%; overflow: hidden; page-break-after: always; } } the page-break-after tell browser make page break after each table. in case need discard css styles set above html , body. each table limited 100% height of page.
it's hard include example in these snippets iframes here's code can try if save html file.
<!doctype html> <html> <head> <meta charset="utf-8"> <style> table { width: 100%; border: 2px solid black; } @media print { table { max-height: 100%; overflow: hidden; page-break-after: always; } } </style> </head> <body> <table> <tr> <td> <h2>table 1</h2> </td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> </table> <table> <tr> <td> <h2>table 2</h2> </td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> </table> <table> <tr> <td> <h2>table 3</h2> </td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> </table> </body> </html>edit 2:
ie seems have trouble above examples has trouble common sense. can include ie specific fixes or set these on browsers here's working example ie. main thing here play @page attribute , it's size + margins. don't have time @ time right helps you.
<!doctype html> <html> <head> <meta charset="utf-8"> <style> html, body { margin: 0; padding: 0; } * { box-sizing: border-box; } table { cell-padding: 0; cell-spacing: 0; width: 100%; border: 2px solid black; } @page { size: a4; margin: 0; } @media print { table { max-height: 100% !important; overflow: hidden !important; page-break-after: always; } } </style> </head> <body> <table> <tr> <td> <h2>table 1</h2> </td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> </table> <table> <tr> <td> <h2>table 2</h2> </td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> </table> <table> <tr> <td> <h2>table 3</h2> </td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> <tr> <td>content</td> </tr> </table> </body> </html>
Comments
Post a Comment