Tengo ficha llena de formulario, quiero imprimir toda la información del formulario. He preparado el botón de descarga en forma de pestaña. Funciona bien, pero quiero ajustar el CSS para la impresión. Quiero hacerlo más agradable, pero no puedo descifrarlo en la parte de CSS. Quiero lograr la salida de esa pestaña 1 para una página. es posible hacer eso?
Cada uno de los menús/pestañas tiene una página diferente.
Si quiero lograr eso, ¿cómo ajusto el CSS y le doy algo de relleno?
$("#downloadPdf").click(function() { window.print(); }); @media print { .nav-tabs { display: none !important; } .tab-content>.tab-pane { display: block !important; } .tab-content>.fade { opacity: 1; } #downloadPdf { display: none; } } <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script> </head> <body> <div class="container"> <h2>Dynamic Tabs</h2> <ul class="nav nav-tabs" id="tabs"> <li class="active"><a data-toggle="tab" href="#homepage">Terms & Condition</a></li> <li><a data-toggle="tab" href="#home">Info</a></li> <li><a data-toggle="tab" href="#info">Form</a></li> <li><a data-toggle="tab" href="#form">Menu 3</a></li> </ul> <div class="tab-content"> <div id="homepage" class="tab-pane fade in active"> <h3>Terms and Conditions</h3> <span style="font-size: 80%;"><i>Please read the terms and condition first</i></span> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p><input type="checkbox" id="reg"> Please tick this if u have read and understand everything </p> </div> <div id="home" class="tab-pane fade"> <h3>Menu 1</h3> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div id="info" class="tab-pane fade"> <h3>Menu 2</h3> <div class="form-row"> <div class="col-md-12"> <input type="text" class="form-control" placeholder="City"> </div> <div class="col-md-6"> <input type="text" class="form-control" placeholder="State"> </div> <div class="col-md-6"> <input type="text" class="form-control" placeholder="Zip"> </div> </div> </div> <div id="form" class="tab-pane fade"> <h3>Menu 3</h3> <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> <br> </div> </div> </div> <hr> <div> <p><button type="button" id="downloadPdf" class="btn btn-warning" data-toggle="tooltip" data-placement="top" title="Download">Download</button></p> </div> </body> </html>Para la solución, necesita la propiedad css page-break-before: always; y configúrelo para 2, 3, 4 pestañas.
CSS
@media print { .nav-tabs { display: none !important; } .tab-content > .tab-pane { display: block !important; } .tab-content > .fade { opacity: 1; } #downloadPdf { display: none; } /* New lines */ #home, #info, #form { page-break-before: always; } } $('#downloadPdf').click(function () { window.print(); }); @media print { .nav-tabs { display: none !important; } .tab-content>.tab-pane { display: block !important; } .tab-content>.fade { opacity: 1; } #downloadPdf { display: none; } /* New lines */ #home, #info, #form { page-break-before: always; } } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script> <div class="container"> <h2>Dynamic Tabs</h2> <ul class="nav nav-tabs" id="tabs"> <li class="active"> <a data-toggle="tab" href="#homepage">Terms & Condition</a> </li> <li><a data-toggle="tab" href="#home">Info</a></li> <li><a data-toggle="tab" href="#info">Form</a></li> <li><a data-toggle="tab" href="#form">Menu 3</a></li> </ul> <div class="tab-content"> <div id="homepage" class="tab-pane fade in active"> <h3>Terms and Conditions</h3> <span style="font-size: 80%"><i>Please read the terms and condition first</i></span > <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <p> <input type="checkbox" id="reg" /> Please tick this if u have read and understand everything </p> </div> <div id="home" class="tab-pane fade"> <h3>Menu 1</h3> <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div id="info" class="tab-pane fade"> <h3>Menu 2</h3> <div class="form-row"> <div class="col-md-12"> <input type="text" class="form-control" placeholder="City" /> </div> <div class="col-md-6"> <input type="text" class="form-control" placeholder="State" /> </div> <div class="col-md-6"> <input type="text" class="form-control" placeholder="Zip" /> </div> </div> </div> <div id="form" class="tab-pane fade"> <h3>Menu 3</h3> <p> Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p> <br /> </div> </div> </div> <hr /> <div> <p> <button type="button" id="downloadPdf" class="btn btn-warning" data-toggle="tooltip" data-placement="top" title="Download" > Download </button> </p> </div>