How do I make the form static at print time (without changing the size)?

Asked

Viewed 54 times

0

When I send a form to print it changes the size according to the size of the page, in my case it is a card 54mm wide and 84mm high, I put these measurements in my code. It creates the page, I can isolate the cards, problem that it auto-resizes to the size of the sheet, then it happens that when I pick up the A4 printer it gets a size, when I put in the card it gets really small... I’m using media print to do what I need.

inserir a descrição da imagem aqui

<!DOCTYPE html>
<html>
<head>
    <title>Consulta Código - Resposta</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <style type="text/css">
  @media print
{
    * {-webkit-print-color-adjust:exact;}
}
 @media print {
  body * {
    visibility: hidden;
  }
  #printable, #printable * {
    visibility: visible;


  }


} 
    </style>

</head>
<body>

<div class="container" style="margin-top: 120px;margin-left: 120px">

<form id="printable" style="width: 5.4cm;height: 8.4cm;background-image: url(imagens/teste.png); background-size: 5.4cm 8.4cm">




                <div class="form-group" style="padding-top: 4.3cm;">


                        <!-- <img src="data:image/jpeg;base64,<br />
<b>Notice</b>:  Undefined variable: imagem in <b>C:\xampp\htdocs\cracha\consulta.php</b> on line <b>169</b><br />
" width="145" height="179" style="border-radius: 7px"/><br> -->
                        <center><p style='font-size: 20px'><b>FALABRETTI      </b></p></center>
                        <center><p style='font-size: 11px;margin-top: -20px;padding-left: 5px'><b>DIRCE LOURDES FALABRETTI                                                        </b></p></center>
           <!-- <div align="center" >  
<img src=p.gif width=3 height=46 border=0><img 
src=b.gif width=3 height=46 border=0><img
src=p.gif width=3 height=46 border=0><img
src=b.gif width=3 height=46 border=0><img 
src=p.gif width=3 height=46 border=0><img 
    src=b.gif width=3 height=46 border=0><img src=p.gif width=5 height=46 border=0><img 
    src=b.gif width=3 height=46 border=0><img src=p.gif width=3 height=46 border=0><img 
    src=b.gif width=5 height=46 border=0><img src=p.gif width=5 height=46 border=0><img 
    src=b.gif width=5 height=46 border=0><img src=p.gif width=3 height=46 border=0><img 
    src=b.gif width=3 height=46 border=0><img src=p.gif width=3 height=46 border=0><img 
    src=b.gif width=5 height=46 border=0><img src=p.gif width=5 height=46 border=0><img 
    src=b.gif width=3 height=46 border=0><img src=p.gif width=3 height=46 border=0><img 
    src=b.gif width=5 height=46 border=0><img src=p.gif width=3 height=46 border=0><img 
    src=b.gif width=3 height=46 border=0><img src=p.gif width=5 height=46 border=0><img 
    src=b.gif width=3 height=46 border=0><img src=p.gif width=3 height=46 border=0><img 
    src=b.gif width=3 height=46 border=0><img src=p.gif width=5 height=46 border=0><img 
    src=b.gif width=3 height=46 border=0><img src=p.gif width=5 height=46 border=0><img 
    src=b.gif width=3 height=46 border=0><img src=p.gif width=3 height=46 border=0><img 
    src=b.gif width=5 height=46 border=0><img src=p.gif width=3 height=46 border=0><img 
    src=b.gif width=5 height=46 border=0><img src=p.gif width=5 height=46 border=0><img src=b.gif width=3 height=46 border=0><img 
src=p.gif width=1 height=46 border=0> </div> -->


                </div>









</form>
</div>
<div class="container" style="margin-top: 50px; margin-left: 120px">
<form  style="width: 5.7cm;height: 9cm;background-image: url(imagens/teste2.png); background-size: 5.7cm 9cm; ">




                <div class="form-group" style="padding-top: 7.2cm">


                        <!-- <img src="data:image/jpeg;base64,<br />
<b>Notice</b>:  Undefined variable: imagem in <b>C:\xampp\htdocs\cracha\consulta.php</b> on line <b>225</b><br />
" width="145" height="179" style="border-radius: 7px"/><br> -->
                        <!--<center><p style='font-size: 20px'><b>FALABRETTI      </b></p></center>
                        <p style='font-size: 12px;margin-top: -15px;padding-left: 37px'><b>DIRCE LOURDES FALABRETTI                                                        </b></p> -->
            <div align="center" >  
<img src=p.gif width=3 height=46 border=0><img 
src=b.gif width=3 height=46 border=0><img
src=p.gif width=3 height=46 border=0><img
src=b.gif width=3 height=46 border=0><img 
src=p.gif width=3 height=46 border=0><img 
    src=b.gif width=3 height=46 border=0><img src=p.gif width=3 height=46 border=0><img 
    src=b.gif width=5 height=46 border=0><img src=p.gif width=5 height=46 border=0><img 
    src=b.gif width=3 height=46 border=0><img src=p.gif width=5 height=46 border=0><img 
    src=b.gif width=5 height=46 border=0><img src=p.gif width=3 height=46 border=0><img 
    src=b.gif width=3 height=46 border=0><img src=p.gif width=3 height=46 border=0><img 
    src=b.gif width=3 height=46 border=0><img src=p.gif width=3 height=46 border=0><img 
    src=b.gif width=5 height=46 border=0><img src=p.gif width=5 height=46 border=0><img 
    src=b.gif width=3 height=46 border=0><img src=p.gif width=5 height=46 border=0><img 
    src=b.gif width=3 height=46 border=0><img src=p.gif width=3 height=46 border=0><img 
    src=b.gif width=5 height=46 border=0><img src=p.gif width=5 height=46 border=0><img 
    src=b.gif width=3 height=46 border=0><img src=p.gif width=3 height=46 border=0><img 
    src=b.gif width=5 height=46 border=0><img src=p.gif width=5 height=46 border=0><img 
    src=b.gif width=5 height=46 border=0><img src=p.gif width=3 height=46 border=0><img 
    src=b.gif width=3 height=46 border=0><img src=p.gif width=3 height=46 border=0><img 
    src=b.gif width=3 height=46 border=0><img src=p.gif width=3 height=46 border=0><img 
    src=b.gif width=3 height=46 border=0><img src=p.gif width=3 height=46 border=0><img 
    src=b.gif width=3 height=46 border=0><img src=p.gif width=3 height=46 border=0><img 
    src=b.gif width=3 height=46 border=0><img src=p.gif width=5 height=46 border=0><img 
    src=b.gif width=5 height=46 border=0><img src=p.gif width=5 height=46 border=0><img 
    src=b.gif width=5 height=46 border=0><img src=p.gif width=5 height=46 border=0><img src=b.gif width=3 height=46 border=0><img 
src=p.gif width=1 height=46 border=0> </div>
    <center style='margin-top: -7px'><font style='font-size: 9px;color:#000000;font-family:Tahoma;'>902567          </font></center>
                </div>









</form>

</div>



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
php html css

  • I do not know if it will solve, but change everything with measures in % to px or mm inside @media print and run a test. You don’t have to face your original file, create a separate HTML with only one element in % width and another in PX or MM, then in @media print vc inverts the % and PX MM and simulates the printing to see what happens. It’s just a tip anyway, now you can’t stop to test it here. If it works this method comments there :)

  • I tried to do what you said (if I got it right), I’ll put all my code in the question

  • Cara opens this page in the browser and edits his question with the code already rendered in the browser. Go there from a Ctrl+U and take the code and paste it here. And code like you posted makes it hard for us to do the tests etc.

  • Okay, I changed the code

  • is it possible to @hugocsl transform everything from form to image? So it saves the image in the right size and dps have the image printed, know how to do this?

  • Dude I think with some API in PHP or Python you can capture a "print" screen and maybe already open for printing. Something else. I think this size change might be because your printer’s config is to "adjust media to the printing area" or something. The problem with Print is that through the browser we cannot change the configs of the user’s printer. I don’t think I can help you much more... But take a look at this article that sometimes has something that interests you https://www.smashingmagazine.com/2018/05/print-stylesheets-in-2018/

Show 1 more comment

1 answer

0

I was able to do what I need,.

    <?php
//header('Content-type: image/png'); 

?>
<!DOCTYPE html>
<html>
<head>
    <title>Consulta Código - Resposta</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <script type="text/javascript" src="js/html2canvas.js"></script>
    <script type="text/javascript" src="js/canvas2image.js"></script>

    <style type="text/css">
  @media print
{
    * {-webkit-print-color-adjust:exact;}
}
 @media print {
  body * {
    visibility: hidden;
  }
  #printable, #printable * {
    visibility: visible;


  }


} 
    </style>

</head>
<body>
<?php


class WBarCode {
    var $_fino;
    var $_largo;
    var $_altura;
    var $BarCodes = array();
    var $texto;
    var $matrizimg;
    var $f1;
    var $f2;
    var $f;
    var $i;

    function WBarCode($Valor){
        $this->fino=3;
        $this->largo=5;
        $this->altura=46;

        if (empty($this->BarCodes[0]))
        {
            $this->BarCodes[0]="00110";
            $this->BarCodes[1]="10001";
            $this->BarCodes[2]="01001";
            $this->BarCodes[3]="11000";
            $this->BarCodes[4]="00101";
            $this->BarCodes[5]="10100";
            $this->BarCodes[6]="01100";
            $this->BarCodes[7]="00011";
            $this->BarCodes[8]="10010";
            $this->BarCodes[9]="01010";

            for ($this->f1=9; $this->f1>=0; $this->f1=$this->f1-1)
            {
                for ($this->f2=9; $this->f2>=0; $this->f2=$this->f2-1)
                {
                    $this->f=$this->f1*10+$this->f2;
                    $this->texto="";
                    for ($this->i=1; $this->i<=5; $this->i=$this->i+1)
                    {
                        $this->texto=$this->texto.substr($this->BarCodes[$this->f1],$this->i-1,1).
                            substr($this->BarCodes[$this->f2],$this->i-1,1);
                    }
                    $this->BarCodes[$this->f]=$this->texto;
                }
            }
        }

        $this->matrizimg.= "
<img src=p.gif width=$this->fino height=$this->altura border=0><img 
src=b.gif width=$this->fino height=$this->altura border=0><img
src=p.gif width=$this->fino height=$this->altura border=0><img
src=b.gif width=$this->fino height=$this->altura border=0><img 
";

        $this->texto=$Valor;
        if (strlen($this->texto)%2<>0)
        {
            $this->texto="0".$this->texto;
        }

        while(strlen($this->texto)>0)
        {
            $this->i=intval(substr($this->texto,0,2));
            $this->texto=substr($this->texto,strlen($this->texto)-(strlen($this->texto)-2));
            $this->f=$this->BarCodes[$this->i];
            for ($this->i=1; $this->i<=10; $this->i=$this->i+2)
            {
                if (substr($this->f,$this->i-1,1)=="0")
                {
                    $this->f1=$this->fino;
                }
                else
                {
                    $this->f1=$this->largo;
                }

                $this->matrizimg.="src=p.gif width=$this->f1 height=$this->altura border=0><img 
    ";
                if (substr($this->f,$this->i+1-1,1)=="0")
                {

                    $this->f2=$this->fino;
                }
                else
                {

                    $this->f2=$this->largo;
                }

                $this->matrizimg.= "src=b.gif width=$this->f2 height=$this->altura border=0><img ";
            }
        }

        $this->matrizimg.= "src=p.gif width=$this->largo height=$this->altura border=0><img src=b.gif width=$this->fino height=$this->altura border=0><img 
src=p.gif width=1 height=$this->altura border=0>";

        echo $this->matrizimg;

    }//fim da function
}//fim da Class


$codigo = $_POST['codigo'];


?>

<div class="row">
    <div class="col-sm-3">

<div class="container" style="margin-top: 120px;margin-left: 120px;">

<form id="capture" style="width: 5.4cm;height: 8.4cm;background-image: url(imagens/teste.png); background-size: 5.4cm 8.4cm">

    <?php
        include('conexao.php');

        $consulta = oci_parse($conexao, "select A.CRACHA, c.codigo, c.estab, a.codigo, c.nome, c.nomeguerra  from absis.equipe c, absis.crachas a  where c.codigo = a.cracha and  a.cracha = '$codigo'");
    oci_execute($consulta);
        while (($row = oci_fetch_assoc($consulta)) != false) {


            $nome = $row['NOME'];
            $nomeguerra = $row['NOMEGUERRA'];
          //  $imagem = $row['FOTO']->load();
           // $estab = $row['ESTAB'];

            if ( !isset( $_POST ) || empty( $_POST ) ) {
     //     $erro = 'Nada foi postado.';
                echo '<script> alert (" Codigo Inexistente !"); location.href=("index.php")</script>';
            }
             //     echo '<script> alert (" Codigos Inexistentes !"); location.href=("index.php")</script>';
              //  echo " xxx";
            else {



                ?>

                <div class="form-group" style="padding-top: 4.3cm;">


                        <!-- <img src="data:image/jpeg;base64,<?php echo base64_encode( $imagem );  ?>" width="145" height="179" style="border-radius: 7px"/><br> -->
                        <center><p style='font-size: 20px'><b><?php echo $nomeguerra ?></b></p></center>
                        <center><p style='font-size: 11px;margin-top: -20px;padding-left: 5px'><b><?php echo $nome ?></b></p></center>
        <?php
                        $string = str_replace(" ","",$codigo);



         ?>
   <!-- <div align="center" >  <?php $bar = new WBarCode("$string"); ?> </div> -->


                </div>


<?php } } ?>







</form>
  <p style="padding-left: 9px">Verificação de Dados</p>

</div>
</div>
<div class="col-sm-6">
    <div class="container" style="margin-top: 120px;margin-left: 120px;">
<div id="img-out"></div>
<p style="padding-left: 9px">Imagem para Impressão</p>
</div>
</div>
</div>


<div class="row">
<div class="col-sm-3">

<div class="container" style="margin-left: 120px">
<form id="capture2" style="width: 5.7cm;height: 9cm;background-image: url(imagens/teste2.png); background-size: 5.7cm 9cm; ">

    <?php
        include('conexao.php');

        $consulta = oci_parse($conexao, "select A.CRACHA, c.codigo, c.estab, a.codigo, c.nome, c.nomeguerra  from absis.equipe c, absis.crachas a  where c.codigo = a.cracha and  a.cracha = '$codigo'");
    oci_execute($consulta);
        while (($row = oci_fetch_assoc($consulta)) != false) {

            $codigo = $row['CODIGO'];
            $cracha = $row['CRACHA'];

          //  $imagem = $row['FOTO']->load();
           // $estab = $row['ESTAB'];

            if ( !isset( $_POST ) || empty( $_POST ) ) {
     //     $erro = 'Nada foi postado.';
                echo '<script> alert (" Codigo Inexistente !"); location.href=("index.php")</script>';
            }
             //     echo '<script> alert (" Codigos Inexistentes !"); location.href=("index.php")</script>';
              //  echo " xxx";
            else {



                ?>

                <div class="form-group" style="padding-top: 7.2cm">


                        <!-- <img src="data:image/jpeg;base64,<?php echo base64_encode( $imagem );  ?>" width="145" height="179" style="border-radius: 7px"/><br> -->
                        <!--<center><p style='font-size: 20px'><b><?php echo $nomeguerra ?></b></p></center>
                        <p style='font-size: 12px;margin-top: -15px;padding-left: 37px'><b><?php echo $nome ?></b></p> -->
        <?php
                        $string = str_replace(" ","",$codigo);



         ?>
    <div align="center" >  <?php $bar = new WBarCode("$string"); ?> </div>
    <?php

    echo "<center style='margin-top: -7px'><font style='font-size: 9px;color:#000000;font-family:Tahoma;'>$cracha</font></center>";
    ?>

                </div>


<?php } } ?>







</form>
 <p style="padding-left: 9px">Verificação de Dados</p>
</div> 

</div>
<div class="col-sm-6">
    <div class="container" style="margin-left: 120px;">
<div id="img-out2"></div>
<p style="padding-left: 9px">Imagem para Impressão</p>
</div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<script type="text/javascript">

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
    $("#img-out").append(canvas);
});

</script>
<script type="text/javascript">

html2canvas(document.querySelector("#capture2")).then(canvas => {
    document.body.appendChild(canvas)
    $("#img-out2").append(canvas);
});

</script>

</body>
</html>

Browser other questions tagged php html css

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