Блог

Главная - Вопросы по программированию - Печать скрытой таблицы с помощью JavaScript

Печать скрытой таблицы с помощью JavaScript

#javascript #php #html #css #printing

#javascript #php #HTML #css #печать

Вопрос:

У меня есть страница с одной таблицей, которая разбита на страницы и содержит только 10 записей на странице, и мне нужно распечатать на бумаге всю таблицу сразу, поэтому я создал одну скрытую таблицу без разбивки на страницы и со всеми записями, и я пытаюсь распечатать ее с помощью 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')
}

Комментарии:

1. Можете ли вы попробовать поместить css в тег стиля внутри таблицы? Я думаю, что это не работает, потому что print.js копирует элемент и помещает его в скрытый iframe.

2. Я могу попробовать. На самом деле я решил это, выполнив изменение отображения с помощью jQuery. Но я не понимаю, как я мог бы поместить медиа-запрос во встроенный стиль

Ответ №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');
}