Discussion between Dalton Menezes and maycon rocha - 2015-09-03

last day (15 days later) »

4:22 PM

0

A: impressão de Table HTML

Na head da sua página coloque: <link rel="stylesheet" href="print.css" media="print" /> Crie o arquivo print.css e estilize os elementos da sua tabela da forma que precisa e dê display:none nos elementos que você não quer que apareça na página de impressão. Em seguida crie um botão para impr...

Dalton obrigado pela resposta, minha dúvida é se dessa forma irá imprimir todas as paginas da tabela, por exemplo: dependendo da pesquisa gera 3 paginas e dependendo gera 10 paginas

@mayconrocha eu usei essa solução em um sistema e funcionou para todas as páginas a serem impressas. O que recomendo é que você faça um teste/simulação da solução.

Muito obrigado Dalton, vou testar aqui

@mayconrocha, conseguiu?

Dalton, me desculpe a falta de experiência mas não consegui

4:22 PM

@mayconrocha, o que deu de errado nos testes?

4:37 PM

aquela tabela acima é preenchida depois de uma pesquisa dinâmica no banco, eu preciso de um botão que possibilite a impressão do resultado

e muito obrigado pela disponibilidade em ajudar

Tranquilo, estamos aqui para isso rs :) então, mas dentro do exemplo que te passei o que não deu certo?

na verdade eu não consegui montar, em outra parte da aplicação tenho a função media print que faz o que você citou mas com base no id de um único registro, o que eu tenho agora é uma consulta dinâmica que me traz resultados variados e eu por falta de experiência mesmo não consigo montar o media print

então, mas nessa página ai que gera os resultados dinâmicos você pode colocar
<link rel="stylesheet" href="print.css" media="print" />

isso ai fica na head da página

ai você cria esse arquivo print.css ou qualquer nome relacionado

e faz as alterações da forma que precisa para imprimir

por exemplo, nela você pode ocultar todos os elementos desnecessários na hora da impressão

por aumentar as fontes dos textos e etc

então no caso eu tenho repetir a tabela no arquivo print.css ?

você já trabalhou com arquivos css?

4:48 PM

sim, mas não muito

estou ferrado kkkkk

haha calma.

no arquivo css você somente coloca códigos css, eles são códigos de estilo da página

você seleciona os elementos que quer estilizar na sua página através de seletores

eles podem selecionar por classes, ids de tags html e etc. Tudo que está no html você pode selecionar para mudar o estilo

se você colocar o código da forma que te falei, ele só funcionará na hora de imprimir, que é quando o media="print" é ativado

ai se você quiser ocultar elementos do seu html na hora da impressão

basta selecionar ele e dar um display:none

por exemplo

se você não quiser imprimir imagens da sua página, você faria no seu css

img{
display:none;
}

ou se fosse um elemento com id específico:
#id_da_tag_html{
display:none;
}

# (seleciona id)
. (seleciona uma classe)

mas voltando ao problema. Na hora de imprimir, qual está sendo o seu problema?

bom vou tentar ser o mais claro possível

na tela tem diversos elementos, uma barra lateral e os campos que seleciona os itens da pesquisa, e também a bendita tabela que traz os resultados da pesquisa.

o que preciso é imprimir somente a bendita tabela

então, pega os ids de elementos que você não quer que apareça

vai no css e oculta eles da forma que te falei

depois você pode ir no google chrome e dar um CTRL + P para simular uma impressão

ele irá lhe mostrar como sairá a impressão

visualmente

a forma que eu fiz na outra parte da aplicação foi o seguinte

eu usei o método post pra outra pagina, e nela só consta o que eu quero que seja impresso dentro de uma DIV

com media print

vou te mostrar

5:07 PM

então, mas o que não está dando certo nessa forma que fez?

<?php
require_once("funcoes.php");
?>
<!DOCTYPE html>
<html>
<head>
<title>Impressão teste frente alvara</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="resources/default.css">
<style type="text/css" media="print">
@page { size: landscape;}
</style>
</head>

<body class="alt">
<?php

date_default_timezone_set('America/Sao_Paulo');
$data_emissao=date('d/m/Y'); //Salva a data da impressão.

essa recebe da pagina de pesquisa e imprime

já estou a 4 dias fritando o juízo com isso

o que não está dando certo desse jeito que fez?

esse jeito funciona correrto, mas é outra parte da aplicação, se eu fizer dessa forma com a tabela funciona ?

brother muito obrigado mesmo, vejo que está realmente interessado a me ajudar

minha dúvida é que dessa forma o resultado é estático e com a tabela é dinâmico

se você fizer da forma que te falei, ele irá imprimir já com o resultado dinâmico.

e isso dentro da mesma página

sem a necessidade de criar uma página separada

mas é preciso que você no css oculte tudo o que não é para aparecer na página

deixando somente a tabela

manda o código da página que gera os resultados na tabela para eu dar uma olhada

blza

<?php
break;
case 'busca_veiculo_person': //Consulta personalizada do veículos que estão no pátio
echo '<h2> Veículos no Pátio</h2>';
loadCSS('data-table',NULL,TRUE);
loadJS('jquery-datatable');
?>
<script language="Javascript">
function showDiv(div)
{
document.getElementById("entrada").className = "invisivel";

document.getElementById("tipo_veic").className = "invisivel";
document.getElementById("fila_quadra").className = "invisivel";
document.getElementById("saida").className = "invisivel";
document.getElementById(div).className = "visivel";

5:23 PM

no caso é somente o que está a partir de "Resultado da pesquisa" que você precisa que apareça na impressão, correto?

isso mesmo

ok, então vamos começar os testes

você já criou o arquivo print.css ?

sim

ok

já colocou o <link rel="stylesheet" href="print.css" media="print" />
na <head> ?

ainda não

vou colocar

5:26 PM

coloca ai, e no href você especifica exatamente onde está o arquivo print.css

pronto?

só um min

blz

pronto

blz

abre o arquivo print.css

coloca isso nele:

.cad_alvara{
display: none;
}

depois salva

ai abre a sua página no chrome e dá um CTRL + P para testar

vou fazer

5:34 PM

blz, testa ai e me fala =)

apareceu a side bar e os campos de pesquisa tbm, na pagina de impressão, e só apareceu a primeira pagina da pesquisa

são referentes essa parte:

<?php
break;
case 'busca_veiculo_person': //Consulta personalizada do veículos que estão no pátio
echo '<h2> Veículos no Pátio</h2>';
loadCSS('data-table',NULL,TRUE);
loadJS('jquery-datatable');
?>

é isso?

isso

ok, uma opção rápida é envolver isso ai em uma div, por um id nela e depois dar display:none lá no print.css

<div id="nome-que-quiser-dar">
<?php
break;
case 'busca_veiculo_person': //Consulta personalizada do veículos que estão no pátio
echo '<h2> Veículos no Pátio</h2>';
loadCSS('data-table',NULL,TRUE);
loadJS('jquery-datatable');
?>
</div>

5:50 PM

vou te passar o codigo inteiro porque esta parte da aplicação esta em um único arquivo.php

<?php
require_once(dirname(dirname(__FILE__))."/funcoes.php");
protegeArquivo(basename(__FILE__));
loadJS('jquery-validate');
loadJS('jquery-validate-messages');
switch($tela):
case 'entrada_veiculo': //Cadastro de véiculos que entram no pátio
echo '<h2>Pátio de Veículos</h2>';
if (isset($_POST['cadastrar'])):
$patio = new patio(array(
'guincho'=>@$_POST['guincho'],
'entrada'=>$_POST['entrada'],
'bo'=>$_POST['bo'],
'cr'=>@$_POST['cr'],
'tipo_veic'=>@$_POST['tipo_veic'],
'veiculo'=>@$_POST['veiculo'],

é um pouco grande mas é isso

nossa hahha

parece meio confuso

brow, cria uma <div id="nome-que-quiser-dar>
antes do código que você quer fazer sumir na hora da impressão

depois fecha a tag com </div>

no final do código que quer fazer desaparecer

depois vai no print.css e coloca

#nome-que-voce-deu-para-a-div{
display: none;
}

blza

testa ai e me fala

6:02 PM

criei a div na parte do resultado da pesquisa, que é o que eu preciso mas quando dou control + p aparece a pagina toda

então, a div é para a parte que você quer ocultar, não para a parte que quer exibir na impressão

pq será através dela que você irá ocultar no css com o display:none

então eu acho que não está lendo o arquivo print.css por que mesmo com display:none ele aparece, o arquivo print.css está na mesmo pasta do aquivo.php

no código que você me mandou não tem o <link rel="stylesheet" href="print.css" media="print" /> na página

ele tem que estar na head da página. Ex.
<html>
<head>
<link rel="stylesheet" href="print.css" media="print" />
</head>
...

sim está desta forma

ok

então tem que ler o print.css

faz um teste

lá no print.css

oculta todos os títulos h1 da página para ver se desaparecem

h1{
display:none;
}

6:16 PM

blza

vou fazer o seguinte, vou separar essa parte em outro arquivo .php pra visualizar melhor

acho que encontrei uma solução fácil

me salvou

faz o seguinte

vai no seu print.css

apaga tudo

e coloca isso

* {visibility:hidden;}

.cad_alvara {
visibility:visible;
position: absolute;
top:0;
left:0;
}

6:33 PM

continua aparecendo tudo

vai lá só na parte que você quer mostrar

envolve essa parte com uma div como você estava pensando em fazer

coloca uma id nessa div

e depois posta isso

* {visibility:hidden;}

#id_que_voce_deu {
visibility:visible;
position: absolute;
top:0;
left:0;
}

agora, o problema também é que parece que não está carregando o arquivo print.css

sua tag de html/head/title/body deveria estar no inicio do arquivo

você tem muita coisa aparecendo antes dessas tags

eu separei o essa parte em outro arquivo .php por isso mas mesmo assim não carrega, vou te mandar como ficou separedo

<html>
<head>
<link rel="stylesheet" href="print.css" media="print" />
</head>
<body>

<?php

echo '<h2>VEÍCULOS NO PÁTIO</h2>';
loadCSS('data-table',NULL,TRUE);
loadJS('jquery-datatable');
?>
<script language="Javascript">
function showDiv(div)
{
document.getElementById("entrada").className = "invisivel";
document.getElementById("tipo_veic").className = "invisivel";
document.getElementById("fila_quadra").className = "invisivel";
document.getElementById("saida").className = "invisivel";
document.getElementById(div).className = "visivel";

sinceramente não sei mais o que fazer

a respeito desse código que me mandou

coloca esse

<html>
<head>
<link rel="stylesheet" href="print.css" media="print" />
</head>
<body>

<?php

echo '<h2>VEÍCULOS NO PÁTIO</h2>';
loadCSS('data-table',NULL,TRUE);
loadJS('jquery-datatable');
?>
<script language="Javascript">
function showDiv(div)
{
document.getElementById("entrada").className = "invisivel";
document.getElementById("tipo_veic").className = "invisivel";
document.getElementById("fila_quadra").className = "invisivel";
document.getElementById("saida").className = "invisivel";
document.getElementById(div).className = "visivel";

depois disso, vai lá no seu print.css

apaga tudo e coloca isso

* {visibility:hidden;}

.mostrar-print{
visibility:visible;
position: absolute;
top:0;
left:0;
}

salva tudo e faz o teste no chrome, atualizando a página com CTRL + SHIFT + F5

e depois dá um CTRL + P

6:55 PM

por algum motivo (paranormal) ele não carrega o css

o print.css ou o css que já estava usando?

o print.css

ok

você tem como me enviar todo o projeto em um arquivo zipado?

tem sim

blz, me envia por favor

você está usando qual banco de dados?

6:59 PM

mysql

ok. PhpMyAdmin?

isso

ok, entra no phpmyadmin e exporta o banco de dados para que eu possa usar aqui também

exporta em .sql

ai eu poderei efetuar os testes

blza

me passa seu email

daltonmenezes@outlook.com

mandou?

7:11 PM

acabei de mandar

vi aqui. show, irei testar aqui

encontrando a solução eu te aviso

ai te mando os arquivos novamente

deixa o chat aqui aberto

posso precisar lhe pedir informações

blz?

blza, muito obrigado pela ajuda

tranquilo =)

qual a senha do admin?

maycon? preciso dos dados para o login

7:47 PM

desculpa

é admin, admin

blz

sai dai não rs

ok, loguei

agora me diz qual é o processo até chegar na página que você precisa imprimir

patio/busca personalizada

ok

como devo efetuar a busca?

pode ser tipo veiculo que é mais facil

não aparece nenhum veículo

não cadastrou nada?

7:52 PM

puts vou te mandar a tabela com dados

blz

te enviei por email

a tabela do patio com os dados

vlw

onde você colocou o print.css?

eu tinha colocado dentro da pasta modulos

tá aqui não

8:00 PM

mas fiz uma cópia do projeto e mexi muito, por isso te mandei o original

blz, criarei aqui

toda sua aplicação é chamada a partir do painel.php?

sim

blz

e o arquivo que contém as tabelas é o patio.php?

sim esse mesmo

blz

a boa notícia é que já fiz o print.css funcionar

faz o seguinte

pega o print.css que você fez

tira ele daquela pasta

e coloca na pasta css que você já tem, ok?

depois abra o arquivo header.php

8:07 PM

bem é na verdade só tenho o arquivo original agora

ok, então crie o print.css na pasta css

depois abra o arquivo header.php

e coloque <link rel="stylesheet" href="css/print.css" media="print" />

você irá colocar ele depois do <link rel="stylesheet" href="css/style.css">

blza

ok

depois abra o arquivo print.css

e deixe ele assim:
* {visibility:hidden;}

.mostrar-print{
visibility:visible;
position: absolute;
top:0;
left:0;
}

feito

e agora?

blz, só um momento

8:51 PM

Dalton preciso sair uns 10 min, pode ser?

pode sim

vai lá

ficarei com o chat aberto

quando chegar manda mensagem

blza é rápido

9:12 PM

voltei

desculpe a demora

ta por aí ?

tô sim

ta feia a situação

eu engasguei nisso

9:27 PM

consegui aqui, tô fazendo alguns ajustes

já te passo

o loko

me salvou

muito obrigado mesmo

nada, tranquilo. O problema agora é para imprimir todos os registros

nesse caso você precisará criar uma página só para a impressão onde ele deve puxar todos os registros nela

ok?

isso mesmo

irei fazer uns ajustes aqui e já te passo a resolução da impressão da página ocultando as outras coisas e deixando somente a tabela

obrigado

9:46 PM

no seu print.css deleta todo o conteúdo e coloca isso

@page {size: landscape}

*{margin: 0 !important; visibility: hidden !important;}

#listausers * {
visibility: initial !important;
height: 100% !important;
overflow: visible !important;
}

feito

testa agora

ok

apareceu a pagina em branco, mas em paisagem

atualiza a página e testa novamente

ok

mesma coisa

aí funcionou?

9:55 PM

sim

user image

aqui fica em branco pagina

no seu aparece mais de uma pagina quando a pesquisa tem mais de uma página?

você está com os arquivos diferentes do que me mandou?

não estou com os mesmos

fecha o chrome e repete o teste

ok

yes aqui aparece

10:04 PM

deu certo?

haha

deu sim

louvemos

mas como faço pra aparecer os outros resultados da pesquisa?

você terá que seguir da forma que te falei no post

veja qual é o código que faz abrir todos os resultados de uma vez

e use ele na página que você irá criar para exibir tudo de uma vez

ai o botão imprimir te levará para essa página que você irá criar

nessa página coloque só esse conteúdo

vou tentar fazer isso

10:09 PM

blz

Dalton muito obrigado pela ajuda

nada, tranquilo =)

qualquer coisa posso te mandar um email ?

se der positiva lá a minha resposta e coloca como 'aceita' se julgar satisfatória

pode sim

só mandar email

qualquer coisa me adiciona no facebook

www.facebook.com/dalton.menezes

como que dá positiva na resposta?

10:12 PM

clica na seta para cima

e para aceitar como resposta deve aparecer lá falando

ai aparece um v de cor verde

blza

feito Dalton, mais uma vez muito obrigado

aqui só apareceu nos comentários curtos haha

me referia ao post dando a solução

aquele que tem as setas grandes do lado esquerdo

blza

fiz certo agora

não apareceu a opção de 'aceitar a resposta'?

não

vou lá de novo

10:19 PM

kkkkk

blz

sou novo aqui estou por fora

tranquilo, valeu pelas pontuações.

agora foi?

tipo, é importante pontuar as respostas que lhe foram útil. E aceitar a que achar que foi a que mais serviu e foi explicativa

isso estimula as pessoas a ajudarem

foi sim

obrigado

entendi sempre vou fazer agora

10:22 PM

qualquer problema que tiver só mandar uma mensagem ou postar no stack. Quanto mais cabeças pensando a respeito de um problema, melhor =)

valeu Dalton

valeu, Maycon. Abraço

abraço

ah, uma dica. Você tem usado funções mysql_

elas estão se tornando obsoletas e creio que na nova versão do php elas não irão funcionar

além de que elas não são seguras

procure artigos/tutoriais sobre mysqli ou PDO

valeu vou estudar a respeito

10:24 PM

blz

last day (15 days later) »

Transcript for

Sep '153

Discussion between Dalton Menezes and…

Imported from a comment discussion on pt.stackoverflow.com/que...

html impressão

join this room
about this room

00:00

06:00

12:00

18:00

all times are UTC

site design / logo © 2024 Stack Exchange Inc; legal

mobile