#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');
}