Ir para conteúdo

POWERED BY:

Arquivado

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

Filipe_A2M

Imprimir formulário?

Por , em Desenvolvimento frontend

Recommended Posts

Filipe_A2M    0

Filipe_A2M
Postado

queres que poste aqui o código da minha página que quero imprimir??? o problema é que as imagens estão no index, eu funciono muito com includes mas diz me qual delas é, se aquela que tem a informação que quero imprimir ou a que tem as imagens e formulários

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Eu quero ver a marcação da página que você quer imprimir.

Apenas HTML... poste o HTML gerado... vá em Exibir > Código Fonte

e cole aqui.

Compartilhar este post

Link para o post
Compartilhar em outros sites

webmind    5

webmind
Postado

posta o seu html e o que quer imprimir

 

 

será mais facil ajudar

Compartilhar este post

Link para o post
Compartilhar em outros sites

Filipe_A2M    0

Filipe_A2M
Postado

Eu quero ver a marcação da página que você quer imprimir.

Apenas HTML... poste o HTML gerado... vá em Exibir > Código Fonte

e cole aqui.

aqui esta a pagina que tem o que quero imprimir

<link rel="shortcut icon" href="favicon.ico">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Escola de Condução da Mealhada</title>
  
  
<!--Carrega Javascript e css externos-->
<script type="text/javascript" src="filmes.js"></script>

  </head>

<style>
.carro {
background-repeat:no-repeat;
background-attachment:scroll;
background-position:bottom right;
background-image:url(images/carrinho.jpg);

padding-right: 100px;
}
</style>

<body bgcolor=#707046>
  <center>
  <table align="center" width=80% height=40%>
  <tr bgcolor=#707046 >
  <td colspan=2 background="cabecalho2.png"><a href="http://localhost/pap/index.php?flag=home"><img border="0" src="logo2.gif" width=50% height=100%></a></td>
  </tr>
  
  <tr width=100%><td width=15% valign="top" bgcolor=#f8ee55>
logado<html>

<style type="text/css">
<!--
.login { background-color: #000000; 
font: 13px calibri;
color: #fff;
width: 180px;
}
-->
</style>


</html><br><br><html>
<style>
.data {
	font-family: calibri;
  font-weight: bold;
  font-size:12px;
  color: #000;
}
</style>

<center class="data"><img src='semaforoBN.gif' width=30% heigth=30%><br>Boa Noite!</center>
</html><br><br><link rel="stylesheet" type="text/css" charset="utf-8"  href="menu_style2.css">
<table border="5">
<div class="menu">
	<ul><li><a href="index.php?flag=logout">Sair</a></li><li><a href="index.php?flag=registos">Registos</a></li><li><a href="index.php?flag=home">Home</a></li>

		<li><a href="index.php?flag=historial">Historial</a></li>
		<li><a href="index.php?flag=horario">Horários</a></li>
		<li><a href="index.php?flag=instrutores">Instrutores</a></li>
		<li><a href="index.php?flag=frota">Frota</a></li>
		<li><a href="index.php?flag=visita">Visita às instalações</a></li>
		<li><a href="index.php?flag=inscricao">Pré-inscrição</a></li>

		<li><a href="index.php?flag=onde_estamos">Onde nos situamos</a></li>
		<li><a href="index.php?flag=contactos">Contactos</a></li>
	
	</ul>
</div>

</table>  </td>
  <td width=100% class="carro" bgcolor="ffffff" valign="top">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="style-impressao.css" media="print" />
</head>
<style type="text/css">
.form {  
font: 12px calibri, sans-serif;
color: #000;
border: 0px solid #fFF;
padding-left:10px;
}
</style>
<br><br><br><br><table class='form' border='0'  width='50%' align='center'>
	<tr>
	<th></th>
	
</tr><form name='form1' method='post' action='' >
	  <tr><td>Nome:</td><td><input name='nome' type='text' onchange=''value='André Ribeiro'disabled='disabled' size='45'></td></tr>
	<tr><td><p>Numero de BI:</td><td><input name='bi' type='text' onchange='verificacao();' value='234516789'disabled='disabled' size='10'>  </td></tr>

	<tr><td>Sexo:</label></td><td><input type='radio' name='sexo' checked='checked' value='Masculino'disabled='disabled' /> <span>(Masc)</span><input type='radio' name='sexo' value='Feminino'disabled='disabled' /> <span>(Fem)</span></td></tr><tr><td><p>Morada:</td><td><input name='rua' type='text' value='Rua da Oliveira'disabled='disabled' size='30'></td></tr>
	
	<tr><td>NºPorta:</td><td><input name='n_porta' type='text' value='1234'disabled='disabled' size='3'></td></tr>
	</p>
	
	<tr><td>Localidade:
	  </td><td><input name='localidade' type='text' value='Canas'disabled='disabled' size='30'></td></tr>
	
	<tr><td>Código de Postal:
	  </td><td><input name='cod_p' type='text' value='3843' 'disabled='disabled' size='4'>  - 

	  <input name='cod_p_rua' type='text' value='198''disabled='disabled' size='3'>    <input name='freguesia' type='text' value='Canas' 'disabled='disabled' size='20'></td></tr>
	  
	
	<tr><td>Conctactos:
	</td><td><input name='contacto' type='text' value='932776114'disabled='disabled' size='10'>  
	Outro:  <input name='contacto2' type='text' value='0'disabled='disabled' size='10'></td></tr>
	
	<tr><td>Categoria:
	</td><td>
	  <input name='categoria' type='text' onchange='escreve()' value='Categoria A'disabled='disabled'>
	</td></tr>
	
	<tr><td>Email:
	  </td><td><input name='email' type='text' value='canas@hotmail.com'disabled='disabled' size='30'></td></tr><tr><td colspan=2 align=center><a href='index.php?flag=infoedita_reg&id=310'><img src='paper&pencil_48.png' width=8% height=8% border=0></a>							<a onClick="return confirm('Deseja eliminar o utilizador: André Ribeiro?')" href="index.php?flag=infoDeleteReg&id=310">

			  <img src='paper48&cancel48.png' width=8% height=8% border=0></a>
			  <a href="imprime.php" >impr</a>
			  <img src="printer_48.png" onClick="window.print();return false" alt="Imprimir" style="cursor: hand">
						 
	  </td></tr></h6>
</form></table></html>  
  </td>
  </tr>
  <td colspan=2 valign="top"><img src="rodape.png" width="100%" height="70%"></td>
</body>
</center>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

pslucasps    2

pslucasps
Postado

@Filipe_A2M: Bom, pelo que eu sei é o seguinte:

 

Cara eu estou começando com CSS agora e aviso que você está no caminho errado. Primeiro que você misturou tabelas com div. Você não precisa utilizar tabelas pra estruturar seu layout e dessa forma terá muitos problemas. Segundo que você está utilizando muitas marcações sem aspas e outros erros como tags fechadas no lugar errado e etc. Sugiro que construa seu site do zero utilizando Tableless. Aqui na seção de Webstandards vai encontrar muito conteudo para aprender bem sobre esse assunto. Bom abaixo vou postar um exemplo de como você pode fazer seu site e realizar este efeito de impressão que deseja.

 

Aqui vai a página inicial. Arquivo: index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang='pt-br'>

<head>
<title>Seu Site</title>
<!--Inicio Meta Tags e FavIcon-->
<meta http-equiv='content-type' content='text/html; charset=iso-8859-1' />
<meta http-equiv='content-language' content='pt-br' />
<link rel='shotcurt icon' href='favicon.ico' type='image/x-icon' />
<!--Fim Meta Tags e FavIcon-->
	
<!--Inicio CSS link-->
<link href='estilo.css' rel='stylesheet' type='text/css' media='all' /> <!--CSS para o site-->
<link href='estiloprint.css' rel='stylesheet' type='text/css' media='print' /> <!--CSS para impressão-->
<!--Fim CSS link-->
</head>

<body>

<div id='geral'> <!--Div geral contendo todo o site-->

<div id='header'>
Div para o cabeçalho e colocação do logo da empresa.
</div><!--header-->

<ul id='menu'> <!--Obviamente aqui é o menu com oslinks do site-->
<li><a href='#'>Link 01</a></li>
<li><a href='#'>Link 02</a></li>
<li><a href='#'>Link 03</a></li>
<li><a href='#'>Link 04</a></li>
<li><a href='#'>Link 05</a></li>
</ul><!--menu-->
		
<div id='conteudo'>
<p>
Div para a colocação do conteudo.
</p>
<p>
Nam in dolor tincidunt ante vehicula dignissim. Nulla id libero ut dui placerat semper. 
Nulla sit amet nibh at velit facilisis gravida. Phasellus in diam. Pellentesque volutpat scelerisque 
dolor. Donec venenatis nulla suscipit nisl dignissim tristique. Ut ut lorem sit amet purus ullamcorper mattis. 
Phasellus ornare ligula non orci. Pellentesque luctus tristique orci. Proin a est. Nulla porta lacus ut leo. 
Nulla faucibus pede sit amet dui. Nullam aliquet lorem at nunc. Nullam eu tellus. 
Ut ut lorem sit amet purus ullamcorper mattis. 
Phasellus ornare ligula non orci. Pellentesque luctus tristique orci. Proin a est. Nulla porta lacus ut leo. 
Nulla faucibus pede sit amet dui. Nullam aliquet lorem at nunc. Nullam eu tellus. 
</p>
</div><!--conteudo-->
		
<div id='footer'>
Div para o rodapé.
</div><!--footer-->

</div><!--geral-->
</body>
</html>

Agora vamos ao CSS para o site. Arquivo: estilo.css

*
{
margin:0;
padding:0;
border:0;
font-family:arial, sans-serif;
}

#geral
{
width:770px; /*Você pode mudar conforme quiser*/
background-color:#363636;
margin:0 auto; /*Centraliza*/
}

#header
{
width:750px;
padding:10px;
background-color:#00CD00;
color:#FFF;
}

#menu
{
width:180px;
background-color:#696969;
float:left;
}

#menu li
{
color:#00CD00;
list-style:none;
}

#menu li a
{
color:#00CD00;
display:block;
padding:10px;
font-weight:600;
text-decoration:none;
border:#DCDCDC solid;
border-width:0 0 1px 0;
}

#menu li a:hover
{
color:#FFF;
background-color:#363636;
}

#conteudo
{
width:570px;
padding:10px;
color:#FFF;
float:right;
}

p
{
padding:10px 0 0 0;
}

#footer
{
width:750px;
padding:10px;
clear:both;
background-color:#00CD00;
color:#FFF;
}

E agora está o segredo, você irá criar o CSS especial para a impressão eliminando o menu, cabeçalho e rodapé. Sendo assim só a area do conteudo será impressa. Arquivo: estiloprint.css

*
{
margin:0;
padding:0;
border:0;
font-family:arial, sans-serif;
}

#header,
#menu,
#footer
{
display:none; /*Aqui vão todos elesmentos que você não quer que sejam impressos*/
}

#conteudo
{
width:100%;
padding:0;
}

Bom eu estou começando mas acredito que ta tudo certo, caso haja algum erro um usuario mais experiente vai falar aqui. O que você pode perceber é que não precisa das tabelas para estruturar seu site pois com o auxilio do CSS e utilizando divs você consegue um efeto muito melhor sem falar de todas as outras vantagens que o tableless trás. Sugiro que de uma lida em alguns artigos no site do maujor ou aqui no iMasters. Também tem esse site que explica como funciona o CSS para quem está começando. Busque dar uma melhorada no seu código fechando tags corretamente e outros cuidados mais.

 

Bom esse é um exemplo que fiz só pra mostrar como funciona para imprimir somente a parte do conteudo. Você pode ir montando seu layoutt a partir desse igual fez com as tabelas mas assim ficará mais organizado. Eu até peguei seu código para implementar nele mais como ele estava muito bagunçado preferi lhe mostrar dessa forma. Espero que ajude e você venha para o lado tableless da força. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

----

Edit: É meio lógico isso e provavelmente você saiba mas só pra avisar: Para ver como ficaria a impresão sem ter que imprimir va no menu arquivo ou file do navegador e clique em Visualizar impressão.

Compartilhar este post

Link para o post
Compartilhar em outros sites

webmind    5

webmind
Postado

em primeiro lugar vendo o codigo da sua paginaesta cheio de erros

 

 

como o pslucasps é melhor você fazer a pagina em tableless ate pk seria mais facil para a solucao

 

 

 

 

atencao:a estrutura esta mal feita é so para entender a logica de como poderia ser a solucao

nao esquecer que o endereco para ser ocultado tem de ser previamente congigurado no browser

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function print_it(){
document.getElementById("texto").style.display="none"
document.getElementById("accoes").style.display="none"

window.print()	
v=setTimeout("show_again()",3000)
}

function show_again(){
document.getElementById("texto").style.display="block"
document.getElementById("accoes").style.display="block"
}


</script>
</head>

<body>
<div id="texto">
some text here
</div>

<div id="conteudo">
this is the form
</div>

<br />

<div id="accoes">
<input type="button" onclick="print_it()"  value="imprimir"/>
</div>

</body>
</html>

Testado no FF


como funciona? cada conteudo esta dentro de uma div para que seja identificado como pertencente a esse elemento, ao carregar em imprimir ele "apaga" o conteudo que nao é da div form, ou seja gera um layout so do form (que pode ser melhorado quanto a posicao css). Depois ele chama a tela para imprimir que imprime so o form, passados 3s de chamar a tela "retorna" todo conteudo novamente


Nao é uma grande solucao, mas resolve. A melhor forma em minha opiniao era você com linguagem servidor criar uma pagina que recebesse os valores do form e imprimisse

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