1. #1
    Avatar de helldanger1
    Registo
    Aug 2007
    Idade
    43
    Posts
    29.633

    Padrão Como evitar que um página se imprima

    Veremos um pequeno truque com folhas de estilos para evitar que se possa imprimir uma página web com o botão de imprimir de nosso navegador.
    Por Carlos Cuenca Díaz




    Para isso, temos de usar as folhas de estilo. Tanto se o documento tem uma folha já associada como senão, o que vamos fazer é associar-lhe uma nova folha de estilos. Tal folha conterá um estilo, com o código necessário para ocultar um elemento:

    .naover{
    visibility:hidden
    }

    Na hora de associar a folha de estilos, se acrescenta um modificador à etiqueta HTML que linka com o arquivo .css que permite especificar para que tipo de meio se aplicará esta folha. Em nosso caso, se aplica no âmbito da impressão, pelo que se utiliza o atributo media="print".

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

    Uma vez feito isso, basta que toda nossa página esteja dentro de um elemento div, que pertença à classe nãover.

    <body>
    <div class="naover">

    -- Conteúdo --


    </div>
    </body>

    Ao fazer isto provoca que a página seja visualizada na tela, mas que se pelo contrário se decide imprimir, se aplicará a folha de estilos de impressão, na qual o elemento está posto como não visível, portanto não se imprimirá.


    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

  2. #2
    Avatar de helldanger1
    Registo
    Aug 2007
    Idade
    43
    Posts
    29.633
    Código Completo:

    Vejamos o código íntegro da página web e a folha de estilos associada.

    Página HTML


    <html>
    <head>
    <link href="estilos.css" rel="stylesheet" type="text/css" media="print">
    </head>
    <body>
    <div class="naover">

    … conteúdo da página

    </div>
    </body>
    </html>

    Folha estilos: estilos.css

    .naover{
    visibility:hidden
    }

    Nota: Esta característica das folhas de estilos funciona com êxito em navegadores IExplorer 6, Netscape 7 e Opera 7. Não provamos em outras versões.


    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

Tags para este Tópico

Permissões de Postagem

  • Você não pode iniciar novos tópicos
  • Você não pode enviar respostas
  • Você não pode enviar anexos
  • Você não pode editar suas mensagens
  •  

Conectar

Conectar