Print without losing css

Asked

Viewed 1,488 times

1

I have the following page below which is to print out some OS reports, this exactly the way I need, only when I print this losing the css formatting, how do I print without losing the css layout 

<?php //CONEXAO    header('Content-Type: text/html; charset=utf-8'); $HOST      ="192.168.0.29";   $USER   = "root";   $PASS    = "";  $DB     = "ocomon_rc6"; 

$CONN = mysql_connect($HOST,
                      $USER,
                      $PASS) or die ("O servidor não responde!");       $CONNECT = mysql_select_db($DB,$CONN) or die ("Não foi possivel conectar-se ao banco de dados!");

  mysql_query("SET NAMES 'utf8'");   mysql_query('SET character_set_connection=utf8');   mysql_query('SET character_set_client=utf8');   mysql_query('SET character_set_results=utf8');  //FINAL DA CONEXAO


?> <!DOCTYPE html> <html> <head>    <title></title> <link href=bootstrap/css/bootstrap.min.css rel=stylesheet> </head> <body> <nav class="navbar navbar-default">   <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="index.php">
      VOLTAR
      </a>
    </div>   </div> </nav> <div class="container"> <?php  $VarStatus = $_POST['status'];  $VarSetor  = $_POST['setor'];

$QueryCons = mysql_query(" SELECT 
    o.numero AS CHAMADO,
    p.problema AS PROBLEMA,
    o.descricao AS DESCRICAO,
    o.contato AS CONTATO,
    o.telefone AS TELEFONE,
    o.data_abertura AS DATA_DE_ABERTURA,
    TIMESTAMPDIFF (HOUR, str_to_date(data_abertura,'%Y-%m-%d'), CURDATE()) as HORAS_EM_ABERTO,
    i.inst_nome AS UNIDADE,
    a.sistema AS AREA,
    l.local AS SETOR,
    u.nome AS TECNICO,
    ua.nome AS ABERTO_POR,
    s.status AS STATUS
    /*sls.slas_tempo AS TEMPO_DE_SOLUCAO*/      FROM
            ocorrencias AS o
                LEFT JOIN
            sistemas AS a ON a.sis_id = o.sistema
                LEFT JOIN
            localizacao AS l ON l.loc_id = o.local
                LEFT JOIN
            instituicao AS i ON i.inst_cod = o.instituicao
                LEFT JOIN
            usuarios AS u ON u.user_id = o.operador
                LEFT JOIN
            usuarios AS ua ON ua.user_id = o.aberto_por
                LEFT JOIN
            `status` AS s ON s.stat_id = o.status
                LEFT JOIN
            status_categ AS stc ON stc.stc_cod = s.stat_cat
                LEFT JOIN
            problemas AS p ON p.prob_id = o.problema
                LEFT JOIN
            sla_solucao AS sls ON sls.slas_cod = p.prob_sla
                LEFT JOIN
            prioridades AS pr ON pr.prior_cod = l.loc_prior
                LEFT JOIN
            sla_solucao AS slr ON slr.slas_cod = pr.prior_sla
                LEFT JOIN
            script_solution AS sol ON sol.script_cod = o.oco_script_sol
                LEFT JOIN
            prior_atend AS prioridade_atendimento ON prioridade_atendimento.pr_cod = o.oco_prior
                WHERE
                     a.sistema    = '$VarSetor'
                     AND o.status = '$VarStatus'")
                        or die(mysql_error());                          
                            if(empty($QueryCons)) 
                                {   
                                    echo "Nenhum registro encontrado."; 
                                    }

     while ($row = mysql_fetch_array($QueryCons)) { echo" <div class='panel panel-default'>  <div class='panel-body'>

<div class='row'>    <div class='col-md-3'>     <p>NUMERO:  <p>DATA:    <p>ATENDIMENTO:     <p>NOME LOJA:   <p>CONTATO:     <p>RAMAL:   <p>USUARIO:   </div>

  <div class='col-md-3'>    <p> ".$row['CHAMADO']."     <p> ".$row['DATA_DE_ABERTURA']."    <p> ".$row['AREA']."    <p> ".$row['UNIDADE']."     <p> ".$row['CONTATO']."     <p> ".$row['TELEFONE']."    <p> ".$row['ABERTO_POR']."    </div>

  <div class='col-md-6'>    <p>PROBLEMA: ".$row['PROBLEMA']."   <p>DESCRIÇÃO:   <p><h3>".$row['DESCRICAO']."</h3>  </div>

</div>

<hr style='width: 100%; color: black; height: 1px; background-color:black;'/>

<div class='row'>

 <div class='col-md-6'>     <p>ASSINATURA:____________________  </div

 <div class='col-md-6'>     <p>OBSERVAÇÃO:_________________________________________________________ </div>

</div>


<div class='row'>  <center>  <div class='col-md-4'>     <p>NOME USUÁRIO:____________________  </div>

 <div class='col-md-4'>     <p>ATENDIMENTO EM:______/______/________  </div>  <div class='col-md-4'>    <p>TÉCNICO:____________________  </div>  </center> </div>





 </div>    ";   } ?>

<script src=jquery/jquery-3.1.1.min.js></script> <script src=bootstrap/js/bootstrap.min.js></script> </body> </html>

How it is with CSS:

inserir a descrição da imagem aqui

When I printed:

inserir a descrição da imagem aqui

css html5 twitter-bootstrap

  • Try to use like this <link href="bootstrap/css/bootstrap.min.css" media="print" rel="stylesheet">

  • It didn’t work, I put in question the images of how to get you.

  • Try to change col-md-* for col-xs-*, example: Swap col-md-3 for col-xs-3

  • 1

    Perfect, worked out thanks

2 answers

2


In this case you need to use the classes col-xs-* instead of col-md-* due to resolution at the time of printing, as col-md-* works for resolution ( 992px).

Change

<div class="col-md-6">...</div>

For

<div class="col-xs-6">...</div>

Learn more

0

You must have set styles for printing, where the page layout is removed.

Check your CSS if you have anything related to print.

<link href=bootstrap/css/bootstrap.min.css rel=stylesheet>

Extra tip: Use double quotes to insert attributes.

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

If you have, you can add or remove properties, as below.

@media print {
    /* Seus estilos para impressão aqui */
}

Browser other questions tagged css html5 twitter-bootstrap

You are not signed in. Login or sign up in order to post.