使用 JavaScript 打印隐藏的 table

Question

我有一个页面 table，已分页，每页仅显示 10 个条目，我需要一次将整个 table 打印到纸上，所以我做了一个隐藏的 table，没有分页和所有条目，我试图用 Print.js 打印它，但打印预览总是显示空白页。我已经试过了 @media print 但它根本不起作用。

CSS:

.printable {
    display: none;
}

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

PHP 页数：

    <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>

打印脚本：

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

Answer 1

我可以通过 jQuery 完全完成显示处理并完全忘记 CSS.

来解决问题

PHP 现在是：

<div id="relatPrint" class="printable" style="display: none">
        <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>

和脚本：

function printRelat(){
    $('.printable').css('display', 'block');
    printJS('relatPrint', 'html');
    $('.printable').css('display', 'none');
}