Ir ao conteúdo
  • Cadastre-se
iSilvaMarcelo

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

Posts recomendados

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?

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

@DiF 01.thumb.PNG.3763aaaa834905d9497d5af71d8c94bb.PNG02.PNG.23c3efa43b08710cca37dd57e7cbf284.PNG@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.

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

  • Obrigado 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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. :thumbsup:

 

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...