Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

willwalker

[Resolvido] Problema ao clicar em botão window.print();

Por , em Desenvolvimento frontend

Recommended Posts

willwalker    2

willwalker
Postado

Não sei porque, mas quando clico no Chrome em window.print(); ele aumenta o tamanho do height do documento. E nos outros navegadores funciona normal O.o... E não tem nada demais a página... O.o...

 

Se ajuda de alguma coisa, segue a página que estou usando para imprimir:

 

<div class="mensagens" style="border: none; color: #000; background-color: #FFF;">
<div> </div>
<div class="impressao">
<div align="center"><strong>Visualização de Processo Detalhada</strong></div>

<div style="width: 550px; display: table; margin-left: 75px; margin-top: 20px;">
<div style="font-weight: normal;"><strong>Código:</strong> <?=$rsq['codigo']?></div>
<div style="width: 275px; float: left; font-weight: normal;"><strong>Data da Abertura:</strong> <?=$data[2].'/'.$data[1].'/'.$data[0].' '.$rsq['hora']?></div>
<div style="width: 275px; float: left; font-weight: normal;"><strong>Data da Fechamento:</strong> <?=$data_f[2].'/'.$data_f[1].'/'.$data_f[0].' '.$rsq['hora_f']?></div>
<div> </div>
<div style="font-weight: normal;"><strong>Nome do Interessado:</strong> <?=$rsq['nome']?></div>
<div style="font-weight: normal;"><strong>Endereço:</strong> <?=$rsz['endereco']?>, <?=$rsz['numero']?><?php if($rsz['complemento'] != ""){ echo " - ".$rsz['complemento']; }else{ echo ""; } ?></div>
<div style="font-weight: normal;"><strong>Profissão:</strong> <?=$rsz['profissao']?></div>
<div style="font-weight: normal;"><strong>Cargo:</strong> <?=$rsz['cargo']?></div>
<div style="font-weight: normal;"><strong>Tel. Comercial:</strong> <?=$rsz['comercial']?></div>
<div style="font-weight: normal;"><strong>Tel. Celular</strong> <?=$rsz['celular']?></div>
<div style="font-weight: normal;"><strong>Tel. Fax</strong> <?=$rsz['fax']?></div>
<div style="font-weight: normal;"><strong>Tel. Residêncial:</strong> <?=$rsz['residencial']?></div>
<div style="font-weight: normal;"><strong>Data de Nascimento:</strong> <?=$ani[2]."/".$ani[1]."/".$ani[0]?></div>
<div> </div>
<div style="font-weight: normal;"><strong>Atendido Por:</strong> <?=$rsq['atendente']?></div>
<div> </div>
<div style="width: 275px; float: left; font-weight: normal;"><strong>Assessor Responsável:</strong> <?=$rsq['responsavel']?></div>
<div style="width: 275px; float: left; font-weight: normal;"><strong>Status:</strong> <?php if($rsq['status'] == 1){echo "Aberto";}else{echo "Fechado";} ?></div>
<div> </div>
<div style="font-weight: normal;"><strong>Assunto:</strong></div>
<div style="font-weight: normal;"><?=$rsq['assunto']?></div>
<div> </div>
<div style="font-weight: normal;"><strong>Tramitações Cadastradas:</strong></div>
<div> </div>
<div id="lista_tramitacao" style="display: table; width: 100%; font-weight: normal;"></div>
<div> </div>
<div style="font-weight: normal;"><strong>Palavras-Chaves:</strong></div>
<div style="font-weight: normal;"><?=$rsq['chaves']?></div>
<div> </div>
<div style="font-weight: normal;"><strong>Forma de Solicitação:</strong></div>
<div style="font-weight: normal;"><?=$rsq['forma']?></div>
</div>

<div> </div>
<div align="center"><a href="javascript: window.print();" title="Imprimir"><img src="temas/azul/impressao.png" width="38" height="39" border="0" /></a></div>
<div> </div>
</div>

Abraços Walker http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

hmmm acho que alguém tem que dar uma reciclada, hein!

 

tem <div> aí até pra pular linha!

 

estilos inline... eh, ta crítico ^^. Vamos lá:

 

1. passe TODOS os estilos para uma tag </style> dentro do </head>. Uma vez que você está utilizando classes, não há motivos pra estilos inline.

2. uma das </div> você está utilizando display: table e, após ela, não há NENHUMA </div> setada como display: table-row ou display: table-cell. Um alerta aqui: Se isso era pra ser uma tabela, que tal utilizar um </table>? ;)

3. jogue TODOS os estilos para a div ancestral maior (acredito eu que seja aquela que leva a classe mensagem)

4. aprenda pra que serve cada tag HTML

5. envolva a Vizualização de processo detalhada em um </h1>, utilize a CSS text-align: center

6. pelo que pude entender, a página não se trata de um texto, como um artigo de um blog, onde alguns trechos precisam ser lidos com mais força. troque TODOS os </strong> por </b>

7. envolva todo o conteúdo em uma única tag </p>, e utilize as quebras de linha <br/>

 

 

off1: adquira o hábito de iniciar blocos php com <?php ao invés de <?, se utilizar short_open_tags, terá problemas para declarar cabeçalhos xml (<?xml version="1.0" encoding="utf-8"?>)

off2: o plural de palavra-chave é palavras-chave

Compartilhar este post

Link para o post
Compartilhar em outros sites

willwalker    2

willwalker
Postado

hmmm acho que alguém tem que dar uma reciclada, hein!

 

tem <div> aí até pra pular linha!

 

estilos inline... eh, ta crítico ^^. Vamos lá:

 

1. passe TODOS os estilos para uma tag </style> dentro do </head>. Uma vez que você está utilizando classes, não há motivos pra estilos inline.

2. uma das </div> você está utilizando display: table e, após ela, não há NENHUMA </div> setada como display: table-row ou display: table-cell. Um alerta aqui: Se isso era pra ser uma tabela, que tal utilizar um </table>? ;)

3. jogue TODOS os estilos para a div ancestral maior (acredito eu que seja aquela que leva a classe mensagem)

4. aprenda pra que serve cada tag HTML

5. envolva a Vizualização de processo detalhada em um </h1>, utilize a CSS text-align: center

6. pelo que pude entender, a página não se trata de um texto, como um artigo de um blog, onde alguns trechos precisam ser lidos com mais força. troque TODOS os </strong> por </b>

7. envolva todo o conteúdo em uma única tag </p>, e utilize as quebras de linha <br/>

 

 

off1: adquira o hábito de iniciar blocos php com <?php ao invés de <?, se utilizar short_open_tags, terá problemas para declarar cabeçalhos xml (<?xml version="1.0" encoding="utf-8"?>)

off2: o plural de palavra-chave é palavras-chave

 

Nem notei que escrevi errado Palavras-Chave.

 

O motivo de criar tanta div é a preguiça de se criar um tr e um td para cada linha.

 

Mas o meu problema não vi solução, só vi você me dando dicas para melhorar o desenvolvimento. E farei isso, vou por em tabela, mesmo sendo chato, e estilos sempre coloco em classes css, mas como eu estou fazendo um teste eu coloco tudo inline, e depois de tudo certo, jogo em classes, understand ?

 

Mas eu quero saber o porque dele fazer isso. Sempre que clico em um link com javascript: window.print(); ele cria uma area sem nada, como se fosse um scroll infinito. O.o... Mas vou fazendo testes, talvez seja esse cógido doido que eu fiz e deve ter algo errado nele. Vou limpar, e fazer tudo de novo com tabelas. Vamos ver se funciona =D.

 

Mas enquanto eu não volto para dizer que descobri o erro. Pode pensar em alguma outra possibilidade ?

 

-------------------------------------------

 

Outra dúvida relacionada a esse sistema:

 

Quando se usa no css:

 

@media print{

.classe {

}

}

 

Se onde está declarada essa .classe, tudo que estiver "dentro dela" clicando em um link com javascript: window.print(); Ele manda para imprimir somente as informações contidas dentro desse .classe ?

 

Abraços Walker http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

willwalker    2

willwalker
Postado

Fiz as mudanças de HTML e nada, tambem tirei todo o condeudo e deixei somente o botão, e acontece a mesma coisa.

 

Segue o novo html:

 

<div class="mensagens" style="border: none; color: #000; background-color: #FFF;">
<div class="impressao">
<?php
while($rsq = mysql_fetch_array($sqq)){
$data = explode("-", $rsq['data']);
$data_f = explode("-", $rsq['data_f']);

$sqz = mysql_query("SELECT * FROM interessados WHERE nome = '".$rsq['nome']."'");
$rsz = mysql_fetch_array($sqz);
$ani = explode("-", $rsz['data']);
?>
<table width="550" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td align="center"><b>Relatório de Solicitações</b></td>
  </tr>
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td><b>Código:</b> <?=$rsq['codigo']?></td>
  </tr>
</table>
<table width="550" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td width="275"><b>Data da Abertura:</b> <?=$data[2].'/'.$data[1].'/'.$data[0].' '.$rsq['hora']?></td>
    <td width="275"><b>Data da Fechamento:</b> <?=$data_f[2].'/'.$data_f[1].'/'.$data_f[0].' '.$rsq['hora_f']?></td>
  </tr>
</table>
<table width="550" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td><b>Nome do Interessado:</b> <?=$rsq['nome']?></td>
  </tr>
  <tr>
    <td><b>Endereço:</b> <?=$rsz['endereco']?>, <?=$rsz['numero']?><?php if($rsz['complemento'] != ""){ echo " - ".$rsz['complemento']; }else{ echo ""; } ?></td>
  </tr>
  <tr>
    <td><b>Profissão:</b> <?=$rsz['profissao']?></td>
  </tr>
  <tr>
    <td><b>Cargo:</b> <?=$rsz['cargo']?></td>
  </tr>
  <tr>
    <td><b>Tel. Comercial:</b> <?=$rsz['comercial']?></td>
  </tr>
  <tr>
    <td><b>Tel. Celular</b> <?=$rsz['celular']?></td>
  </tr>
  <tr>
    <td><b>Tel. Fax</b> <?=$rsz['fax']?></td>
  </tr>
  <tr>
    <td><b>Tel. Residêncial:</b> <?=$rsz['residencial']?></td>
  </tr>
  <tr>
    <td><b>Data de Nascimento:</b> <?=$ani[2]."/".$ani[1]."/".$ani[0]?></td>
  </tr>
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td><b>Atendido Por:</b> <?=$rsq['atendente']?></td>
  </tr>
  <tr>
    <td> </td>
  </tr>
</table>
<table width="550" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td width="275"><b>Assessor Responsável:</b> <?=$rsq['responsavel']?></td>
    <td width="275"><b>Status:</b> <?php if($rsq['status'] == 1){echo "Aberto";}else{echo "Fechado";} ?></td>
  </tr>
</table>
<table width="550" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td><b>Assunto:</b></td>
  </tr>
  <tr>
    <td><?=$rsq['assunto']?></td>
  </tr>
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td><b>Tramitações Cadastradas:</b></td>
  </tr>
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td>
<div id="lista_tramitacao" style="display: table; width: 100%; font-weight: normal;">
<?php
$sql = mysql_query("SELECT * FROM tramitacao WHERE cod = '".$rsq['id']."' ORDER BY data ASC, hora ASC");
$vrf = mysql_num_rows($sql);
if($vrf > 0){
while($rss = mysql_fetch_array($sql)){
$data = explode("-", $rss['data']);
$hora = $rss['hora'];
$traa = explode('<div class="div_tram">', $rss['tramitacao']);
$trab = explode('</div>', $traa[1]);
$tram = $trab[0];
?>
<div class="div_tram_ass"><div>[<?=$data[2].'/'.$data[1].'/'.$data[0].' '.$hora?>]</div><div><?=$tram?></div></div>
<?php
}
}else{
?>
<div style="width: 249px;">Não há tramitações cadastradas.</div>
<?php
}
?>
</div>
</td>
  </tr>
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td><b>Palavras-Chave:</b></td>
  </tr>
  <tr>
    <td><?=$rsq['chaves']?></td>
  </tr>
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td><b>Forma de Solicitação:</b></td>
  </tr>
  <tr>
    <td><?=$rsq['forma']?></td>
  </tr>
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td><div style="background-color: #000; height: 1px;"></div></td>
  </tr>
</table>
<?php } ?>
</div>
<table width="550" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td align="center"><a href="javascript: window.print();" title="Imprimir"><img src="temas/azul/impressao.png" width="38" height="39" border="0" /></a></td>
  </tr>
  <tr>
    <td> </td>
  </tr>
</table>
<input name="id_cad" type="hidden" id="id_cad" value="<?=$rsq['id']?>" />
</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Não sei onde você acha mais fácil usar divs para fazer uma tabela... :blink: HOLY SHIT! :P

 

Sobre sua segunda dúvida, eu não entendi... Como assim imprimir um bloco .classe?

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

utilize a declaração via <link/>

 

 

<link rel="stylesheet" type="text/css" media="print" href="impressora.css" />

 

lembre-se de utilizar um CSS Reset.

Compartilhar este post

Link para o post
Compartilhar em outros sites

willwalker    2

willwalker
Postado

Continua dando o mesmo erro quando clico no link window.print(). Ele aumenta demais a area do documento e isso só acontece no Chrome, nos outros tudo normal. Segue dois prints:

 

Sem clicar no link:

Imagem Postada

-----------------

Imagem Postada

 

Clicando no link:

Imagem Postada

-----------------

Imagem Postada

 

Abraços Walker http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

willwalker    2

willwalker
Postado

utilize a declaração via <link/>

 

 

<link rel="stylesheet" type="text/css" media="print" href="impressora.css" />

 

lembre-se de utilizar um CSS Reset.

 

Tu não me explicou se é isso mesmo. Declarando por link ele pega as classes e quando usa o url em javascript para imprimir ele imprime essa classe ? E como utilizo esse CSS Reset ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

willwalker    2

willwalker
Postado

Resolvi meu probelma com essa função javascript:

 

function imprimir_documento([b]strid[/b]){
var prtContent = document.getElementById(strid);
var WinPrint = window.open('','','left=150,top=100,width=750,height=400,location=no,menubar=yes,status=no,scrollbars=yes,resizable=yes,toolbar=yes');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
return false;
}

O strid é o id do div que agrega o conteúdo. Exemplo:

 

<div id="conteudo">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</div>

<a href="javascript: imprimir_documento('conteudo');" title="Imprimir">Imprimir</a>

Abraços Walker http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

funciona sim, porque o window.print() nada mais é que uma chamada para o evento do botão [imprimir]

 

 

css reset

Compartilhar este post

Link para o post
Compartilhar em outros sites

willwalker    2

willwalker
Postado

@Evandro

 

No Chrome ele funciona incorretamente, pesquisei em fóruns americanos e um dos usuários que teve esse problema no Chrome, criou esse script que lê o que está dentro do div, imprimindo em um popup, assim funcionando da mesma forma em todos os browsers, e eu podendo manter o layout do meu sistema criando uma visualização da impressão. Assim ficando um trabalho profissional.

 

Abraços Walker http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito