php - Printing a hidden table with JavaScript

I have a page with one table, that is paginated, showing only 10 entries per page, and I need to print to paper the entire table at once, so I've made one hidden table, without pagination and with all the entries, and I'm trying to print it with Print.js, but the printing preview always show a blank page. I've already tried@media print but it doesn't work at all.

CSS:

.printable {
    display: none;
}

@media print {
    .printable {
        display: block;
    }
}
Copy code

PHP page:

    <div id="relatPrint" class="printable">
        <div class="card">        
            <div class="card-body">
                <h5 class="card-title">RelatГіrios de Envio</h5>                
                <hr>                     
                <table class="table table-striped table-responsive w-100 d-block d-md-table">
                    <thead>
                        <tr>                        
                            <th scope="col">ID</th>
                            <th scope="col">CГіdigo de Envio</th>
                            <th scope="col">Mensagem de envio</th>
                            <th scope="col">Data de envio</th>
                        </tr>
                    </thead>
                    <tbody>                    
                        <?php foreach($envios as $envio): ?>                    
                            <tr>                                                     
                                <td><?= esc($envio->id) ?></td>
                                <td><?= esc($envio->codigo) ?></td>
                                <td><?= esc($envio->log) ?></td>
                                <td><?= esc($envio->data) ?></td>                            
                            </tr>                        
                        <?php endforeach ?>
                    </tbody>
                </table>              
            </div>
        </div>
    </div>
Copy code

And the printing script:

function printRelat(){
    printJS('relatPrint', 'html')
}
Copy code

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.