Como adicionar um botão de impressão à sua página da Web

Propaganda

Você sabe, algo como adicionar um botão de impressão a uma página da Web parece bem simples, certo? De fato, por que precisamos adicionar qualquer botão ou link de impressão à página, quando tudo que o leitor precisa fazer é clicar em "Arquivo"E"Impressão…”No menu do navegador?

Por fim, pessoas diferentes desejam o recurso de impressão em suas páginas da Web por diferentes razões. Você pode apenas querer adicionar conveniência. Quando o leitor pode simplesmente clicar em um botão para obter uma impressão - ele salva alguns cliques e cada clique conta. Outras pessoas desejam personalizar o texto impresso - em outras palavras, oculte certos elementos da página da impressão. Em outras situações, as pessoas preferem criar uma versão para impressão cuidadosamente personalizada do site.

Para cada uma dessas situações, existem soluções diferentes. Sempre tentamos oferecer soluções de impressão inovadoras aqui no MUO, como o artigo de Justin sobre impressão em meias páginas Economize papel formatando e imprimindo seus arquivos com a ferramenta de imposição de Govert [Windows]

Papel custa dinheiro. Salve os dois imprimindo seus PDFs em meia página. Se você deseja um livreto ou cópias lado a lado, uma ferramenta gratuita para Windows não apenas torna isso possível, mas também simples. Pare de brincar ... consulte Mais informação e o artigo de Karl sobre PrintWhatYouLike PrintWhatYouLike- Economize papel e tinta ao imprimir páginas da Web consulte Mais informação . Neste artigo, fornecerei quatro maneiras de integrar um botão ou link de impressão ao seu site - da abordagem muito simples em HTML e Javascript ao CSS mais personalizável aproximação.

Integrando a impressão no seu site

Quando você olha para qualquer página da Web, é muito fácil entender por que você pode personalizar a impressão. Uma página da Web típica possui anúncios, banners, links de anúncios, barras laterais e seções de rodapé que não fazem nada além de ocupar espaço na página e consumir papel desperdiçado.

Se você tem um site bastante simples ou não se importa se todos os gráficos e formatações são impressos, então todos você precisa adicionar um botão simples à sua página da web e usar o método javascript “print ()” para enviar a página da web para a impressora.

A colocação desse código no seu site em um local rápido e fácil para seus leitores usar é algo como isto.

Tudo o que o leitor precisa fazer é clicar no botão e a página será enviada diretamente para a impressora, sem qualquer formatação de página. Se a página estiver além da largura imprimível da impressora, é possível que você acabe imprimindo muito mais páginas do que o necessário.

Algumas pessoas realmente não gostam da aparência de um botão de formulário. Como alternativa, você pode simplesmente usar um link com o javascript incorporado para fazer exatamente a mesma coisa.

Imprima esta página. 

Você pode ver como, em muitos casos, um texto simples parece muito mais limpo que um botão, mas que você realmente usa resume-se à aparência melhor na área da página da web em que você deseja fornecer a impressão característica.

Como você pode ver no exemplo de impressão acima, a formatação de muitos anúncios e banners não corresponde perfeitamente à exibição do navegador quando você simplesmente usa o comando de impressão. Isso se torna muito mais aparente para sites mais complexos. Outra abordagem usada pelas pessoas é bloquear seções inteiras do site usando CSS e atribuir seções específicas da página para impressão. Para fazer isso, primeiro vincule o arquivo CSS na seção de cabeçalho.

Em seguida, você precisará criar o arquivo CSS real e salvá-lo no mesmo diretório da sua página da web. O arquivo CSS deve atribuir todas as seções da página que não devem ser impressas e também tornar visíveis os elementos da página que você atribui para impressão.

Cabeçalho DIV #, DIV # newflash, banner DIV # {display: none;} body {visibilidade: oculto;} .print {visibilidade: visível;}

Agora que seu arquivo CSS está configurado, tudo o que você precisa fazer é percorrer sua página e marcar cada seção com a classe "print".

Esta linha será impressa. 

Esta linha não vai. 

Agora você pode ver na impressão onde apenas as seções da página marcadas com a classe "imprimir" são impressas na página e todas as outras seções não. A única dificuldade dessa abordagem é que você precisa desativar a exibição de todas as seções DIV que não deseja imprimir. Como você pode ver abaixo, não adicionei a seção "div" do anúncio do Google, para que ainda seja impressa.

Pode levar algum tempo para criar o arquivo CSS e distribuir as classes corretamente. Se você realmente não quer se incomodar em fazer isso em todas as páginas, pode optar por uma última abordagem. Essa é minha técnica favorita para fornecer versões imprimíveis e perfeitamente formatadas da página da web. Tudo o que você precisa fazer é criar uma versão em formato PDF do conteúdo da página, salvá-la em seu host e vincular o arquivo no cabeçalho da página.

É tudo o que você precisa fazer! Você pode incorporar o botão de impressão no site, como nos exemplos acima, mas, em vez do arquivo CSS carregado para o método de impressão, o PDF, DOC ou outro arquivo é enviado para a impressora. Como você pode ver abaixo, isso gera a versão imprimível mais limpa da sua página, e você pode personalizá-la para que fique exatamente como deseja.

Como você pode ver, há muitas opções para escolher quando você deseja colocar um botão ou link de impressão na sua página da web. Qualquer uma dessas opções funciona bem, mas a escolha certa realmente se resume à complexidade da página da Web e ao conteúdo que você deseja oferecer aos seus leitores quando eles escolhem imprimir sua página da Web.

Você já tentou alguma dessas técnicas para adicionar um botão de impressão a uma página da web? Qual técnica você mais gosta? Você tem outras soluções? Compartilhe sua visão na seção de comentários abaixo.

Crédito de imagem: Sundeip Arora