Javascript Botão de impressão para imprimir a pena a tabela usando javascript

iSilvaMarcelo · 22 de novembro de 2019

Estou usando esse código(

<script>
  window.onload = function() {
    var imprimir = document.querySelector("#imprimir");

        imprimir.onclick = function() {
          imprimir.style.display = 'none';
          window.print();
                
          var time = window.setTimeout(function() {
            imprimir.style.display = 'block';
          }, 1000);
        }
  }
</script>

) para impressão da tabela que estou puxando no banco de dados. Porém ele está imprimindo a tabela junto com a página.

Usei esses esse diferente (

<script>
document.getElementById('btn').onclick = function() {
   var conteudo = document.getElementById('sua_div').innerHTML,
   tela_impressao = window.open('about:blank');
   

   tela_impressao.document.write(conteudo);
   tela_impressao.window.print();
   tela_impressao.window.close();
};
</script>

) Deu certo, mais tirou todo o css da tabela, fora que ficou a tabela muito longo para uma pagina.

Tem como eu alterar a fonte de impressão e colocar o css que implementei junto?

DiF · 22 de novembro de 2019

@iSilvaMarcelo Note que você tá gerando uma janela nova e inserindo o conteúdo nesta janela. Ele não pega o CSS. Se quiser usar o CSS vai ter que criar os elementos inline diretamente na sua tabela.

Exemplo:

<table style="border: 1px solid #f00; border-collapse: collapse;">
    ...
</table>

Desta forma a variável "conteudo" vai ter a tabela e o css.

iSilvaMarcelo · 22 de novembro de 2019

@DiF @DiF
Fiz como vocÊ sugeriu porém não está executando dentro da tabela. Ele modifica a fonte também!

Minha tabela está dentro das tags PHP.

 <?php
                            setlocale(LC_TIME, 'pt_BR', 'pt_BR.utf-8', 'pt_BR.utf-8', 'portuguese');
                            $servidor = "localhost";
                            $usuario = "root";
                            $senha = "";
                            $dbname = "contonline_usuario";
//Criar a conexão
                            $conn = mysqli_connect($servidor, $usuario, $senha, $dbname);
                            if (!$conn) {
                                die("Falha na conexao: " . mysqli_connect_error());
                            } else {
                                //echo "Conexao realizada com sucesso";
                            }
//O mes pesquisado está fixo, o mesmo pode ser obtido do formulario.
                            $mes_pesq = $_POST["data"];
                            $result_usuario = ("select func.id, func.nome, func.horario, funcao.cargo , func.funcaoadd from func join funcao on funcao.id_funcao = func.funcaoadd  WHERE  funcaoadd = '$_POST[id]' ");
                            $resultado_usuario = mysqli_query($conn, $result_usuario);
                            $row_usuario = mysqli_fetch_assoc($resultado_usuario);
                         

                            echo " <h1 style='text-align: center' >Folha de Escala " . " " . $row_usuario['cargo'] . "</h1>";
                            $mes = date('m', strtotime($mes_pesq));
                            $mes_extenso = array(
                                '01' => 'JANEIRO',
                                '02' => 'FEVEREIRO',
                                '03' => 'MARCO',
                                '04' => 'ABRIL',
                                '05' => 'MAIO',
                                '06' => 'JUNHO',
                                '07' => 'JULHO',
                                '08' => 'AGOSTO',
                                '11' => 'NOVEMBRO',
                                '09' => 'SETEMBRO',
                                '10' => 'OUTUBRO',
                                '12' => 'DEZEMBRO'
                            );
                            echo "Mês: " . $mes_extenso[$mes] . " ";
                            $ano = date('Y', strtotime($mes_pesq));
                            echo "  " . $ano . "<br>";
                            $qnt_dias_mes = cal_days_in_month(CAL_GREGORIAN, $mes, $ano);


                            echo " <table class='table table-bordered'> ";
                            echo " <thead> ";
                            echo " <tr> ";
                            echo " <th scope='col' >RC SILVA LTDA</th>";
                            //Imprimir os dia 

                            for ($cont_dias = 1; $cont_dias <= $qnt_dias_mes; $cont_dias++) {

                                echo " <th scope='col'>  $cont_dias </th>";
                            }

                            echo " </tr> ";


                            echo " <tr> ";
                            echo " <th scope='col'>FUNCIONÁRIOS</th>";
                            for ($cont_dias = 1; $cont_dias <= $qnt_dias_mes; $cont_dias++) {
                                $dia_semana = utf8_encode(strftime("%A", strtotime($ano . '-' . $mes . '-' . $cont_dias)));
                                $semana_extenso = array(
                                    'domingo' => 'Dom',
                                    'segunda-feira' => 'Seg',
                                    'terça-feira' => 'Ter',
                                    'quarta-feira' => 'Qua',
                                    'quinta-feira' => 'Qui',
                                    'sexta-feira' => 'Sex',
                                    'sábado' => 'Sáb',
                                );

                                echo " <th scope='col'> $semana_extenso[$dia_semana] </th>";
                            }
                            echo " </tr> ";

                            echo " </thead> ";
                              ?>

Esse é apenas o pedaço para ter noção de como está minha tabela.

DiF · 22 de novembro de 2019

@iSilvaMarcelo Então, você vai ter que colocar todos os estilos do css na tabela direto via "style" como eu mostrei no meu exemplo.

Mesmo que a tabela esteja dentro do php, vai ter que fazer isso... Veja esta linha:

echo " <table class='table table-bordered'> ";

vai ter que pegar as regras da classe table e da classe table-bordererd e aplicar via style .. que é um css inline.

Vamos supor que as classes sejam assim:

.table{
   font-family: arial; 
}

.table-bordered{
   border: 1px solid #F00;
   border-collapse: collapse;
}

Vai ter que trocar para:

echo " <table style='font-family: arial; border: 1px solid #F00; border-collapse: collapse;' > ";

Viu a diferença? ao invés de aplicar o nome da classe, tem que aplicar a própria regra no elemento.

Só assim vai passar os estilos para uma nova janela.

Vai ser trabalhoso, pois a sua tabela é gigante....mas dá para fazer.

iSilvaMarcelo · 22 de novembro de 2019

Obrigado! Realmente fica muito trabalhoso. Porém eu fiz diferente e deu certo!

coloquei meu CSS dentro do document.wirite.

 <script>
            document.getElementById('btn').onclick = function () {
                var conteudo = document.getElementById('sua_div').innerHTML,
                        tela_impressao = window.open('about:blank');

                tela_impressao.document.write(conteudo);
                tela_impressao.document.write('<style>  #funcionario{ border-collapse: collapse; background-color: #337ab7 !important; font-size: 20px;color: white;  }\n\
         table th {border-collapse: collapse; background-color: #337ab7 !important; font-size: 25px;  color: white; }\n\
    table td { border-collapse: collapse; font-size: 15px; color: black; }\n\
     table>tbody>tr {  font-size: 30px; vertical-align: middle !important; }\n\
  .btn-group, .btn-group-vertical {  position: absolute !important;    }</style> ');
                tela_impressao.window.print();
                tela_impressao.window.close();
            };
        </script>

DiF · 22 de novembro de 2019

@iSilvaMarcelo Sim, dá para fazer assim também. mas por exemplo se fosse muito extenso não seria ideal.. mas sim incorporar direto no elemento como falei anteriormente.