Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde à todos.
Pessoal, estou com o seguinte problema: preciso imprimir uma ficha mensal de trabalho, mas quando vou imprimir, a página para impressão sai "cortada".
A imagem acima representa a ficha que preciso imprimir, está tudo ok com essa (tirei o cabeçalho, pois não vinha ao caso)
Vejam como fica na impressão: com aproximadamente 2/3 da largura.
<style>
body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #FAFAFA; }
* { box-sizing: border-box; -moz-box-sizing: border-box; }
.page { width: 210mm; min-height: 297mm; padding: 4mm; margin: 1mm auto; border: 1px #D3D3D3 solid; border-radius: 5px; background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); }
/*.subpage { padding: 0.5cm; border: 0px red solid; height: 257mm; outline: 2cm #FFEAEA solid; }*/
.cliente { margin-top: 30px; font-size: 20px; }
th {font-size: 14px; }
td {font-size: 12px; }
.logo {height: 64px; margin: 20px 0px 0px 20px;}
.font-cabecalho {font-size: 12px; margin-left: 20px; text-align: center; margin: 20px 0px 0px 20px;}
@page { width: 100%; height: 100%; margin: 0; padding: 0; }
@media
print { html, body { width: 210mm; height: 297mm; }
.page { margin: 0; border: initial; border-radius: initial; width: initial; min-height: initial; box-shadow: initial; background: initial; page-break-after: always; }
}
</style>
Código CSS da página.
O que pode ser? Como faço pra deixar a página de impressão igual à página PHP? Obrigado desde já à todos.
Um abraço.Primeiramente muito obrigado pela atenção amigo, mas acho que você - com todo respeito - não entendeu meu problema: não tem nada a ver com bordas, inclusive eu nem escrevi borda no post rsrs.
Meu problema é que na tela de impressão, a tabela com meus dados fica com ~ 2/3 da área de impressão, como mostra as fotos que eu carreguei pra ilustrar.
Bom amigo, eu citei a borda pq com o css que forneceu, não fica igual ao que seria a estrutura da pagina contendo bordas, como na sua pergunta você não especificou se esta usando um css separa para mediaquery de print, eu pressuponho que esse css está sendo usado em comum tanto pela pagina quando com o que é esperado da impressão. Então ajudaria que colocasse uma estrutura básica com a estrutura inicial antes do que é esperado da impressão.
Obs: Ao usar o seu css com uma estrutura de html feita por mim sua tabela fica conforme está sendo imprimido
https://jsbin.com/hafecayiwi/edit?html,css,output
O código inteiro da página é esse:
O código da página inteira é esse:
<?php
include'inc/verificaSessao.php';
include'inc/conn.php';
$sql = "select * from banco.atend a
join banco.cliente c on c.id = a.id_cliente
where c.id = ".$_POST['cliente']."
and a.data >= '".$_POST['data_inicial']."' and a.data <= '".$_POST['data_final']."'
order by c.id";
//echo $sql;
$query = mysqli_query($conn, $sql);
$result = mysqli_affected_rows($conn);
$row = @mysqli_fetch_array($query);
?><html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ficha</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" defer></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins" rel="stylesheet">
<link href="css/ficha.css" rel="stylesheet">
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script>
<style>
body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #FAFAFA; }
* { box-sizing: border-box; -moz-box-sizing: border-box; }
.page { width: 210mm; min-height: 297mm; padding: 4mm; margin: 1mm auto; border: 1px #D3D3D3 solid; border-radius: 5px; background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); }
/*.subpage { padding: 0.5cm; border: 0px red solid; height: 257mm; outline: 2cm #FFEAEA solid; }*/
.cliente { margin-top: 30px; font-size: 20px; }
th {font-size: 14px; }
td {font-size: 12px; }
.logo {height: 64px; margin: 20px 0px 0px 20px;}
.font-cabecalho {font-size: 12px; margin-left: 20px; text-align: center; margin: 20px 0px 0px 20px;}
@page { size: A4; margin: 0; }
@media
print { html, body { width: 210mm; height: 297mm; }
.page { margin: 0; border: initial; border-radius: initial; width: initial; min-height: initial; box-shadow: initial; background: initial; page-break-after: always; }
}
</style>
</head>
<body>
<div class="container page">
<div class="row">
<div class="">
<?php
$mesPre = new DateTime(trim($row['data']));
$mes = $mesPre->format('M');
$anoPre = new DateTime(trim($row['data']));
$ano = $anoPre->format('Y');
if ($mes == 'Jan') { $mes = 'Janeiro'; }
if ($mes == 'Feb') { $mes = 'Fevereiro'; }
if ($mes == 'Mar') { $mes = 'Março'; }
if ($mes == 'Apr') { $mes = 'Abril'; }
if ($mes == 'May') { $mes = 'Maio'; }
if ($mes == 'Jun') { $mes = 'Junho'; }
if ($mes == 'Jul') { $mes = 'Julho'; }
if ($mes == 'Aug') { $mes = 'Agosto'; }
if ($mes == 'Sep') { $mes = 'Setembro'; }
if ($mes == 'Oct') { $mes = 'Outubro'; }
if ($mes == 'Nov') { $mes = 'Novembro'; }
if ($mes == 'Dec') { $mes = 'Dezembro'; }
?>
<table>
<tr>
<td><img src="../image/logo.png" class="logo" alt="logo"></td>
<td style="width:100%">
<span class="font-cabecalho">
<p><b>DCG-Info</b><br>
00.000.000/0001-00<br>
Rua João da Silva, 123 - Jardim Bonito - Santos - SP<br>
E-mail: email@hotmail.com - Fone: (19)99876-5432</p>
</span>
</td>
</tr>
</table>
<hr>
<div style="text-align: center;">
<p class="cliente"><?= trim($row['nome']) ?> - <?= $mes ?>/<?= $ano ?></p>
</div>
<hr>
<?php if($result > 0): ?>
<table class="table">
<thead>
<tr>
<th scope="col">Data</th>
<th scope="col">Tipo Atendimento</th>
<th scope="col">Hora inicial</th>
<th scope="col">Hora fim</th>
<th scope="col">Total</th>
<th scope="col">AM</th>
<th scope="col">Observação</th>
</tr>
</thead>
<tbody>
<?php
$query2 = mysqli_query($conn, $sql);
?>
<?php while ($array = @mysqli_fetch_array($query2)): ?>
<?php
$dataPre = new DateTime(trim($array['data']));
$horaIniPre = new DateTime(trim($array['hora_inicio']));
$horaFimPre = new DateTime(trim($array['hora_fim']));
$totalPre = new DateTime(trim($array['total']));
$data_atendimento = $dataPre->format('d/m/Y');
$data_inicio = $horaIniPre->format('H:i');
$data_fim = $horaFimPre->format('H:i');
$total = $totalPre->format('H:i');
?>
<tr>
<td><?= $data_atendimento ?></td>
<td><?= trim($array['tipo_atendimento']) ?></td>
<td><?= $data_inicio ?></td>
<td><?= $data_fim ?></td>
<td><?= $total ?></td>
<?php if(trim($array['atendimento_minimo']) == 0): ?>
<td>Não</td>
<?php else: ?>
<td>Sim</td>
<?php endif ?>
<td><?= trim($array['observacao']) ?></td>
</tr>
<?php endwhile ?>
</tbody>
</table>
<?php else: ?>
<p>Não há resultado</p>
<?php endif ?>
</div>
</div>
</div>
</body>
</html>no seu CSS você vai ter que adicionar uma regra para a classe container, o motivo é que bootstrap aplica regras de @media query para essa classe e você precisa subscreve-la para que os media queries não hajam:
linha a ser adicionada
.container.page {min-width: 100%}
style com linha adicionada:
<style>
body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #FAFAFA; }
* { box-sizing: border-box; -moz-box-sizing: border-box; }
.page { width: 210mm; min-height: 297mm; padding: 4mm; margin: 1mm auto; border: 1px #D3D3D3 solid; border-radius: 5px; background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); }
/*.subpage { padding: 0.5cm; border: 0px red solid; height: 257mm; outline: 2cm #FFEAEA solid; }*/
.cliente { margin-top: 30px; font-size: 20px; }
th {font-size: 14px; }
td {font-size: 12px; }
.logo {height: 64px; margin: 20px 0px 0px 20px;}
.font-cabecalho {font-size: 12px; margin-left: 20px; text-align: center; margin: 20px 0px 0px 20px;}
@page { width: 100%; height: 100%; margin: 0; padding: 0; }
@media
print { html, body { width: 210mm; height: 297mm; }
.container.page {min-width: 100%}
.page { margin: 0; border: initial; border-radius: initial; width: initial; min-height: initial; box-shadow: initial;
background: initial; page-break-after: always; }
}
</style>
codigo refatorado removendo PHP usado no test:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ficha</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" defer></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins" rel="stylesheet">
<link href="css/ficha.css" rel="stylesheet">
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script>
<style>
body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #FAFAFA; }
* { box-sizing: border-box; -moz-box-sizing: border-box; }
.page { width: 210mm; min-height: 297mm; padding: 4mm; margin: 1mm auto; border: 1px #D3D3D3 solid; border-radius: 5px; background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); }
/*.subpage { padding: 0.5cm; border: 0px red solid; height: 257mm; outline: 2cm #FFEAEA solid; }*/
.cliente { margin-top: 30px; font-size: 20px; }
th {font-size: 14px; }
td {font-size: 12px; }
.logo {height: 64px; margin: 20px 0px 0px 20px;}
.font-cabecalho {font-size: 12px; margin-left: 20px; text-align: center; margin: 20px 0px 0px 20px;}
@page { width: 100%; height: 100%; margin: 0; padding: 0; }
@media
print { html, body { width: 210mm; height: 297mm; }
.container.page {min-width: 100%}
.page { margin: 0; border: initial; border-radius: initial; width: initial; min-height: initial; box-shadow: initial;
background: initial; page-break-after: always; }
}
</style>
</head>
<body>
<div class="container page">
<div class="row">
<div class="">
<table>
<tr>
<td><img src="../image/logo.png" class="logo" alt="logo"></td>
<td style="width:100%">
<span class="font-cabecalho">
<p><b>DCG-Info</b><br>
00.000.000/0001-00<br>
Rua João da Silva, 123 - Jardim Bonito - Santos - SP<br>
E-mail: email@hotmail.com - Fone: (19)99876-5432</p>
</span>
</td>
</tr>
</table>
<hr>
<div style="text-align: center;">
<p class="cliente">Fevereiro/2024</p>
</div>
<hr>
<table class="table">
<thead>
<tr>
<th scope="col">Data</th>
<th scope="col">Tipo Atendimento</th>
<th scope="col">Hora inicial</th>
<th scope="col">Hora fim</th>
<th scope="col">Total</th>
<th scope="col">AM</th>
<th scope="col">Observação</th>
</tr>
</thead>
<tbody>
<tr>
<td>21/02/2024</td>
<td>Presencial</td>
<td>10:00</td>
<td>11:00</td>
<td>00:30</td>
<td>Não</td>
<td>Observação</td>
</tr>
<!-- Segunda linha de dados -->
<tr>
<td>21/02/2024</td>
<td>Presencial</td>
<td>10:00</td>
<td>11:00</td>
<td>00:30</td>
<td>Não</td>
<td>Observação</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Fica difícil compreender seu problema apenas com o CSS, não tendo nem mesmo a estrutura básica do html, pq com esse css as tables ficam sem bordas mesmo, então se você está colocando a bordar com as properties da table acredito que seja melhor fazer essa mudança para o css.