Jump to content

POWERED BY:

ment0r

Configuração de página para impressão

Recommended Posts

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

 

image.png.bb0f7a6ad940fd875b8541208a0e8a50.png

 

A imagem acima representa a ficha que preciso imprimir, está tudo ok com essa (tirei o cabeçalho, pois não vinha ao caso)

 

image.png.209446c648097f00272785f260e41720.png

 

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.

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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);
?>
<!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 { 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>

 

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By ment0r
      Boa tarde pessoal, tudo bem?

      É possível remover o cabeçalho e rodapé da impressão de uma página html via php, css ou javascript? Já adianto que não gostaria de gerar pdf, mas sim saber se é possível remover ou não.
      Obrigado a todos.
       

    • By danicarla
      Olá pessoas,

      Estou tentando fazer uma versão de impressão usando CSS eu queria colocar um cabeçalho e um rodapé em todas as paginas,  O problema é que o conteúdo vem do banco de dados,  e dependendo do tamanho dos parágrafos em algumas vezes o texto acaba ficando em cima do cabeçalho ou do rodapé.. alguém tem alguma idéia de como posso fazer isso?
       
      Meu cód está assim:
       
      header {font-family:Arial;font-size: 22px;color: #000;text-align: center;} footer {font-family:Arial;font-size: 10px; color: #CD090C;text-align: center;} article {font-family:Arial;font-size: 14px; color: #000;text-align: justify;} @page {size: A4;margin: 11mm 17mm 17mm 17mm;} @media print { header {position: fixed;top: 0;} footer {position: fixed;bottom: 0;} article {position: relative;top:40px;} .content-block, p {top:40px;page-break-inside: avoid;} html, body {width: 210mm;height: 297mm;} } E no HTML
       
      <header>CABEÇALHO</header> <article>Conteudo.. texto.. etc..</article> <footer>Texto do Rodapé</footer>  
    • By betogames
      Olá amigos, estou querendo saber, como colocar um numero limite para que a paginação funcione, exemplo: Quero que a pagina exiba no maximo 40 fotos e depois disso comece a paginação dos novos 40 fotos. Pagina 1= 1 a 40 fotos; pagina 2= 41 a 80 fotos............

      Vou enviar o codigo que fiz e se possivel alguém acerte pra mim, preciso muito disso:
       
    • By Alvaro_php
      Pessoal boa noite
      Estou começando no PHP e estou com uma dúvida para poder enviar uma confirmação de uma página para outra e não quero mandar pela URL, para não ficar visível ao usuário
      Tenho um captcha e nele estou fazendo uma comparação para poder jogar para uma outra página , caso o código esteja certo
      <?php session_start();
          if( $_SESSION['captcha'] == $_POST['captcha']){
          header("location: emitir_titulo1.php");
          }else{
              echo "<h1>Erro - Código digitado errado</h1>";
          }
      ?>
      Até ai tudo bem esta fazendo certinho, o que eu quero é que na minha emitir_titulo1.php eu consiga fazer uma identificação qqer, onde demonstre que o usuário passou pelo captcha e não jogou o caminho completo até a página emitir_titulo1
      Tentei abri a session no emitir_titulo1 porém não deu certo, pois ela vem em branco, e quando coloco o caminho inteiro da página ele abre normalmente
      Tentei usar o $_POST, más não tem como ou não sei enviar mesmo, pois estou chamando a página pelo header
       
       
      Então mudei e tentei criar um arquivo txt com a palavra confirmado
      <?php session_start();
          if( $_SESSION['captcha'] == $_POST['captcha']){
              $fp = fopen("seguranca.txt","a+");
              $escreve = fwrite($ft,"confirmado");
              fclose($ft);
              header ("location: emitir_titulo1.php");
          }else{
              echo "<h1>Erro - Código digitado errado</h1>";
          }
      ?>
       
      e na página emitir_titulo1.php coloquei
      <?php  
          $arquivo = "seguranca.txt";
          $ft=fopen($arquivo,"r");
          $conteudo=fread($ft,filesize($arquivo));
          fclose($ft);
          
          if ($conteudo == 'confirmado')
          {
              unlink("seguranca.txt");
          }else{
              header("location: verificacao.php");
          }
      ?>
       
      Quando a página para executar e digito o código de verificação do captcha, aparece a mensagem abaixo
      Warning: fwrite(): supplied argument is not a valid stream resource in caminhodomeuservidor\valida.php on line 5
      Warning: fclose(): supplied argument is not a valid stream resource in caminhodomeuservidor\valida.php on line 6
      Warning: Cannot modify header information - headers already sent by (output started at caminhodomeuservidor\valida.php:5) in caminhodomeuservidor\valida.php on line 7
       
      Más quando coloco o caminho completo da minha página emitir_titulo1.php, ele continua abrindo a página normalmente, e o arquivo gerado esta em branco
       
      Alguém pode me dar uma ajuda, estou o dia todo nisso, o bom é que pesquisei bastante coisa, porém não tenho muito tempo para finalizar
       
      Desde já agradeço a todos
    • By Ana Gauna
      Eu já tentei diversas vezes, mas ainda não consegui fazer funcionar.  Inclusive já alterei o arquivo .htaccess mas isso não funcionou.  Estou tentando criar um bloqueio em página de site online, para bloquear o download de imagens, bloquear o download de fotografias.  Estou tentando também criar o bloqueio de impressão da tela de um site, para fazer o control p parar de funcionar em determinada página do site.    Vi na internet sites que tem isso funcionando direito.  Eu ainda não consegui criar.  Alguém sabe como fazer?   Eu sei um pouco de PHP, este mês comprei 3 livros novos de PHP que estou estudando para tentar me ajudar nas minhas dúvidas...
      Boa noite
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.